@cartanova/qgrid-cli 1.1.5 → 1.2.0

package/bundle/web-dist/server/assets/routes-CQY28Uq3.js

@@ -0,0 +1,2855 @@
+import { S as require_react, b as useQueryClient, nt as __toESM, v as require_react_dom, x as require_jsx_runtime } from "./sd.generated-BeEKgSOs.js";
+import { n as RequestLogService, r as TokenService, t as QgridService } from "./services.generated-DjxCLdMu.js";
+import { i as lucideKeyRound, o as useNavigate } from "../entry-server.generated.js";
+//#region ~icons/lucide/activity.jsx
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+var lucideActivity = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"
+	})
+});
+//#endregion
+//#region ~icons/lucide/cpu.jsx
+var lucideCpu = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 20v2m0-20v2m5 16v2m0-20v2M2 12h2m-2 5h2M2 7h2m16 5h2m-2 5h2M20 7h2M7 20v2M7 2v2" }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+				width: 16,
+				height: 16,
+				x: 4,
+				y: 4,
+				rx: 2
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+				width: 8,
+				height: 8,
+				x: 8,
+				y: 8,
+				rx: 1
+			})
+		]
+	})
+});
+//#endregion
+//#region src/components/qgrid/HealthCard.tsx
+function MetricCard({ label, icon: Icon, children }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "rounded-lg bg-sand-50 px-5 py-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center justify-between mb-2",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+				children: label
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { className: "size-4 text-sand-400" })]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children })]
+	});
+}
+function HealthCard({ data, isLoading, isError }) {
+	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
+		children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "rounded-lg bg-sand-50 px-5 py-4 animate-pulse",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-sand-200 rounded mb-3" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-6 w-12 bg-sand-200 rounded" })]
+		}, `skeleton-${i}`))
+	});
+	const isOnline = (isError ? "offline" : data?.status ?? "unknown") === "ok";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "grid grid-cols-1 sm:grid-cols-3 gap-4",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+				label: "Status",
+				icon: lucideActivity,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: `size-2 rounded-full ${isOnline ? "bg-sage-400" : "bg-red-400"}` }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "text-base font-semibold text-sand-800",
+						children: isOnline ? "Online" : "Offline"
+					})]
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+				label: "Workers",
+				icon: lucideCpu,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-base font-semibold text-sand-800",
+					children: data?.workers ?? 0
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(MetricCard, {
+				label: "Active Tokens",
+				icon: lucideKeyRound,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-base font-semibold text-sand-800",
+					children: data?.activeTokens ?? 0
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region ~icons/lucide/chevron-left.jsx
+var lucideChevronLeft = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "m15 18l-6-6l6-6"
+	})
+});
+//#endregion
+//#region ~icons/lucide/chevron-right.jsx
+var lucideChevronRight = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		d: "m9 18l6-6l-6-6"
+	})
+});
+//#endregion
+//#region src/components/qgrid/RequestLogTable.tsx
+var PAGE_SIZE$1 = 50;
+function formatDateTime(iso) {
+	const d = new Date(iso);
+	return `${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")} ${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+}
+function formatNum(n) {
+	return n.toLocaleString();
+}
+function calcCacheHitRate(row) {
+	const denom = row.input_tokens + row.cache_read_tokens + row.cache_creation_tokens;
+	if (denom === 0) return "—";
+	return `${Math.round(row.cache_read_tokens / denom * 100)}%`;
+}
+function trimQuery(q, maxLen = 30) {
+	return q.length > maxLen ? `${q.slice(0, maxLen)}...` : q;
+}
+function RequestLogTable() {
+	const navigate = useNavigate();
+	const [page, setPage] = (0, import_react.useState)(1);
+	const [tokenFilter, setTokenFilter] = (0, import_react.useState)("");
+	const { data: statsData } = QgridService.useStats();
+	const tokenNames = (statsData ?? []).map((t) => t.name).filter(Boolean);
+	const { data, isLoading } = RequestLogService.useRequestLogs("A", {
+		num: PAGE_SIZE$1,
+		page,
+		orderBy: "id-desc",
+		...tokenFilter ? { token_name: tokenFilter } : {}
+	});
+	const rows = data?.rows ?? [];
+	const total = data?.total ?? 0;
+	const totalPages = Math.ceil(total / PAGE_SIZE$1);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2 mb-3 flex-wrap",
+		children: [tokenNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("select", {
+			value: tokenFilter,
+			onChange: (e) => {
+				setTokenFilter(e.target.value);
+				setPage(1);
+			},
+			className: "border border-sand-200 rounded-md px-2 py-1 text-xs text-sand-700 bg-white focus:outline-none focus:border-sienna-300",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+				value: "",
+				children: "All Tokens"
+			}), tokenNames.map((name) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", {
+				value: name,
+				children: name
+			}, name))]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+			className: "text-[11px] text-sand-400",
+			children: [total, " results"]
+		})]
+	}), isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "space-y-2",
+		children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-8 bg-sand-100 rounded animate-pulse" }, `skel-${i}`))
+	}) : rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "text-sand-400 text-center py-12 text-sm",
+		children: "No requests yet."
+	}) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "rounded-lg bg-sand-50 overflow-hidden",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", {
+			className: "w-full text-sm",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+				className: "border-b border-sand-200",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-left px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Date"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-left px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Token"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-left px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Query"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "In"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Out"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "C.Read"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "C.Write"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", {
+						className: "text-right px-3 py-2.5 text-[10px] uppercase tracking-wider text-sand-400 font-medium",
+						children: "Hit"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("th", { className: "w-8 px-2 py-2.5" })
+				]
+			}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", {
+				className: "divide-y divide-sand-200/60",
+				children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("tr", {
+					className: "transition-colors duration-150 hover:bg-sand-100/60 cursor-pointer",
+					onClick: () => navigate({
+						to: "/requests/show",
+						search: { id: row.id }
+					}),
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-[10px] text-sand-400 tabular-nums whitespace-nowrap",
+								children: formatDateTime(row.created_at)
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-xs text-sand-500",
+								children: row.token_name
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-sand-800 truncate max-w-48",
+								title: row.query,
+								children: trimQuery(row.query)
+							})
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.input_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.output_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.cache_read_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: formatNum(row.cache_creation_tokens)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-3 py-2.5 text-right tabular-nums text-sand-700",
+							children: calcCacheHitRate(row)
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", {
+							className: "px-2 py-2.5",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4 text-sand-400" })
+						})
+					]
+				}, row.id))
+			})]
+		})
+	}), totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center gap-3 mt-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "p-1 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+				disabled: page === 1,
+				onClick: () => setPage((p) => p - 1),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-[11px] text-sand-400 tabular-nums",
+				children: [
+					page,
+					" / ",
+					totalPages
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "p-1 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+				disabled: page === totalPages,
+				onClick: () => setPage((p) => p + 1),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4" })
+			})
+		]
+	})] })] });
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@dnd-kit+utilities@3.2.2_react@19.2.4/node_modules/@dnd-kit/utilities/dist/utilities.esm.js
+var import_react_dom = /* @__PURE__ */ __toESM(require_react_dom());
+function useCombinedRefs() {
+	for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) refs[_key] = arguments[_key];
+	return (0, import_react.useMemo)(() => (node) => {
+		refs.forEach((ref) => ref(node));
+	}, refs);
+}
+var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
+function isWindow(element) {
+	const elementString = Object.prototype.toString.call(element);
+	return elementString === "[object Window]" || elementString === "[object global]";
+}
+function isNode(node) {
+	return "nodeType" in node;
+}
+function getWindow(target) {
+	var _target$ownerDocument, _target$ownerDocument2;
+	if (!target) return window;
+	if (isWindow(target)) return target;
+	if (!isNode(target)) return window;
+	return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+function isDocument(node) {
+	const { Document } = getWindow(node);
+	return node instanceof Document;
+}
+function isHTMLElement(node) {
+	if (isWindow(node)) return false;
+	return node instanceof getWindow(node).HTMLElement;
+}
+function isSVGElement(node) {
+	return node instanceof getWindow(node).SVGElement;
+}
+function getOwnerDocument(target) {
+	if (!target) return document;
+	if (isWindow(target)) return target.document;
+	if (!isNode(target)) return document;
+	if (isDocument(target)) return target;
+	if (isHTMLElement(target) || isSVGElement(target)) return target.ownerDocument;
+	return document;
+}
+/**
+* A hook that resolves to useEffect on the server and useLayoutEffect on the client
+* @param callback {function} Callback function that is invoked when the dependencies of the hook change
+*/
+var useIsomorphicLayoutEffect = canUseDOM ? import_react.useLayoutEffect : import_react.useEffect;
+function useEvent(handler) {
+	const handlerRef = (0, import_react.useRef)(handler);
+	useIsomorphicLayoutEffect(() => {
+		handlerRef.current = handler;
+	});
+	return (0, import_react.useCallback)(function() {
+		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) args[_key] = arguments[_key];
+		return handlerRef.current == null ? void 0 : handlerRef.current(...args);
+	}, []);
+}
+function useInterval() {
+	const intervalRef = (0, import_react.useRef)(null);
+	return [(0, import_react.useCallback)((listener, duration) => {
+		intervalRef.current = setInterval(listener, duration);
+	}, []), (0, import_react.useCallback)(() => {
+		if (intervalRef.current !== null) {
+			clearInterval(intervalRef.current);
+			intervalRef.current = null;
+		}
+	}, [])];
+}
+function useLazyMemo(callback, dependencies) {
+	const valueRef = (0, import_react.useRef)();
+	return (0, import_react.useMemo)(() => {
+		const newValue = callback(valueRef.current);
+		valueRef.current = newValue;
+		return newValue;
+	}, [...dependencies]);
+}
+function useNodeRef(onChange) {
+	const onChangeHandler = useEvent(onChange);
+	const node = (0, import_react.useRef)(null);
+	return [node, (0, import_react.useCallback)((element) => {
+		if (element !== node.current) onChangeHandler?.(element, node.current);
+		node.current = element;
+	}, [])];
+}
+var ids = {};
+function useUniqueId(prefix, value) {
+	return (0, import_react.useMemo)(() => {
+		if (value) return value;
+		const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+		ids[prefix] = id;
+		return prefix + "-" + id;
+	}, [prefix, value]);
+}
+function createAdjustmentFn(modifier) {
+	return function(object) {
+		for (var _len = arguments.length, adjustments = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) adjustments[_key - 1] = arguments[_key];
+		return adjustments.reduce((accumulator, adjustment) => {
+			const entries = Object.entries(adjustment);
+			for (const [key, valueAdjustment] of entries) {
+				const value = accumulator[key];
+				if (value != null) accumulator[key] = value + modifier * valueAdjustment;
+			}
+			return accumulator;
+		}, { ...object });
+	};
+}
+var add = /* @__PURE__ */ createAdjustmentFn(1);
+var subtract = /* @__PURE__ */ createAdjustmentFn(-1);
+function hasViewportRelativeCoordinates(event) {
+	return "clientX" in event && "clientY" in event;
+}
+function isKeyboardEvent(event) {
+	if (!event) return false;
+	const { KeyboardEvent } = getWindow(event.target);
+	return KeyboardEvent && event instanceof KeyboardEvent;
+}
+function isTouchEvent(event) {
+	if (!event) return false;
+	const { TouchEvent } = getWindow(event.target);
+	return TouchEvent && event instanceof TouchEvent;
+}
+/**
+* Returns the normalized x and y coordinates for mouse and touch events.
+*/
+function getEventCoordinates(event) {
+	if (isTouchEvent(event)) {
+		if (event.touches && event.touches.length) {
+			const { clientX: x, clientY: y } = event.touches[0];
+			return {
+				x,
+				y
+			};
+		} else if (event.changedTouches && event.changedTouches.length) {
+			const { clientX: x, clientY: y } = event.changedTouches[0];
+			return {
+				x,
+				y
+			};
+		}
+	}
+	if (hasViewportRelativeCoordinates(event)) return {
+		x: event.clientX,
+		y: event.clientY
+	};
+	return null;
+}
+var CSS = /* @__PURE__ */ Object.freeze({
+	Translate: { toString(transform) {
+		if (!transform) return;
+		const { x, y } = transform;
+		return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+	} },
+	Scale: { toString(transform) {
+		if (!transform) return;
+		const { scaleX, scaleY } = transform;
+		return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+	} },
+	Transform: { toString(transform) {
+		if (!transform) return;
+		return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(" ");
+	} },
+	Transition: { toString(_ref) {
+		let { property, duration, easing } = _ref;
+		return property + " " + duration + "ms " + easing;
+	} }
+});
+//#endregion
+//#region ../../node_modules/.pnpm/@dnd-kit+accessibility@3.1.1_react@19.2.4/node_modules/@dnd-kit/accessibility/dist/accessibility.esm.js
+var hiddenStyles = { display: "none" };
+function HiddenText(_ref) {
+	let { id, value } = _ref;
+	return import_react.createElement("div", {
+		id,
+		style: hiddenStyles
+	}, value);
+}
+function LiveRegion(_ref) {
+	let { id, announcement, ariaLiveType = "assertive" } = _ref;
+	return import_react.createElement("div", {
+		id,
+		style: {
+			position: "fixed",
+			top: 0,
+			left: 0,
+			width: 1,
+			height: 1,
+			margin: -1,
+			border: 0,
+			padding: 0,
+			overflow: "hidden",
+			clip: "rect(0 0 0 0)",
+			clipPath: "inset(100%)",
+			whiteSpace: "nowrap"
+		},
+		role: "status",
+		"aria-live": ariaLiveType,
+		"aria-atomic": true
+	}, announcement);
+}
+function useAnnouncement() {
+	const [announcement, setAnnouncement] = (0, import_react.useState)("");
+	return {
+		announce: (0, import_react.useCallback)((value) => {
+			if (value != null) setAnnouncement(value);
+		}, []),
+		announcement
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@dnd-kit+core@4.0.3_react-dom@19.2.4_react@19.2.4__react@19.2.4/node_modules/@dnd-kit/core/dist/core.esm.js
+var screenReaderInstructions = { draggable: `
+    To pick up a draggable item, press the space bar.
+    While dragging, use the arrow keys to move the item.
+    Press space again to drop the item in its new position, or press escape to cancel.
+  ` };
+var defaultAnnouncements = {
+	onDragStart(id) {
+		return `Picked up draggable item ${id}.`;
+	},
+	onDragOver(id, overId) {
+		if (overId) return `Draggable item ${id} was moved over droppable area ${overId}.`;
+		return `Draggable item ${id} is no longer over a droppable area.`;
+	},
+	onDragEnd(id, overId) {
+		if (overId) return `Draggable item ${id} was dropped over droppable area ${overId}`;
+		return `Draggable item ${id} was dropped.`;
+	},
+	onDragCancel(id) {
+		return `Dragging was cancelled. Draggable item ${id} was dropped.`;
+	}
+};
+var Action;
+(function(Action) {
+	Action["DragStart"] = "dragStart";
+	Action["DragMove"] = "dragMove";
+	Action["DragEnd"] = "dragEnd";
+	Action["DragCancel"] = "dragCancel";
+	Action["DragOver"] = "dragOver";
+	Action["RegisterDroppable"] = "registerDroppable";
+	Action["SetDroppableDisabled"] = "setDroppableDisabled";
+	Action["UnregisterDroppable"] = "unregisterDroppable";
+})(Action || (Action = {}));
+function noop(..._args) {}
+var DroppableContainersMap = class extends Map {
+	get(id) {
+		var _super$get;
+		return id != null ? (_super$get = super.get(id)) != null ? _super$get : void 0 : void 0;
+	}
+	toArray() {
+		return Array.from(this.values());
+	}
+	getEnabled() {
+		return this.toArray().filter(({ disabled }) => !disabled);
+	}
+	getNodeFor(id) {
+		var _this$get$node$curren, _this$get;
+		return (_this$get$node$curren = (_this$get = this.get(id)) == null ? void 0 : _this$get.node.current) != null ? _this$get$node$curren : void 0;
+	}
+};
+var Context$1 = /* @__PURE__ */ (0, import_react.createContext)({
+	activatorEvent: null,
+	active: null,
+	activeNode: null,
+	activeNodeRect: null,
+	activeNodeClientRect: null,
+	activators: [],
+	ariaDescribedById: { draggable: "" },
+	containerNodeRect: null,
+	dispatch: noop,
+	draggableNodes: {},
+	droppableRects: /* @__PURE__ */ new Map(),
+	droppableContainers: /* @__PURE__ */ new DroppableContainersMap(),
+	over: null,
+	dragOverlay: {
+		nodeRef: { current: null },
+		rect: null,
+		setRef: noop
+	},
+	scrollableAncestors: [],
+	scrollableAncestorRects: [],
+	recomputeLayouts: noop,
+	windowRect: null,
+	willRecomputeLayouts: false
+});
+function getInitialState() {
+	return {
+		draggable: {
+			active: null,
+			initialCoordinates: {
+				x: 0,
+				y: 0
+			},
+			nodes: {},
+			translate: {
+				x: 0,
+				y: 0
+			}
+		},
+		droppable: { containers: new DroppableContainersMap() }
+	};
+}
+function reducer(state, action) {
+	switch (action.type) {
+		case Action.DragStart: return {
+			...state,
+			draggable: {
+				...state.draggable,
+				initialCoordinates: action.initialCoordinates,
+				active: action.active
+			}
+		};
+		case Action.DragMove:
+			if (!state.draggable.active) return state;
+			return {
+				...state,
+				draggable: {
+					...state.draggable,
+					translate: {
+						x: action.coordinates.x - state.draggable.initialCoordinates.x,
+						y: action.coordinates.y - state.draggable.initialCoordinates.y
+					}
+				}
+			};
+		case Action.DragEnd:
+		case Action.DragCancel: return {
+			...state,
+			draggable: {
+				...state.draggable,
+				active: null,
+				initialCoordinates: {
+					x: 0,
+					y: 0
+				},
+				translate: {
+					x: 0,
+					y: 0
+				}
+			}
+		};
+		case Action.RegisterDroppable: {
+			const { element } = action;
+			const { id } = element;
+			const containers = new DroppableContainersMap(state.droppable.containers);
+			containers.set(id, element);
+			return {
+				...state,
+				droppable: {
+					...state.droppable,
+					containers
+				}
+			};
+		}
+		case Action.SetDroppableDisabled: {
+			const { id, key, disabled } = action;
+			const element = state.droppable.containers.get(id);
+			if (!element || key !== element.key) return state;
+			const containers = new DroppableContainersMap(state.droppable.containers);
+			containers.set(id, {
+				...element,
+				disabled
+			});
+			return {
+				...state,
+				droppable: {
+					...state.droppable,
+					containers
+				}
+			};
+		}
+		case Action.UnregisterDroppable: {
+			const { id, key } = action;
+			const element = state.droppable.containers.get(id);
+			if (!element || key !== element.key) return state;
+			const containers = new DroppableContainersMap(state.droppable.containers);
+			containers.delete(id);
+			return {
+				...state,
+				droppable: {
+					...state.droppable,
+					containers
+				}
+			};
+		}
+		default: return state;
+	}
+}
+var DndMonitorContext = /* @__PURE__ */ (0, import_react.createContext)({
+	type: null,
+	event: null
+});
+function useDndMonitor({ onDragStart, onDragMove, onDragOver, onDragEnd, onDragCancel }) {
+	const monitorState = (0, import_react.useContext)(DndMonitorContext);
+	const previousMonitorState = (0, import_react.useRef)(monitorState);
+	(0, import_react.useEffect)(() => {
+		if (monitorState !== previousMonitorState.current) {
+			const { type, event } = monitorState;
+			switch (type) {
+				case Action.DragStart:
+					onDragStart?.(event);
+					break;
+				case Action.DragMove:
+					onDragMove?.(event);
+					break;
+				case Action.DragOver:
+					onDragOver?.(event);
+					break;
+				case Action.DragCancel:
+					onDragCancel?.(event);
+					break;
+				case Action.DragEnd:
+					onDragEnd?.(event);
+					break;
+			}
+			previousMonitorState.current = monitorState;
+		}
+	}, [
+		monitorState,
+		onDragStart,
+		onDragMove,
+		onDragOver,
+		onDragEnd,
+		onDragCancel
+	]);
+}
+function Accessibility({ announcements = defaultAnnouncements, hiddenTextDescribedById, screenReaderInstructions }) {
+	const { announce, announcement } = useAnnouncement();
+	const liveRegionId = useUniqueId(`DndLiveRegion`);
+	const [mounted, setMounted] = (0, import_react.useState)(false);
+	(0, import_react.useEffect)(() => {
+		setMounted(true);
+	}, []);
+	useDndMonitor((0, import_react.useMemo)(() => ({
+		onDragStart({ active }) {
+			announce(announcements.onDragStart(active.id));
+		},
+		onDragMove({ active, over }) {
+			if (announcements.onDragMove) announce(announcements.onDragMove(active.id, over == null ? void 0 : over.id));
+		},
+		onDragOver({ active, over }) {
+			announce(announcements.onDragOver(active.id, over == null ? void 0 : over.id));
+		},
+		onDragEnd({ active, over }) {
+			announce(announcements.onDragEnd(active.id, over == null ? void 0 : over.id));
+		},
+		onDragCancel({ active }) {
+			announce(announcements.onDragCancel(active.id));
+		}
+	}), [announce, announcements]));
+	return mounted ? (0, import_react_dom.createPortal)(import_react.createElement(import_react.Fragment, null, import_react.createElement(HiddenText, {
+		id: hiddenTextDescribedById,
+		value: screenReaderInstructions.draggable
+	}), import_react.createElement(LiveRegion, {
+		id: liveRegionId,
+		announcement
+	})), document.body) : null;
+}
+var defaultCoordinates = /* @__PURE__ */ Object.freeze({
+	x: 0,
+	y: 0
+});
+/**
+* Returns the distance between two points
+*/
+function distanceBetween(p1, p2) {
+	return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
+}
+/**
+* Returns the coordinates of the center of a given ClientRect
+*/
+function centerOfRectangle(rect, left = rect.offsetLeft, top = rect.offsetTop) {
+	return {
+		x: left + rect.width * .5,
+		y: top + rect.height * .5
+	};
+}
+/**
+* Returns the closest rectangle from an array of rectangles to the center of a given
+* rectangle.
+*/
+var closestCenter = ({ collisionRect, droppableContainers }) => {
+	const centerRect = centerOfRectangle(collisionRect, collisionRect.left, collisionRect.top);
+	let minDistanceToCenter = Infinity;
+	let minDroppableContainer = null;
+	for (const droppableContainer of droppableContainers) {
+		const { rect: { current: rect } } = droppableContainer;
+		if (rect) {
+			const distBetween = distanceBetween(centerOfRectangle(rect), centerRect);
+			if (distBetween < minDistanceToCenter) {
+				minDistanceToCenter = distBetween;
+				minDroppableContainer = droppableContainer.id;
+			}
+		}
+	}
+	return minDroppableContainer;
+};
+function adjustScale(transform, rect1, rect2) {
+	return {
+		...transform,
+		scaleX: rect1 && rect2 ? rect1.width / rect2.width : 1,
+		scaleY: rect1 && rect2 ? rect1.height / rect2.height : 1
+	};
+}
+function getRectDelta(rect1, rect2) {
+	return rect1 && rect2 ? {
+		x: rect1.left - rect2.left,
+		y: rect1.top - rect2.top
+	} : defaultCoordinates;
+}
+function createRectAdjustmentFn(modifier) {
+	return function adjustViewRect(viewRect, ...adjustments) {
+		return adjustments.reduce((acc, adjustment) => ({
+			...acc,
+			top: acc.top + modifier * adjustment.y,
+			bottom: acc.bottom + modifier * adjustment.y,
+			left: acc.left + modifier * adjustment.x,
+			right: acc.right + modifier * adjustment.x,
+			offsetLeft: acc.offsetLeft + modifier * adjustment.x,
+			offsetTop: acc.offsetTop + modifier * adjustment.y
+		}), { ...viewRect });
+	};
+}
+var getAdjustedRect = /* @__PURE__ */ createRectAdjustmentFn(1);
+function isFixed(node, computedStyle = window.getComputedStyle(node)) {
+	return computedStyle.position === "fixed";
+}
+function isScrollable(node, computedStyle = window.getComputedStyle(node)) {
+	const overflowRegex = /(auto|scroll|overlay)/;
+	return [
+		"overflow",
+		"overflowX",
+		"overflowY"
+	].find((property) => {
+		const value = computedStyle[property];
+		return typeof value === "string" ? overflowRegex.test(value) : false;
+	}) != null;
+}
+function getScrollableAncestors(element) {
+	const scrollParents = [];
+	function findScrollableAncestors(node) {
+		if (!node) return scrollParents;
+		if (isDocument(node) && node.scrollingElement != null && !scrollParents.includes(node.scrollingElement)) {
+			scrollParents.push(node.scrollingElement);
+			return scrollParents;
+		}
+		if (!isHTMLElement(node) || isSVGElement(node)) return scrollParents;
+		if (scrollParents.includes(node)) return scrollParents;
+		const computedStyle = window.getComputedStyle(node);
+		if (isScrollable(node, computedStyle)) scrollParents.push(node);
+		if (isFixed(node, computedStyle)) return scrollParents;
+		return findScrollableAncestors(node.parentNode);
+	}
+	return element ? findScrollableAncestors(element.parentNode) : scrollParents;
+}
+function getScrollableElement(element) {
+	if (!canUseDOM || !element) return null;
+	if (isWindow(element)) return element;
+	if (!isNode(element)) return null;
+	if (isDocument(element) || element === getOwnerDocument(element).scrollingElement) return window;
+	if (isHTMLElement(element)) return element;
+	return null;
+}
+function getScrollCoordinates(element) {
+	if (isWindow(element)) return {
+		x: element.scrollX,
+		y: element.scrollY
+	};
+	return {
+		x: element.scrollLeft,
+		y: element.scrollTop
+	};
+}
+var Direction;
+(function(Direction) {
+	Direction[Direction["Forward"] = 1] = "Forward";
+	Direction[Direction["Backward"] = -1] = "Backward";
+})(Direction || (Direction = {}));
+function getScrollPosition(scrollingContainer) {
+	const minScroll = {
+		x: 0,
+		y: 0
+	};
+	const maxScroll = {
+		x: scrollingContainer.scrollWidth - scrollingContainer.clientWidth,
+		y: scrollingContainer.scrollHeight - scrollingContainer.clientHeight
+	};
+	return {
+		isTop: scrollingContainer.scrollTop <= minScroll.y,
+		isLeft: scrollingContainer.scrollLeft <= minScroll.x,
+		isBottom: scrollingContainer.scrollTop >= maxScroll.y,
+		isRight: scrollingContainer.scrollLeft >= maxScroll.x,
+		maxScroll,
+		minScroll
+	};
+}
+function isDocumentScrollingElement(element) {
+	if (!canUseDOM || !element) return false;
+	return element === document.scrollingElement;
+}
+var defaultThreshold = {
+	x: .2,
+	y: .2
+};
+function getScrollDirectionAndSpeed(scrollContainer, scrollContainerRect, { top, left, right, bottom }, acceleration = 10, thresholdPercentage = defaultThreshold) {
+	const { clientHeight, clientWidth } = scrollContainer;
+	const finalScrollContainerRect = isDocumentScrollingElement(scrollContainer) ? {
+		top: 0,
+		left: 0,
+		right: clientWidth,
+		bottom: clientHeight,
+		width: clientWidth,
+		height: clientHeight
+	} : scrollContainerRect;
+	const { isTop, isBottom, isLeft, isRight } = getScrollPosition(scrollContainer);
+	const direction = {
+		x: 0,
+		y: 0
+	};
+	const speed = {
+		x: 0,
+		y: 0
+	};
+	const threshold = {
+		height: finalScrollContainerRect.height * thresholdPercentage.y,
+		width: finalScrollContainerRect.width * thresholdPercentage.x
+	};
+	if (!isTop && top <= finalScrollContainerRect.top + threshold.height) {
+		direction.y = Direction.Backward;
+		speed.y = acceleration * Math.abs((finalScrollContainerRect.top + threshold.height - top) / threshold.height);
+	} else if (!isBottom && bottom >= finalScrollContainerRect.bottom - threshold.height) {
+		direction.y = Direction.Forward;
+		speed.y = acceleration * Math.abs((finalScrollContainerRect.bottom - threshold.height - bottom) / threshold.height);
+	}
+	if (!isRight && right >= finalScrollContainerRect.right - threshold.width) {
+		direction.x = Direction.Forward;
+		speed.x = acceleration * Math.abs((finalScrollContainerRect.right - threshold.width - right) / threshold.width);
+	} else if (!isLeft && left <= finalScrollContainerRect.left + threshold.width) {
+		direction.x = Direction.Backward;
+		speed.x = acceleration * Math.abs((finalScrollContainerRect.left + threshold.width - left) / threshold.width);
+	}
+	return {
+		direction,
+		speed
+	};
+}
+function getScrollElementRect(element) {
+	if (element === document.scrollingElement) {
+		const { innerWidth, innerHeight } = window;
+		return {
+			top: 0,
+			left: 0,
+			right: innerWidth,
+			bottom: innerHeight,
+			width: innerWidth,
+			height: innerHeight
+		};
+	}
+	const { top, left, right, bottom } = element.getBoundingClientRect();
+	return {
+		top,
+		left,
+		right,
+		bottom,
+		width: element.clientWidth,
+		height: element.clientHeight
+	};
+}
+function getScrollOffsets(scrollableAncestors) {
+	return scrollableAncestors.reduce((acc, node) => {
+		return add(acc, getScrollCoordinates(node));
+	}, defaultCoordinates);
+}
+function getEdgeOffset(node, parent, offset = defaultCoordinates) {
+	if (!node || !isHTMLElement(node)) return offset;
+	const nodeOffset = {
+		x: offset.x + node.offsetLeft,
+		y: offset.y + node.offsetTop
+	};
+	if (node.offsetParent === parent) return nodeOffset;
+	return getEdgeOffset(node.offsetParent, parent, nodeOffset);
+}
+function getLayoutRect(element) {
+	const { offsetWidth: width, offsetHeight: height } = element;
+	const { x: offsetLeft, y: offsetTop } = getEdgeOffset(element, null);
+	return {
+		width,
+		height,
+		offsetTop,
+		offsetLeft
+	};
+}
+function getBoundingClientRect(element) {
+	if (isWindow(element)) {
+		const width = window.innerWidth;
+		const height = window.innerHeight;
+		return {
+			top: 0,
+			left: 0,
+			right: width,
+			bottom: height,
+			width,
+			height,
+			offsetTop: 0,
+			offsetLeft: 0
+		};
+	}
+	const { offsetTop, offsetLeft } = getLayoutRect(element);
+	const { width, height, top, bottom, left, right } = element.getBoundingClientRect();
+	return {
+		width,
+		height,
+		top,
+		bottom,
+		right,
+		left,
+		offsetTop,
+		offsetLeft
+	};
+}
+function getViewRect(element) {
+	const { width, height, offsetTop, offsetLeft } = getLayoutRect(element);
+	const scrollOffsets = getScrollOffsets(getScrollableAncestors(element));
+	const top = offsetTop - scrollOffsets.y;
+	const left = offsetLeft - scrollOffsets.x;
+	return {
+		width,
+		height,
+		top,
+		bottom: top + height,
+		right: left + width,
+		left,
+		offsetTop,
+		offsetLeft
+	};
+}
+/**
+* Returns the intersecting rectangle area between two rectangles
+*/
+function getIntersectionRatio(entry, target) {
+	const top = Math.max(target.top, entry.offsetTop);
+	const left = Math.max(target.left, entry.offsetLeft);
+	const right = Math.min(target.left + target.width, entry.offsetLeft + entry.width);
+	const bottom = Math.min(target.top + target.height, entry.offsetTop + entry.height);
+	const width = right - left;
+	const height = bottom - top;
+	if (left < right && top < bottom) {
+		const targetArea = target.width * target.height;
+		const entryArea = entry.width * entry.height;
+		const intersectionArea = width * height;
+		const intersectionRatio = intersectionArea / (targetArea + entryArea - intersectionArea);
+		return Number(intersectionRatio.toFixed(4));
+	}
+	return 0;
+}
+/**
+* Returns the rectangle that has the greatest intersection area with a given
+* rectangle in an array of rectangles.
+*/
+var rectIntersection = ({ collisionRect, droppableContainers }) => {
+	let maxIntersectionRatio = 0;
+	let maxIntersectingDroppableContainer = null;
+	for (const droppableContainer of droppableContainers) {
+		const { rect: { current: rect } } = droppableContainer;
+		if (rect) {
+			const intersectionRatio = getIntersectionRatio(rect, collisionRect);
+			if (intersectionRatio > maxIntersectionRatio) {
+				maxIntersectionRatio = intersectionRatio;
+				maxIntersectingDroppableContainer = droppableContainer.id;
+			}
+		}
+	}
+	return maxIntersectingDroppableContainer;
+};
+var AutoScrollActivator;
+(function(AutoScrollActivator) {
+	AutoScrollActivator[AutoScrollActivator["Pointer"] = 0] = "Pointer";
+	AutoScrollActivator[AutoScrollActivator["DraggableRect"] = 1] = "DraggableRect";
+})(AutoScrollActivator || (AutoScrollActivator = {}));
+var TraversalOrder;
+(function(TraversalOrder) {
+	TraversalOrder[TraversalOrder["TreeOrder"] = 0] = "TreeOrder";
+	TraversalOrder[TraversalOrder["ReversedTreeOrder"] = 1] = "ReversedTreeOrder";
+})(TraversalOrder || (TraversalOrder = {}));
+function useAutoScroller({ acceleration, activator = AutoScrollActivator.Pointer, canScroll, draggingRect, enabled, interval = 5, order = TraversalOrder.TreeOrder, pointerCoordinates, scrollableAncestors, scrollableAncestorRects, threshold }) {
+	const [setAutoScrollInterval, clearAutoScrollInterval] = useInterval();
+	const scrollSpeed = (0, import_react.useRef)({
+		x: 1,
+		y: 1
+	});
+	const rect = (0, import_react.useMemo)(() => {
+		switch (activator) {
+			case AutoScrollActivator.Pointer: return pointerCoordinates ? {
+				top: pointerCoordinates.y,
+				bottom: pointerCoordinates.y,
+				left: pointerCoordinates.x,
+				right: pointerCoordinates.x
+			} : null;
+			case AutoScrollActivator.DraggableRect: return draggingRect;
+		}
+		return null;
+	}, [
+		activator,
+		draggingRect,
+		pointerCoordinates
+	]);
+	const scrollDirection = (0, import_react.useRef)(defaultCoordinates);
+	const scrollContainerRef = (0, import_react.useRef)(null);
+	const autoScroll = (0, import_react.useCallback)(() => {
+		const scrollContainer = scrollContainerRef.current;
+		if (!scrollContainer) return;
+		const scrollLeft = scrollSpeed.current.x * scrollDirection.current.x;
+		const scrollTop = scrollSpeed.current.y * scrollDirection.current.y;
+		scrollContainer.scrollBy(scrollLeft, scrollTop);
+	}, []);
+	const sortedScrollableAncestors = (0, import_react.useMemo)(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
+	(0, import_react.useEffect)(() => {
+		if (!enabled || !scrollableAncestors.length || !rect) {
+			clearAutoScrollInterval();
+			return;
+		}
+		for (const scrollContainer of sortedScrollableAncestors) {
+			if ((canScroll == null ? void 0 : canScroll(scrollContainer)) === false) continue;
+			const scrolllContainerRect = scrollableAncestorRects[scrollableAncestors.indexOf(scrollContainer)];
+			if (!scrolllContainerRect) continue;
+			const { direction, speed } = getScrollDirectionAndSpeed(scrollContainer, scrolllContainerRect, rect, acceleration, threshold);
+			if (speed.x > 0 || speed.y > 0) {
+				clearAutoScrollInterval();
+				scrollContainerRef.current = scrollContainer;
+				setAutoScrollInterval(autoScroll, interval);
+				scrollSpeed.current = speed;
+				scrollDirection.current = direction;
+				return;
+			}
+		}
+		scrollSpeed.current = {
+			x: 0,
+			y: 0
+		};
+		scrollDirection.current = {
+			x: 0,
+			y: 0
+		};
+		clearAutoScrollInterval();
+	}, [
+		acceleration,
+		autoScroll,
+		canScroll,
+		clearAutoScrollInterval,
+		enabled,
+		interval,
+		JSON.stringify(rect),
+		setAutoScrollInterval,
+		scrollableAncestors,
+		sortedScrollableAncestors,
+		scrollableAncestorRects,
+		JSON.stringify(threshold)
+	]);
+}
+function useCachedNode(draggableNodes, id) {
+	const draggableNode = id !== null ? draggableNodes[id] : void 0;
+	const node = draggableNode ? draggableNode.node.current : null;
+	return useLazyMemo((cachedNode) => {
+		var _ref;
+		if (id === null) return null;
+		return (_ref = node != null ? node : cachedNode) != null ? _ref : null;
+	}, [node, id]);
+}
+function useCombineActivators(sensors, getSyntheticHandler) {
+	return (0, import_react.useMemo)(() => sensors.reduce((accumulator, sensor) => {
+		const { sensor: Sensor } = sensor;
+		const sensorActivators = Sensor.activators.map((activator) => ({
+			eventName: activator.eventName,
+			handler: getSyntheticHandler(activator.handler, sensor)
+		}));
+		return [...accumulator, ...sensorActivators];
+	}, []), [sensors, getSyntheticHandler]);
+}
+function useData(data) {
+	const dataRef = (0, import_react.useRef)(data);
+	useIsomorphicLayoutEffect(() => {
+		if (dataRef.current !== data) dataRef.current = data;
+	}, [data]);
+	return dataRef;
+}
+var MeasuringStrategy;
+(function(MeasuringStrategy) {
+	MeasuringStrategy[MeasuringStrategy["Always"] = 0] = "Always";
+	MeasuringStrategy[MeasuringStrategy["BeforeDragging"] = 1] = "BeforeDragging";
+	MeasuringStrategy[MeasuringStrategy["WhileDragging"] = 2] = "WhileDragging";
+})(MeasuringStrategy || (MeasuringStrategy = {}));
+var MeasuringFrequency;
+(function(MeasuringFrequency) {
+	MeasuringFrequency["Optimized"] = "optimized";
+})(MeasuringFrequency || (MeasuringFrequency = {}));
+var defaultValue = /* @__PURE__ */ new Map();
+var defaultConfig = {
+	measure: getLayoutRect,
+	strategy: MeasuringStrategy.WhileDragging,
+	frequency: MeasuringFrequency.Optimized
+};
+function useDroppableMeasuring(containers, { dragging, dependencies, config }) {
+	const [willRecomputeLayouts, setWillRecomputeLayouts] = (0, import_react.useState)(false);
+	const { frequency, measure, strategy } = {
+		...defaultConfig,
+		...config
+	};
+	const containersRef = (0, import_react.useRef)(containers);
+	const recomputeLayouts = (0, import_react.useCallback)(() => setWillRecomputeLayouts(true), []);
+	const recomputeLayoutsTimeoutId = (0, import_react.useRef)(null);
+	const disabled = isDisabled();
+	const layoutRectMap = useLazyMemo((previousValue) => {
+		if (disabled && !dragging) return defaultValue;
+		if (!previousValue || previousValue === defaultValue || containersRef.current !== containers || willRecomputeLayouts) {
+			for (let container of containers) {
+				if (!container) continue;
+				container.rect.current = container.node.current ? measure(container.node.current) : null;
+			}
+			return createLayoutRectMap(containers);
+		}
+		return previousValue;
+	}, [
+		containers,
+		dragging,
+		disabled,
+		measure,
+		willRecomputeLayouts
+	]);
+	(0, import_react.useEffect)(() => {
+		containersRef.current = containers;
+	}, [containers]);
+	(0, import_react.useEffect)(() => {
+		if (willRecomputeLayouts) setWillRecomputeLayouts(false);
+	}, [willRecomputeLayouts]);
+	(0, import_react.useEffect)(function recompute() {
+		if (disabled) return;
+		requestAnimationFrame(recomputeLayouts);
+	}, [dragging, disabled]);
+	(0, import_react.useEffect)(function forceRecomputeLayouts() {
+		if (disabled || typeof frequency !== "number" || recomputeLayoutsTimeoutId.current !== null) return;
+		recomputeLayoutsTimeoutId.current = setTimeout(() => {
+			recomputeLayouts();
+			recomputeLayoutsTimeoutId.current = null;
+		}, frequency);
+	}, [
+		frequency,
+		disabled,
+		recomputeLayouts,
+		...dependencies
+	]);
+	return {
+		layoutRectMap,
+		recomputeLayouts,
+		willRecomputeLayouts
+	};
+	function isDisabled() {
+		switch (strategy) {
+			case MeasuringStrategy.Always: return false;
+			case MeasuringStrategy.BeforeDragging: return dragging;
+			default: return !dragging;
+		}
+	}
+}
+function createLayoutRectMap(containers) {
+	const layoutRectMap = /* @__PURE__ */ new Map();
+	if (containers) for (const container of containers) {
+		if (!container) continue;
+		const { id, rect } = container;
+		if (rect.current == null) continue;
+		layoutRectMap.set(id, rect.current);
+	}
+	return layoutRectMap;
+}
+function useScrollOffsets(elements) {
+	const [scrollCoordinates, setScrollCoordinates] = (0, import_react.useState)(null);
+	const prevElements = (0, import_react.useRef)(elements);
+	const handleScroll = (0, import_react.useCallback)((event) => {
+		const scrollingElement = getScrollableElement(event.target);
+		if (!scrollingElement) return;
+		setScrollCoordinates((scrollCoordinates) => {
+			if (!scrollCoordinates) return null;
+			scrollCoordinates.set(scrollingElement, getScrollCoordinates(scrollingElement));
+			return new Map(scrollCoordinates);
+		});
+	}, []);
+	(0, import_react.useEffect)(() => {
+		const previousElements = prevElements.current;
+		if (elements !== previousElements) {
+			cleanup(previousElements);
+			const entries = elements.map((element) => {
+				const scrollableElement = getScrollableElement(element);
+				if (scrollableElement) {
+					scrollableElement.addEventListener("scroll", handleScroll, { passive: true });
+					return [scrollableElement, getScrollCoordinates(scrollableElement)];
+				}
+				return null;
+			}).filter((entry) => entry != null);
+			setScrollCoordinates(entries.length ? new Map(entries) : null);
+			prevElements.current = elements;
+		}
+		return () => {
+			cleanup(elements);
+			cleanup(previousElements);
+		};
+		function cleanup(elements) {
+			elements.forEach((element) => {
+				getScrollableElement(element)?.removeEventListener("scroll", handleScroll);
+			});
+		}
+	}, [handleScroll, elements]);
+	return (0, import_react.useMemo)(() => {
+		if (elements.length) return scrollCoordinates ? Array.from(scrollCoordinates.values()).reduce((acc, coordinates) => add(acc, coordinates), defaultCoordinates) : getScrollOffsets(elements);
+		return defaultCoordinates;
+	}, [elements, scrollCoordinates]);
+}
+var defaultValue$1 = [];
+function useScrollableAncestors(node) {
+	const previousNode = (0, import_react.useRef)(node);
+	const ancestors = useLazyMemo((previousValue) => {
+		if (!node) return defaultValue$1;
+		if (previousValue && node && previousNode.current && node.parentNode === previousNode.current.parentNode) return previousValue;
+		return getScrollableAncestors(node);
+	}, [node]);
+	(0, import_react.useEffect)(() => {
+		previousNode.current = node;
+	}, [node]);
+	return ancestors;
+}
+function useSensorSetup(sensors) {
+	(0, import_react.useEffect)(() => {
+		if (!canUseDOM) return;
+		const teardownFns = sensors.map(({ sensor }) => sensor.setup == null ? void 0 : sensor.setup());
+		return () => {
+			for (const teardown of teardownFns) teardown?.();
+		};
+	}, sensors.map(({ sensor }) => sensor));
+}
+function useSyntheticListeners(listeners, id) {
+	return (0, import_react.useMemo)(() => {
+		return listeners.reduce((acc, { eventName, handler }) => {
+			acc[eventName] = (event) => {
+				handler(event, id);
+			};
+			return acc;
+		}, {});
+	}, [listeners, id]);
+}
+var useClientRect = /* @__PURE__ */ createUseRectFn(getBoundingClientRect);
+var useClientRects = /* @__PURE__ */ createUseRectsFn(getBoundingClientRect);
+function useRect(element, getRect, forceRecompute) {
+	const previousElement = (0, import_react.useRef)(element);
+	return useLazyMemo((previousValue) => {
+		if (!element) return null;
+		if (forceRecompute || !previousValue && element || element !== previousElement.current) {
+			if (isHTMLElement(element) && element.parentNode == null) return null;
+			return getRect(element);
+		}
+		return previousValue != null ? previousValue : null;
+	}, [
+		element,
+		forceRecompute,
+		getRect
+	]);
+}
+function createUseRectFn(getRect) {
+	return (element, forceRecompute) => useRect(element, getRect, forceRecompute);
+}
+function createUseRectsFn(getRect) {
+	const defaultValue = [];
+	return function useRects(elements, forceRecompute) {
+		const previousElements = (0, import_react.useRef)(elements);
+		return useLazyMemo((previousValue) => {
+			if (!elements.length) return defaultValue;
+			if (forceRecompute || !previousValue && elements.length || elements !== previousElements.current) return elements.map((element) => getRect(element));
+			return previousValue != null ? previousValue : defaultValue;
+		}, [elements, forceRecompute]);
+	};
+}
+function getMeasurableNode(node) {
+	if (!node) return null;
+	if (node.children.length > 1) return node;
+	const firstChild = node.children[0];
+	return isHTMLElement(firstChild) ? firstChild : node;
+}
+function getDragOverlayRect(element) {
+	const { width, height, offsetLeft, offsetTop } = getLayoutRect(element);
+	return {
+		top: offsetTop,
+		bottom: offsetTop + height,
+		left: offsetLeft,
+		right: offsetLeft + width,
+		width,
+		height,
+		offsetTop,
+		offsetLeft
+	};
+}
+var useDragOverlayRect = /* @__PURE__ */ createUseRectFn(getDragOverlayRect);
+function useDragOverlayMeasuring({ disabled, forceRecompute }) {
+	const [nodeRef, setRef] = useNodeRef();
+	const rect = useDragOverlayRect(disabled ? null : getMeasurableNode(nodeRef.current), forceRecompute);
+	return (0, import_react.useMemo)(() => ({
+		nodeRef,
+		rect,
+		setRef
+	}), [
+		rect,
+		nodeRef,
+		setRef
+	]);
+}
+function useSensor(sensor, options) {
+	return (0, import_react.useMemo)(() => ({
+		sensor,
+		options: options != null ? options : {}
+	}), [sensor, options]);
+}
+function useSensors(...sensors) {
+	return (0, import_react.useMemo)(() => [...sensors].filter((sensor) => sensor != null), [...sensors]);
+}
+var Listeners = class {
+	constructor(target) {
+		this.target = target;
+		this.listeners = [];
+		this.removeAll = () => {
+			this.listeners.forEach((listener) => {
+				var _this$target;
+				return (_this$target = this.target) == null ? void 0 : _this$target.removeEventListener(...listener);
+			});
+		};
+	}
+	add(eventName, handler, options) {
+		var _this$target2;
+		(_this$target2 = this.target) == null || _this$target2.addEventListener(eventName, handler, options);
+		this.listeners.push([
+			eventName,
+			handler,
+			options
+		]);
+	}
+};
+function getEventListenerTarget(target) {
+	const { EventTarget } = getWindow(target);
+	return target instanceof EventTarget ? target : getOwnerDocument(target);
+}
+function hasExceededDistance(delta, measurement) {
+	const dx = Math.abs(delta.x);
+	const dy = Math.abs(delta.y);
+	if (typeof measurement === "number") return Math.sqrt(dx ** 2 + dy ** 2) > measurement;
+	if ("x" in measurement && "y" in measurement) return dx > measurement.x && dy > measurement.y;
+	if ("x" in measurement) return dx > measurement.x;
+	if ("y" in measurement) return dy > measurement.y;
+	return false;
+}
+var EventName;
+(function(EventName) {
+	EventName["Click"] = "click";
+	EventName["DragStart"] = "dragstart";
+	EventName["Keydown"] = "keydown";
+	EventName["ContextMenu"] = "contextmenu";
+	EventName["Resize"] = "resize";
+	EventName["SelectionChange"] = "selectionchange";
+	EventName["VisibilityChange"] = "visibilitychange";
+})(EventName || (EventName = {}));
+function preventDefault(event) {
+	event.preventDefault();
+}
+function stopPropagation(event) {
+	event.stopPropagation();
+}
+var KeyboardCode;
+(function(KeyboardCode) {
+	KeyboardCode["Space"] = "Space";
+	KeyboardCode["Down"] = "ArrowDown";
+	KeyboardCode["Right"] = "ArrowRight";
+	KeyboardCode["Left"] = "ArrowLeft";
+	KeyboardCode["Up"] = "ArrowUp";
+	KeyboardCode["Esc"] = "Escape";
+	KeyboardCode["Enter"] = "Enter";
+})(KeyboardCode || (KeyboardCode = {}));
+var defaultKeyboardCodes = {
+	start: [KeyboardCode.Space, KeyboardCode.Enter],
+	cancel: [KeyboardCode.Esc],
+	end: [KeyboardCode.Space, KeyboardCode.Enter]
+};
+var defaultKeyboardCoordinateGetter = (event, { currentCoordinates }) => {
+	switch (event.code) {
+		case KeyboardCode.Right: return {
+			...currentCoordinates,
+			x: currentCoordinates.x + 25
+		};
+		case KeyboardCode.Left: return {
+			...currentCoordinates,
+			x: currentCoordinates.x - 25
+		};
+		case KeyboardCode.Down: return {
+			...currentCoordinates,
+			y: currentCoordinates.y + 25
+		};
+		case KeyboardCode.Up: return {
+			...currentCoordinates,
+			y: currentCoordinates.y - 25
+		};
+	}
+};
+var KeyboardSensor = class {
+	constructor(props) {
+		this.props = props;
+		this.autoScrollEnabled = false;
+		this.coordinates = defaultCoordinates;
+		const { event: { target } } = props;
+		this.props = props;
+		this.listeners = new Listeners(getOwnerDocument(target));
+		this.windowListeners = new Listeners(getWindow(target));
+		this.handleKeyDown = this.handleKeyDown.bind(this);
+		this.handleCancel = this.handleCancel.bind(this);
+		this.attach();
+	}
+	attach() {
+		this.handleStart();
+		this.windowListeners.add(EventName.Resize, this.handleCancel);
+		this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
+		setTimeout(() => this.listeners.add(EventName.Keydown, this.handleKeyDown));
+	}
+	handleStart() {
+		const { activeNode, onStart } = this.props;
+		if (!activeNode.node.current) throw new Error("Active draggable node is undefined");
+		const activeNodeRect = getBoundingClientRect(activeNode.node.current);
+		const coordinates = {
+			x: activeNodeRect.left,
+			y: activeNodeRect.top
+		};
+		this.coordinates = coordinates;
+		onStart(coordinates);
+	}
+	handleKeyDown(event) {
+		if (isKeyboardEvent(event)) {
+			const { coordinates } = this;
+			const { active, context, options } = this.props;
+			const { keyboardCodes = defaultKeyboardCodes, coordinateGetter = defaultKeyboardCoordinateGetter, scrollBehavior = "smooth" } = options;
+			const { code } = event;
+			if (keyboardCodes.end.includes(code)) {
+				this.handleEnd(event);
+				return;
+			}
+			if (keyboardCodes.cancel.includes(code)) {
+				this.handleCancel(event);
+				return;
+			}
+			const newCoordinates = coordinateGetter(event, {
+				active,
+				context: context.current,
+				currentCoordinates: coordinates
+			});
+			if (newCoordinates) {
+				const scrollDelta = {
+					x: 0,
+					y: 0
+				};
+				const { scrollableAncestors } = context.current;
+				for (const scrollContainer of scrollableAncestors) {
+					const direction = event.code;
+					const coordinatesDelta = subtract(newCoordinates, coordinates);
+					const { isTop, isRight, isLeft, isBottom, maxScroll, minScroll } = getScrollPosition(scrollContainer);
+					const scrollElementRect = getScrollElementRect(scrollContainer);
+					const clampedCoordinates = {
+						x: Math.min(direction === KeyboardCode.Right ? scrollElementRect.right - scrollElementRect.width / 2 : scrollElementRect.right, Math.max(direction === KeyboardCode.Right ? scrollElementRect.left : scrollElementRect.left + scrollElementRect.width / 2, newCoordinates.x)),
+						y: Math.min(direction === KeyboardCode.Down ? scrollElementRect.bottom - scrollElementRect.height / 2 : scrollElementRect.bottom, Math.max(direction === KeyboardCode.Down ? scrollElementRect.top : scrollElementRect.top + scrollElementRect.height / 2, newCoordinates.y))
+					};
+					const canScrollX = direction === KeyboardCode.Right && !isRight || direction === KeyboardCode.Left && !isLeft;
+					const canScrollY = direction === KeyboardCode.Down && !isBottom || direction === KeyboardCode.Up && !isTop;
+					if (canScrollX && clampedCoordinates.x !== newCoordinates.x) {
+						if (direction === KeyboardCode.Right && scrollContainer.scrollLeft + coordinatesDelta.x <= maxScroll.x || direction === KeyboardCode.Left && scrollContainer.scrollLeft + coordinatesDelta.x >= minScroll.x) {
+							scrollContainer.scrollBy({
+								left: coordinatesDelta.x,
+								behavior: scrollBehavior
+							});
+							return;
+						}
+						scrollDelta.x = direction === KeyboardCode.Right ? scrollContainer.scrollLeft - maxScroll.x : scrollContainer.scrollLeft - minScroll.x;
+						scrollContainer.scrollBy({
+							left: -scrollDelta.x,
+							behavior: scrollBehavior
+						});
+						break;
+					} else if (canScrollY && clampedCoordinates.y !== newCoordinates.y) {
+						if (direction === KeyboardCode.Down && scrollContainer.scrollTop + coordinatesDelta.y <= maxScroll.y || direction === KeyboardCode.Up && scrollContainer.scrollTop + coordinatesDelta.y >= minScroll.y) {
+							scrollContainer.scrollBy({
+								top: coordinatesDelta.y,
+								behavior: scrollBehavior
+							});
+							return;
+						}
+						scrollDelta.y = direction === KeyboardCode.Down ? scrollContainer.scrollTop - maxScroll.y : scrollContainer.scrollTop - minScroll.y;
+						scrollContainer.scrollBy({
+							top: -scrollDelta.y,
+							behavior: scrollBehavior
+						});
+						break;
+					}
+				}
+				this.handleMove(event, add(newCoordinates, scrollDelta));
+			}
+		}
+	}
+	handleMove(event, coordinates) {
+		const { onMove } = this.props;
+		event.preventDefault();
+		onMove(coordinates);
+		this.coordinates = coordinates;
+	}
+	handleEnd(event) {
+		const { onEnd } = this.props;
+		event.preventDefault();
+		this.detach();
+		onEnd();
+	}
+	handleCancel(event) {
+		const { onCancel } = this.props;
+		event.preventDefault();
+		this.detach();
+		onCancel();
+	}
+	detach() {
+		this.listeners.removeAll();
+		this.windowListeners.removeAll();
+	}
+};
+KeyboardSensor.activators = [{
+	eventName: "onKeyDown",
+	handler: (event, { keyboardCodes = defaultKeyboardCodes, onActivation }) => {
+		const { code } = event.nativeEvent;
+		if (keyboardCodes.start.includes(code)) {
+			event.preventDefault();
+			onActivation?.({ event: event.nativeEvent });
+			return true;
+		}
+		return false;
+	}
+}];
+function isDistanceConstraint(constraint) {
+	return Boolean(constraint && "distance" in constraint);
+}
+function isDelayConstraint(constraint) {
+	return Boolean(constraint && "delay" in constraint);
+}
+var AbstractPointerSensor = class {
+	constructor(props, events, listenerTarget = getEventListenerTarget(props.event.target)) {
+		this.props = props;
+		this.events = events;
+		this.autoScrollEnabled = true;
+		this.activated = false;
+		this.timeoutId = null;
+		const { event } = props;
+		const { target } = event;
+		this.props = props;
+		this.events = events;
+		this.document = getOwnerDocument(target);
+		this.documentListeners = new Listeners(this.document);
+		this.listeners = new Listeners(listenerTarget);
+		this.windowListeners = new Listeners(getWindow(target));
+		this.initialCoordinates = getEventCoordinates(event);
+		this.handleStart = this.handleStart.bind(this);
+		this.handleMove = this.handleMove.bind(this);
+		this.handleEnd = this.handleEnd.bind(this);
+		this.handleCancel = this.handleCancel.bind(this);
+		this.handleKeydown = this.handleKeydown.bind(this);
+		this.removeTextSelection = this.removeTextSelection.bind(this);
+		this.attach();
+	}
+	attach() {
+		const { events, props: { options: { activationConstraint } } } = this;
+		this.listeners.add(events.move.name, this.handleMove, { passive: false });
+		this.listeners.add(events.end.name, this.handleEnd);
+		this.windowListeners.add(EventName.Resize, this.handleCancel);
+		this.windowListeners.add(EventName.DragStart, preventDefault);
+		this.windowListeners.add(EventName.VisibilityChange, this.handleCancel);
+		this.windowListeners.add(EventName.ContextMenu, preventDefault);
+		this.documentListeners.add(EventName.Keydown, this.handleKeydown);
+		if (activationConstraint) {
+			if (isDistanceConstraint(activationConstraint)) return;
+			if (isDelayConstraint(activationConstraint)) {
+				this.timeoutId = setTimeout(this.handleStart, activationConstraint.delay);
+				return;
+			}
+		}
+		this.handleStart();
+	}
+	detach() {
+		this.listeners.removeAll();
+		this.windowListeners.removeAll();
+		setTimeout(this.documentListeners.removeAll, 50);
+		if (this.timeoutId !== null) {
+			clearTimeout(this.timeoutId);
+			this.timeoutId = null;
+		}
+	}
+	handleStart() {
+		const { initialCoordinates } = this;
+		const { onStart } = this.props;
+		if (initialCoordinates) {
+			this.activated = true;
+			this.documentListeners.add(EventName.Click, stopPropagation, { capture: true });
+			this.removeTextSelection();
+			this.documentListeners.add(EventName.SelectionChange, this.removeTextSelection);
+			onStart(initialCoordinates);
+		}
+	}
+	handleMove(event) {
+		const { activated, initialCoordinates, props } = this;
+		const { onMove, options: { activationConstraint } } = props;
+		if (!initialCoordinates) return;
+		const coordinates = getEventCoordinates(event);
+		const delta = subtract(initialCoordinates, coordinates);
+		if (!activated && activationConstraint) {
+			if (isDelayConstraint(activationConstraint)) {
+				if (hasExceededDistance(delta, activationConstraint.tolerance)) return this.handleCancel();
+				return;
+			}
+			if (isDistanceConstraint(activationConstraint)) {
+				if (activationConstraint.tolerance != null && hasExceededDistance(delta, activationConstraint.tolerance)) return this.handleCancel();
+				if (hasExceededDistance(delta, activationConstraint.distance)) return this.handleStart();
+				return;
+			}
+		}
+		if (event.cancelable) event.preventDefault();
+		onMove(coordinates);
+	}
+	handleEnd() {
+		const { onEnd } = this.props;
+		this.detach();
+		onEnd();
+	}
+	handleCancel() {
+		const { onCancel } = this.props;
+		this.detach();
+		onCancel();
+	}
+	handleKeydown(event) {
+		if (event.code === KeyboardCode.Esc) this.handleCancel();
+	}
+	removeTextSelection() {
+		var _this$document$getSel;
+		(_this$document$getSel = this.document.getSelection()) == null || _this$document$getSel.removeAllRanges();
+	}
+};
+var events = {
+	move: { name: "pointermove" },
+	end: { name: "pointerup" }
+};
+var PointerSensor = class extends AbstractPointerSensor {
+	constructor(props) {
+		const { event } = props;
+		const listenerTarget = getOwnerDocument(event.target);
+		super(props, events, listenerTarget);
+	}
+};
+PointerSensor.activators = [{
+	eventName: "onPointerDown",
+	handler: ({ nativeEvent: event }, { onActivation }) => {
+		if (!event.isPrimary || event.button !== 0) return false;
+		onActivation?.({ event });
+		return true;
+	}
+}];
+var events$1 = {
+	move: { name: "mousemove" },
+	end: { name: "mouseup" }
+};
+var MouseButton;
+(function(MouseButton) {
+	MouseButton[MouseButton["RightClick"] = 2] = "RightClick";
+})(MouseButton || (MouseButton = {}));
+var MouseSensor = class extends AbstractPointerSensor {
+	constructor(props) {
+		super(props, events$1, getOwnerDocument(props.event.target));
+	}
+};
+MouseSensor.activators = [{
+	eventName: "onMouseDown",
+	handler: ({ nativeEvent: event }, { onActivation }) => {
+		if (event.button === MouseButton.RightClick) return false;
+		onActivation?.({ event });
+		return true;
+	}
+}];
+var events$2 = {
+	move: { name: "touchmove" },
+	end: { name: "touchend" }
+};
+var TouchSensor = class extends AbstractPointerSensor {
+	constructor(props) {
+		super(props, events$2);
+	}
+	static setup() {
+		window.addEventListener(events$2.move.name, noop, {
+			capture: false,
+			passive: false
+		});
+		return function teardown() {
+			window.removeEventListener(events$2.move.name, noop);
+		};
+		function noop() {}
+	}
+};
+TouchSensor.activators = [{
+	eventName: "onTouchStart",
+	handler: ({ nativeEvent: event }, { onActivation }) => {
+		const { touches } = event;
+		if (touches.length > 1) return false;
+		onActivation?.({ event });
+		return true;
+	}
+}];
+function applyModifiers(modifiers, { transform, ...args }) {
+	return (modifiers == null ? void 0 : modifiers.length) ? modifiers.reduce((accumulator, modifier) => {
+		return modifier({
+			transform: accumulator,
+			...args
+		});
+	}, transform) : transform;
+}
+var defaultSensors = [{
+	sensor: PointerSensor,
+	options: {}
+}, {
+	sensor: KeyboardSensor,
+	options: {}
+}];
+var defaultData = { current: {} };
+var ActiveDraggableContext = /* @__PURE__ */ (0, import_react.createContext)({
+	...defaultCoordinates,
+	scaleX: 1,
+	scaleY: 1
+});
+var DndContext = /* @__PURE__ */ (0, import_react.memo)(function DndContext({ id, autoScroll = true, announcements, children, sensors = defaultSensors, collisionDetection = rectIntersection, measuring, modifiers, screenReaderInstructions: screenReaderInstructions$1 = screenReaderInstructions, ...props }) {
+	var _measuring$draggable$, _measuring$draggable, _sensorContext$curren, _dragOverlay$rect, _over$rect;
+	const [state, dispatch] = (0, import_react.useReducer)(reducer, void 0, getInitialState);
+	const [monitorState, setMonitorState] = (0, import_react.useState)(() => ({
+		type: null,
+		event: null
+	}));
+	const [isDragging, setIsDragging] = (0, import_react.useState)(false);
+	const { draggable: { active: activeId, nodes: draggableNodes, translate }, droppable: { containers: droppableContainers } } = state;
+	const node = activeId ? draggableNodes[activeId] : null;
+	const activeRects = (0, import_react.useRef)({
+		initial: null,
+		translated: null
+	});
+	const active = (0, import_react.useMemo)(() => {
+		var _node$data;
+		return activeId != null ? {
+			id: activeId,
+			data: (_node$data = node == null ? void 0 : node.data) != null ? _node$data : defaultData,
+			rect: activeRects
+		} : null;
+	}, [activeId, node]);
+	const activeRef = (0, import_react.useRef)(null);
+	const [activeSensor, setActiveSensor] = (0, import_react.useState)(null);
+	const [activatorEvent, setActivatorEvent] = (0, import_react.useState)(null);
+	const latestProps = (0, import_react.useRef)(props);
+	const draggableDescribedById = useUniqueId(`DndDescribedBy`, id);
+	const enabledDroppableContainers = (0, import_react.useMemo)(() => {
+		return droppableContainers.getEnabled();
+	}, [droppableContainers]);
+	const { layoutRectMap: droppableRects, recomputeLayouts, willRecomputeLayouts } = useDroppableMeasuring(enabledDroppableContainers, {
+		dragging: isDragging,
+		dependencies: [translate.x, translate.y],
+		config: measuring == null ? void 0 : measuring.droppable
+	});
+	const activeNode = useCachedNode(draggableNodes, activeId);
+	const activationCoordinates = activatorEvent ? getEventCoordinates(activatorEvent) : null;
+	const activeNodeRect = useRect(activeNode, (_measuring$draggable$ = measuring == null ? void 0 : (_measuring$draggable = measuring.draggable) == null ? void 0 : _measuring$draggable.measure) != null ? _measuring$draggable$ : getViewRect);
+	const activeNodeClientRect = useClientRect(activeNode);
+	const initialActiveNodeRectRef = (0, import_react.useRef)(null);
+	const initialActiveNodeRect = initialActiveNodeRectRef.current;
+	const sensorContext = (0, import_react.useRef)({
+		active: null,
+		activeNode,
+		collisionRect: null,
+		droppableRects,
+		draggableNodes,
+		draggingNodeRect: null,
+		droppableContainers,
+		over: null,
+		scrollableAncestors: [],
+		scrollAdjustedTranslate: null,
+		translatedRect: null
+	});
+	const overNode = droppableContainers.getNodeFor((_sensorContext$curren = sensorContext.current.over) == null ? void 0 : _sensorContext$curren.id);
+	const windowRect = useClientRect(activeNode ? activeNode.ownerDocument.defaultView : null);
+	const containerNodeRect = useClientRect(activeNode ? activeNode.parentElement : null);
+	const scrollableAncestors = useScrollableAncestors(activeId ? overNode != null ? overNode : activeNode : null);
+	const scrollableAncestorRects = useClientRects(scrollableAncestors);
+	const dragOverlay = useDragOverlayMeasuring({
+		disabled: activeId == null,
+		forceRecompute: willRecomputeLayouts
+	});
+	const draggingNodeRect = (_dragOverlay$rect = dragOverlay.rect) != null ? _dragOverlay$rect : activeNodeRect;
+	const nodeRectDelta = draggingNodeRect === activeNodeRect ? getRectDelta(activeNodeRect, initialActiveNodeRect) : defaultCoordinates;
+	const modifiedTranslate = applyModifiers(modifiers, {
+		transform: {
+			x: translate.x - nodeRectDelta.x,
+			y: translate.y - nodeRectDelta.y,
+			scaleX: 1,
+			scaleY: 1
+		},
+		activatorEvent,
+		active,
+		activeNodeRect: activeNodeClientRect,
+		containerNodeRect,
+		draggingNodeRect,
+		over: sensorContext.current.over,
+		overlayNodeRect: dragOverlay.rect,
+		scrollableAncestors,
+		scrollableAncestorRects,
+		windowRect
+	});
+	const pointerCoordinates = activationCoordinates ? add(activationCoordinates, translate) : null;
+	const scrollAdjustment = useScrollOffsets(scrollableAncestors);
+	const scrollAdjustedTranslate = add(modifiedTranslate, scrollAdjustment);
+	const translatedRect = draggingNodeRect ? getAdjustedRect(draggingNodeRect, modifiedTranslate) : null;
+	const collisionRect = translatedRect ? getAdjustedRect(translatedRect, scrollAdjustment) : null;
+	const overId = active && collisionRect ? collisionDetection({
+		active,
+		collisionRect,
+		droppableContainers: enabledDroppableContainers
+	}) : null;
+	const [over, setOver] = (0, import_react.useState)(null);
+	const transform = adjustScale(modifiedTranslate, (_over$rect = over == null ? void 0 : over.rect) != null ? _over$rect : null, activeNodeRect);
+	const instantiateSensor = (0, import_react.useCallback)((event, { sensor: Sensor, options }) => {
+		if (!activeRef.current) return;
+		const activeNode = draggableNodes[activeRef.current];
+		if (!activeNode) return;
+		const sensorInstance = new Sensor({
+			active: activeRef.current,
+			activeNode,
+			event: event.nativeEvent,
+			options,
+			context: sensorContext,
+			onStart(initialCoordinates) {
+				const id = activeRef.current;
+				if (!id) return;
+				const node = draggableNodes[id];
+				if (!node) return;
+				const { onDragStart } = latestProps.current;
+				const event = { active: {
+					id,
+					data: node.data,
+					rect: activeRects
+				} };
+				(0, import_react_dom.unstable_batchedUpdates)(() => {
+					dispatch({
+						type: Action.DragStart,
+						initialCoordinates,
+						active: id
+					});
+					setMonitorState({
+						type: Action.DragStart,
+						event
+					});
+				});
+				onDragStart?.(event);
+			},
+			onMove(coordinates) {
+				dispatch({
+					type: Action.DragMove,
+					coordinates
+				});
+			},
+			onEnd: createHandler(Action.DragEnd),
+			onCancel: createHandler(Action.DragCancel)
+		});
+		(0, import_react_dom.unstable_batchedUpdates)(() => {
+			setActiveSensor(sensorInstance);
+			setActivatorEvent(event.nativeEvent);
+		});
+		function createHandler(type) {
+			return async function handler() {
+				const { active, over, scrollAdjustedTranslate } = sensorContext.current;
+				let event = null;
+				if (active && scrollAdjustedTranslate) {
+					const { cancelDrop } = latestProps.current;
+					event = {
+						active,
+						delta: scrollAdjustedTranslate,
+						over
+					};
+					if (type === Action.DragEnd && typeof cancelDrop === "function") {
+						if (await Promise.resolve(cancelDrop(event))) type = Action.DragCancel;
+					}
+				}
+				activeRef.current = null;
+				(0, import_react_dom.unstable_batchedUpdates)(() => {
+					dispatch({ type });
+					setOver(null);
+					setIsDragging(false);
+					setActiveSensor(null);
+					setActivatorEvent(null);
+					if (event) setMonitorState({
+						type,
+						event
+					});
+				});
+				if (event) {
+					const { onDragCancel, onDragEnd } = latestProps.current;
+					(type === Action.DragEnd ? onDragEnd : onDragCancel)?.(event);
+				}
+			};
+		}
+	}, [dispatch, draggableNodes]);
+	const activators = useCombineActivators(sensors, (0, import_react.useCallback)((handler, sensor) => {
+		return (event, active) => {
+			const nativeEvent = event.nativeEvent;
+			if (activeRef.current !== null || nativeEvent.dndKit || nativeEvent.defaultPrevented) return;
+			if (handler(event, sensor.options) === true) {
+				nativeEvent.dndKit = { capturedBy: sensor.sensor };
+				activeRef.current = active;
+				instantiateSensor(event, sensor);
+			}
+		};
+	}, [instantiateSensor]));
+	useSensorSetup(sensors);
+	useIsomorphicLayoutEffect(() => {
+		latestProps.current = props;
+	}, Object.values(props));
+	(0, import_react.useEffect)(() => {
+		if (activeId != null) setIsDragging(true);
+	}, [activeId]);
+	(0, import_react.useEffect)(() => {
+		if (!active) initialActiveNodeRectRef.current = null;
+		if (active && activeNodeRect && !initialActiveNodeRectRef.current) initialActiveNodeRectRef.current = activeNodeRect;
+	}, [activeNodeRect, active]);
+	(0, import_react.useEffect)(() => {
+		const { onDragMove } = latestProps.current;
+		const { active, over } = sensorContext.current;
+		if (!active) return;
+		const event = {
+			active,
+			delta: {
+				x: scrollAdjustedTranslate.x,
+				y: scrollAdjustedTranslate.y
+			},
+			over
+		};
+		setMonitorState({
+			type: Action.DragMove,
+			event
+		});
+		onDragMove?.(event);
+	}, [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]);
+	(0, import_react.useEffect)(() => {
+		const { active, droppableContainers, scrollAdjustedTranslate } = sensorContext.current;
+		if (!active || !activeRef.current || !scrollAdjustedTranslate) return;
+		const { onDragOver } = latestProps.current;
+		const overContainer = droppableContainers.get(overId);
+		const over = overContainer && overContainer.rect.current ? {
+			id: overContainer.id,
+			rect: overContainer.rect.current,
+			data: overContainer.data,
+			disabled: overContainer.disabled
+		} : null;
+		const event = {
+			active,
+			delta: {
+				x: scrollAdjustedTranslate.x,
+				y: scrollAdjustedTranslate.y
+			},
+			over
+		};
+		(0, import_react_dom.unstable_batchedUpdates)(() => {
+			setOver(over);
+			setMonitorState({
+				type: Action.DragOver,
+				event
+			});
+			onDragOver?.(event);
+		});
+	}, [overId]);
+	useIsomorphicLayoutEffect(() => {
+		sensorContext.current = {
+			active,
+			activeNode,
+			collisionRect,
+			droppableRects,
+			draggableNodes,
+			draggingNodeRect,
+			droppableContainers,
+			over,
+			scrollableAncestors,
+			scrollAdjustedTranslate,
+			translatedRect
+		};
+		activeRects.current = {
+			initial: draggingNodeRect,
+			translated: translatedRect
+		};
+	}, [
+		active,
+		activeNode,
+		collisionRect,
+		draggableNodes,
+		draggingNodeRect,
+		droppableRects,
+		droppableContainers,
+		over,
+		scrollableAncestors,
+		scrollAdjustedTranslate,
+		translatedRect
+	]);
+	useAutoScroller({
+		...getAutoScrollerOptions(),
+		draggingRect: translatedRect,
+		pointerCoordinates,
+		scrollableAncestors,
+		scrollableAncestorRects
+	});
+	const contextValue = (0, import_react.useMemo)(() => {
+		return {
+			active,
+			activeNode,
+			activeNodeRect,
+			activeNodeClientRect,
+			activatorEvent,
+			activators,
+			ariaDescribedById: { draggable: draggableDescribedById },
+			containerNodeRect,
+			dispatch,
+			dragOverlay,
+			draggableNodes,
+			droppableContainers,
+			droppableRects,
+			over,
+			recomputeLayouts,
+			scrollableAncestors,
+			scrollableAncestorRects,
+			willRecomputeLayouts,
+			windowRect
+		};
+	}, [
+		active,
+		activeNode,
+		activeNodeClientRect,
+		activeNodeRect,
+		activatorEvent,
+		activators,
+		containerNodeRect,
+		dragOverlay,
+		dispatch,
+		draggableNodes,
+		draggableDescribedById,
+		droppableContainers,
+		droppableRects,
+		over,
+		recomputeLayouts,
+		scrollableAncestors,
+		scrollableAncestorRects,
+		willRecomputeLayouts,
+		windowRect
+	]);
+	return import_react.createElement(DndMonitorContext.Provider, { value: monitorState }, import_react.createElement(Context$1.Provider, { value: contextValue }, import_react.createElement(ActiveDraggableContext.Provider, { value: transform }, children)), import_react.createElement(Accessibility, {
+		announcements,
+		hiddenTextDescribedById: draggableDescribedById,
+		screenReaderInstructions: screenReaderInstructions$1
+	}));
+	function getAutoScrollerOptions() {
+		const activeSensorDisablesAutoscroll = (activeSensor == null ? void 0 : activeSensor.autoScrollEnabled) === false;
+		const autoScrollGloballyDisabled = typeof autoScroll === "object" ? autoScroll.enabled === false : autoScroll === false;
+		const enabled = !activeSensorDisablesAutoscroll && !autoScrollGloballyDisabled;
+		if (typeof autoScroll === "object") return {
+			...autoScroll,
+			enabled
+		};
+		return { enabled };
+	}
+});
+var NullContext = /* @__PURE__ */ (0, import_react.createContext)(null);
+var defaultRole = "button";
+var ID_PREFIX$1 = "Droppable";
+function useDraggable({ id, data, disabled = false, attributes }) {
+	const key = useUniqueId(ID_PREFIX$1);
+	const { active, activeNodeRect, activatorEvent, ariaDescribedById, draggableNodes, droppableRects, activators, over } = (0, import_react.useContext)(Context$1);
+	const { role = defaultRole, roleDescription = "draggable", tabIndex = 0 } = attributes != null ? attributes : {};
+	const isDragging = (active == null ? void 0 : active.id) === id;
+	const transform = (0, import_react.useContext)(isDragging ? ActiveDraggableContext : NullContext);
+	const [node, setNodeRef] = useNodeRef();
+	const listeners = useSyntheticListeners(activators, id);
+	const dataRef = useData(data);
+	(0, import_react.useEffect)(() => {
+		draggableNodes[id] = {
+			id,
+			key,
+			node,
+			data: dataRef
+		};
+		return () => {
+			const node = draggableNodes[id];
+			if (node && node.key === key) delete draggableNodes[id];
+		};
+	}, [draggableNodes, id]);
+	return {
+		active,
+		activeNodeRect,
+		activatorEvent,
+		attributes: (0, import_react.useMemo)(() => ({
+			role,
+			tabIndex,
+			"aria-pressed": isDragging && role === defaultRole ? true : void 0,
+			"aria-roledescription": roleDescription,
+			"aria-describedby": ariaDescribedById.draggable
+		}), [
+			role,
+			tabIndex,
+			isDragging,
+			roleDescription,
+			ariaDescribedById.draggable
+		]),
+		droppableRects,
+		isDragging,
+		listeners: disabled ? void 0 : listeners,
+		node,
+		over,
+		setNodeRef,
+		transform
+	};
+}
+function useDndContext() {
+	return (0, import_react.useContext)(Context$1);
+}
+var ID_PREFIX$1$1 = "Droppable";
+function useDroppable({ data, disabled = false, id }) {
+	const key = useUniqueId(ID_PREFIX$1$1);
+	const { active, dispatch, over } = (0, import_react.useContext)(Context$1);
+	const rect = (0, import_react.useRef)(null);
+	const [nodeRef, setNodeRef] = useNodeRef();
+	const dataRef = useData(data);
+	useIsomorphicLayoutEffect(() => {
+		dispatch({
+			type: Action.RegisterDroppable,
+			element: {
+				id,
+				key,
+				disabled,
+				node: nodeRef,
+				rect,
+				data: dataRef
+			}
+		});
+		return () => dispatch({
+			type: Action.UnregisterDroppable,
+			key,
+			id
+		});
+	}, [id]);
+	(0, import_react.useEffect)(() => {
+		dispatch({
+			type: Action.SetDroppableDisabled,
+			id,
+			key,
+			disabled
+		});
+	}, [disabled]);
+	return {
+		active,
+		rect,
+		isOver: (over == null ? void 0 : over.id) === id,
+		node: nodeRef,
+		over,
+		setNodeRef
+	};
+}
+//#endregion
+//#region ../../node_modules/.pnpm/@dnd-kit+sortable@5.1.0_@dnd-kit+core@4.0.3_react-dom@19.2.4_react@19.2.4__react@19.2.4__react@19.2.4/node_modules/@dnd-kit/sortable/dist/sortable.esm.js
+/**
+* Move an array item to a different position. Returns a new array with the item moved to the new position.
+*/
+function arrayMove(array, from, to) {
+	const newArray = array.slice();
+	newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
+	return newArray;
+}
+function getSortedRects(items, layoutRects) {
+	return items.reduce((accumulator, id, index) => {
+		const layoutRect = layoutRects.get(id);
+		if (layoutRect) accumulator[index] = layoutRect;
+		return accumulator;
+	}, Array(items.length));
+}
+function isValidIndex(index) {
+	return index !== null && index >= 0;
+}
+var rectSortingStrategy = ({ layoutRects, activeIndex, overIndex, index }) => {
+	const newRects = arrayMove(layoutRects, overIndex, activeIndex);
+	const oldRect = layoutRects[index];
+	const newRect = newRects[index];
+	if (!newRect || !oldRect) return null;
+	return {
+		x: newRect.offsetLeft - oldRect.offsetLeft,
+		y: newRect.offsetTop - oldRect.offsetTop,
+		scaleX: newRect.width / oldRect.width,
+		scaleY: newRect.height / oldRect.height
+	};
+};
+var ID_PREFIX = "Sortable";
+var Context = /* @__PURE__ */ import_react.createContext({
+	activeIndex: -1,
+	containerId: ID_PREFIX,
+	disableTransforms: false,
+	items: [],
+	overIndex: -1,
+	useDragOverlay: false,
+	sortedRects: [],
+	strategy: rectSortingStrategy,
+	wasDragging: { current: false }
+});
+function SortableContext({ children, id, items: userDefinedItems, strategy = rectSortingStrategy }) {
+	const { active, dragOverlay, droppableRects, over, recomputeLayouts, willRecomputeLayouts } = useDndContext();
+	const containerId = useUniqueId(ID_PREFIX, id);
+	const useDragOverlay = Boolean(dragOverlay.rect !== null);
+	const items = (0, import_react.useMemo)(() => userDefinedItems.map((item) => typeof item === "string" ? item : item.id), [userDefinedItems]);
+	const isDragging = active != null;
+	const wasDragging = (0, import_react.useRef)(false);
+	const activeIndex = active ? items.indexOf(active.id) : -1;
+	const isSorting = activeIndex !== -1;
+	const overIndex = over ? items.indexOf(over.id) : -1;
+	const previousItemsRef = (0, import_react.useRef)(items);
+	const sortedRects = getSortedRects(items, droppableRects);
+	const itemsHaveChanged = !isEqual(items, previousItemsRef.current);
+	const disableTransforms = overIndex !== -1 && activeIndex === -1 || itemsHaveChanged;
+	useIsomorphicLayoutEffect(() => {
+		if (itemsHaveChanged && isSorting && !willRecomputeLayouts) recomputeLayouts();
+	}, [
+		itemsHaveChanged,
+		isSorting,
+		recomputeLayouts,
+		willRecomputeLayouts
+	]);
+	(0, import_react.useEffect)(() => {
+		previousItemsRef.current = items;
+	}, [items]);
+	(0, import_react.useEffect)(() => {
+		const timeoutId = setTimeout(() => {
+			wasDragging.current = isDragging;
+		}, 100);
+		return () => clearTimeout(timeoutId);
+	}, [isDragging]);
+	const contextValue = (0, import_react.useMemo)(() => ({
+		activeIndex,
+		containerId,
+		disableTransforms,
+		items,
+		overIndex,
+		useDragOverlay,
+		sortedRects,
+		strategy,
+		wasDragging
+	}), [
+		activeIndex,
+		containerId,
+		disableTransforms,
+		items,
+		overIndex,
+		sortedRects,
+		useDragOverlay,
+		strategy,
+		wasDragging
+	]);
+	return import_react.createElement(Context.Provider, { value: contextValue }, children);
+}
+function isEqual(arr1, arr2) {
+	return arr1.join() === arr2.join();
+}
+var defaultNewIndexGetter = ({ id, items, activeIndex, overIndex }) => arrayMove(items, activeIndex, overIndex).indexOf(id);
+var defaultAnimateLayoutChanges = ({ containerId, isSorting, wasDragging, index, items, newIndex, previousItems, previousContainerId, transition }) => {
+	if (!transition || !wasDragging) return false;
+	if (previousItems !== items && index === newIndex) return false;
+	if (isSorting) return true;
+	return newIndex !== index && containerId === previousContainerId;
+};
+var defaultTransition = {
+	duration: 200,
+	easing: "ease"
+};
+var transitionProperty = "transform";
+var disabledTransition = /* @__PURE__ */ CSS.Transition.toString({
+	property: transitionProperty,
+	duration: 0,
+	easing: "linear"
+});
+var defaultAttributes = { roleDescription: "sortable" };
+function useDerivedTransform({ disabled, index, node, rect }) {
+	const [derivedTransform, setDerivedtransform] = (0, import_react.useState)(null);
+	const previousIndex = (0, import_react.useRef)(index);
+	useIsomorphicLayoutEffect(() => {
+		if (!disabled && index !== previousIndex.current && node.current) {
+			const initial = rect.current;
+			if (initial) {
+				const current = getBoundingClientRect(node.current);
+				const delta = {
+					x: initial.offsetLeft - current.offsetLeft,
+					y: initial.offsetTop - current.offsetTop,
+					scaleX: initial.width / current.width,
+					scaleY: initial.height / current.height
+				};
+				if (delta.x || delta.y) setDerivedtransform(delta);
+			}
+		}
+		if (index !== previousIndex.current) previousIndex.current = index;
+	}, [
+		disabled,
+		index,
+		node,
+		rect
+	]);
+	(0, import_react.useEffect)(() => {
+		if (derivedTransform) requestAnimationFrame(() => {
+			setDerivedtransform(null);
+		});
+	}, [derivedTransform]);
+	return derivedTransform;
+}
+function useSortable({ animateLayoutChanges = defaultAnimateLayoutChanges, attributes: userDefinedAttributes, disabled, data: customData, getNewIndex = defaultNewIndexGetter, id, strategy: localStrategy, transition = defaultTransition }) {
+	const { items, containerId, activeIndex, disableTransforms, sortedRects, overIndex, useDragOverlay, strategy: globalStrategy, wasDragging } = (0, import_react.useContext)(Context);
+	const index = items.indexOf(id);
+	const data = (0, import_react.useMemo)(() => ({
+		sortable: {
+			containerId,
+			index,
+			items
+		},
+		...customData
+	}), [
+		containerId,
+		customData,
+		index,
+		items
+	]);
+	const { rect, node, setNodeRef: setDroppableNodeRef } = useDroppable({
+		id,
+		data
+	});
+	const { active, activeNodeRect, activatorEvent, attributes, setNodeRef: setDraggableNodeRef, listeners, isDragging, over, transform } = useDraggable({
+		id,
+		data,
+		attributes: {
+			...defaultAttributes,
+			...userDefinedAttributes
+		},
+		disabled
+	});
+	const setNodeRef = useCombinedRefs(setDroppableNodeRef, setDraggableNodeRef);
+	const isSorting = Boolean(active);
+	const displaceItem = isSorting && wasDragging.current && !disableTransforms && isValidIndex(activeIndex) && isValidIndex(overIndex);
+	const shouldDisplaceDragSource = !useDragOverlay && isDragging;
+	const dragSourceDisplacement = shouldDisplaceDragSource && displaceItem ? transform : null;
+	const finalTransform = displaceItem ? dragSourceDisplacement != null ? dragSourceDisplacement : (localStrategy != null ? localStrategy : globalStrategy)({
+		layoutRects: sortedRects,
+		activeNodeRect,
+		activeIndex,
+		overIndex,
+		index
+	}) : null;
+	const newIndex = isValidIndex(activeIndex) && isValidIndex(overIndex) ? getNewIndex({
+		id,
+		items,
+		activeIndex,
+		overIndex
+	}) : index;
+	const prevItems = (0, import_react.useRef)(items);
+	const itemsHaveChanged = items !== prevItems.current;
+	const prevNewIndex = (0, import_react.useRef)(newIndex);
+	const previousContainerId = (0, import_react.useRef)(containerId);
+	const shouldAnimateLayoutChanges = animateLayoutChanges({
+		active,
+		containerId,
+		isDragging,
+		isSorting,
+		id,
+		index,
+		items,
+		newIndex: prevNewIndex.current,
+		previousItems: prevItems.current,
+		previousContainerId: previousContainerId.current,
+		transition,
+		wasDragging: wasDragging.current
+	});
+	const derivedTransform = useDerivedTransform({
+		disabled: !shouldAnimateLayoutChanges,
+		index,
+		node,
+		rect
+	});
+	(0, import_react.useEffect)(() => {
+		if (isSorting && prevNewIndex.current !== newIndex) prevNewIndex.current = newIndex;
+		if (containerId !== previousContainerId.current) previousContainerId.current = containerId;
+		if (items !== prevItems.current) prevItems.current = items;
+	}, [
+		isSorting,
+		newIndex,
+		containerId,
+		items
+	]);
+	return {
+		active,
+		attributes,
+		activatorEvent,
+		rect,
+		index,
+		isSorting,
+		isDragging,
+		listeners,
+		node,
+		overIndex,
+		over,
+		setNodeRef,
+		setDroppableNodeRef,
+		setDraggableNodeRef,
+		transform: derivedTransform != null ? derivedTransform : finalTransform,
+		transition: getTransition()
+	};
+	function getTransition() {
+		if (derivedTransform || itemsHaveChanged && prevNewIndex.current === index) return disabledTransition;
+		if (shouldDisplaceDragSource || !transition) return;
+		if (isSorting || shouldAnimateLayoutChanges) return CSS.Transition.toString({
+			...transition,
+			property: transitionProperty
+		});
+	}
+}
+KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left;
+//#endregion
+//#region ~icons/lucide/grip-vertical.jsx
+var lucideGripVertical = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em",
+	...props,
+	children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: 2,
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 9,
+				cy: 12,
+				r: 1
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 9,
+				cy: 5,
+				r: 1
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 9,
+				cy: 19,
+				r: 1
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 15,
+				cy: 12,
+				r: 1
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 15,
+				cy: 5,
+				r: 1
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", {
+				cx: 15,
+				cy: 19,
+				r: 1
+			})
+		]
+	})
+});
+//#endregion
+//#region src/components/qgrid/UsageCard.tsx
+function barColor(pct) {
+	if (pct >= 95) return "bg-red-500";
+	if (pct >= 80) return "bg-amber-400";
+	return "bg-sienna-400";
+}
+function formatResets(iso) {
+	if (!iso) return "";
+	const diff = new Date(iso).getTime() - Date.now();
+	if (diff <= 0) return "resetting...";
+	const h = Math.floor(diff / 36e5);
+	const m = Math.floor(diff % 36e5 / 6e4);
+	return h > 0 ? `resets ${h}h ${m}m` : `resets ${m}m`;
+}
+function UsageRow({ label, utilization, resetsAt }) {
+	const pct = utilization ?? 0;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-xs text-sand-600 w-20 shrink-0",
+				children: label
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "flex-1 h-2 bg-sand-200 rounded-full overflow-hidden",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: `h-full rounded-full transition-all duration-300 ${barColor(pct)}`,
+					style: { width: `${Math.min(pct, 100)}%` }
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-xs tabular-nums text-sand-700 w-10 text-right",
+				children: [pct, "%"]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] text-sand-400 w-24 text-right",
+				children: formatResets(resetsAt)
+			})
+		]
+	});
+}
+function TokenUsage({ token }) {
+	const { data, isLoading } = QgridService.useUsage(token.name);
+	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "animate-pulse space-y-2 py-2",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-sand-200 rounded-full" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-3/4 bg-sand-200 rounded-full" })]
+	});
+	if (data?.error) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "py-1",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-[11px] text-amber-600",
+			children: "Session expired"
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-[10px] text-sand-400 mt-0.5",
+			children: "Please re-login via OAuth or update your token"
+		})]
+	});
+	if (!data?.five_hour) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		className: "text-[11px] text-sand-400 py-1",
+		children: "No usage data"
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-1.5 py-1",
+		children: [
+			data.five_hour && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+				label: "5h",
+				utilization: data.five_hour.utilization,
+				resetsAt: data.five_hour.resets_at
+			}),
+			data.seven_day && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+				label: "7d All",
+				utilization: data.seven_day.utilization,
+				resetsAt: data.seven_day.resets_at
+			}),
+			data.seven_day_sonnet && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+				label: "7d Sonnet",
+				utilization: data.seven_day_sonnet.utilization,
+				resetsAt: data.seven_day_sonnet.resets_at
+			}),
+			data.seven_day_opus && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+				label: "7d Opus",
+				utilization: data.seven_day_opus.utilization,
+				resetsAt: data.seven_day_opus.resets_at
+			})
+		]
+	});
+}
+function SortableTokenCard({ token }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id: String(token.id),
+		transition: {
+			duration: 200,
+			easing: "ease"
+		}
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		ref: setNodeRef,
+		style: {
+			transform: CSS.Translate.toString(transform),
+			transition,
+			opacity: isDragging ? .5 : 1,
+			zIndex: isDragging ? 10 : void 0
+		},
+		...attributes,
+		...listeners,
+		className: "rounded-lg bg-sand-50 px-4 py-3 select-none cursor-grab active:cursor-grabbing touch-none",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 mb-2",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGripVertical, { className: "size-3.5 text-sand-300 shrink-0" }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "text-sm font-medium text-sand-800 truncate",
+					children: token.name ?? "Unnamed"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: `text-[10px] px-1.5 py-0.5 rounded-full shrink-0 ${token.active ? "bg-sage-100 text-sage-600" : "bg-sand-200 text-sand-500"}`,
+					children: token.active ? "Active" : "Inactive"
+				})
+			]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenUsage, { token })]
+	});
+}
+var PAGE_SIZE = 8;
+function UsageCard() {
+	const [page, setPage] = (0, import_react.useState)(0);
+	const { data, isLoading } = TokenService.useTokens("A", { orderBy: "ord-asc" });
+	const queryClient = useQueryClient();
+	const reorderMutation = TokenService.useReorderMutation();
+	const [localTokens, setLocalTokens] = (0, import_react.useState)([]);
+	(0, import_react.useEffect)(() => {
+		if (data?.rows) setLocalTokens(data.rows);
+	}, [data?.rows]);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } }));
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		if (!over || active.id === over.id) return;
+		const activeId = Number(active.id);
+		const overId = Number(over.id);
+		const oldIndex = localTokens.findIndex((t) => t.id === activeId);
+		const newIndex = localTokens.findIndex((t) => t.id === overId);
+		if (oldIndex === -1 || newIndex === -1) return;
+		const reordered = arrayMove(localTokens, oldIndex, newIndex);
+		setLocalTokens(reordered);
+		const queryKey = TokenService.getTokensQueryOptions("A", { orderBy: "ord-asc" }).queryKey;
+		const prev = queryClient.getQueryData(queryKey);
+		queryClient.setQueryData(queryKey, (old) => old ? {
+			...old,
+			rows: reordered
+		} : old);
+		reorderMutation.mutate({ ids: reordered.map((t) => t.id) }, {
+			onError: () => {
+				queryClient.setQueryData(queryKey, prev);
+				if (data?.rows) setLocalTokens(data.rows);
+			},
+			onSettled: () => {
+				Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
+			}
+		});
+	};
+	if (isLoading) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "grid grid-cols-2 gap-3",
+		children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "rounded-lg bg-sand-50 px-4 py-3 animate-pulse",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-3 w-16 bg-sand-200 rounded mb-3" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-full bg-sand-200 rounded-full" })]
+		}, `skel-${i}`))
+	});
+	if (localTokens.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "rounded-lg bg-sand-50 px-5 py-4",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-sand-400 text-sm",
+			children: "No tokens registered"
+		})
+	});
+	const totalPages = Math.ceil(localTokens.length / PAGE_SIZE);
+	const safePage = Math.min(page, totalPages - 1);
+	const pageTokens = localTokens.slice(safePage * PAGE_SIZE, (safePage + 1) * PAGE_SIZE);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragEnd: handleDragEnd,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableContext, {
+			items: pageTokens.map((t) => String(t.id)),
+			strategy: rectSortingStrategy,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "grid grid-cols-2 gap-3",
+				children: pageTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableTokenCard, { token }, token.id))
+			})
+		})
+	}), totalPages > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center justify-center gap-2 mt-3",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "p-0.5 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+				disabled: safePage === 0,
+				onClick: () => setPage(safePage - 1),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronLeft, { className: "size-4" })
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-[10px] text-sand-400 tabular-nums",
+				children: [
+					safePage + 1,
+					" / ",
+					totalPages
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "p-0.5 rounded text-sand-400 hover:text-sand-600 disabled:opacity-30 transition-colors",
+				disabled: safePage === totalPages - 1,
+				onClick: () => setPage(safePage + 1),
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideChevronRight, { className: "size-4" })
+			})
+		]
+	})] });
+}
+//#endregion
+//#region src/routes/index.tsx?tsr-split=component
+function Dashboard() {
+	const { data: healthData, isLoading: healthLoading, isError: healthError } = QgridService.useHealth();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-5 max-w-300 mx-auto -translate-x-4",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", {
+				className: "text-xl font-medium text-sand-900 tracking-tight",
+				children: "Dashboard"
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HealthCard, {
+				data: healthData,
+				isLoading: healthLoading,
+				isError: healthError
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+				children: "Usage"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageCard, {})
+			})] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+				children: "Request Log"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "mt-2",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequestLogTable, {})
+			})] })
+		]
+	});
+}
+//#endregion
+export { Dashboard as component };