@cartanova/qgrid-cli 2.7.0 → 2.7.2

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

@@ -0,0 +1,2924 @@
+import { H as __toESM, S as require_react, b as useQueryClient, n as QgridService, o as TokenService, x as require_jsx_runtime } from "./services.generated-DyPeBI00.js";
+import { t as require_react_dom } from "./react-dom-zmEq8BVp.js";
+import { i as Q } from "../entry-server.generated.js";
+import { r as formatUsd } from "./cost-CSH_t17I.js";
+import { n as OAuthCodeEntry, r as useUpdateTokenMutation, t as useOAuthLoginFlow } from "./use-oauth-login-flow-DmsHGOlx.js";
+//#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());
+var import_react = /* @__PURE__ */ __toESM(require_react());
+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/gauge.jsx
+var import_jsx_runtime = require_jsx_runtime();
+var lucideGauge = (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: "m12 14l4-4M3.34 19a10 10 0 1 1 17.32 0"
+	})
+});
+//#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
+var QUOTA_THRESHOLD_PROVIDERS = new Set(["anthropic", "openai"]);
+function validateThreshold(raw) {
+	const trimmed = raw.trim();
+	if (trimmed === "") return {
+		ok: true,
+		value: null
+	};
+	if (!/^\d+$/.test(trimmed)) return {
+		ok: false,
+		error: "정수만 입력하세요 (0–100)"
+	};
+	const n = Number(trimmed);
+	if (n > 100) return {
+		ok: false,
+		error: "100 이하여야 합니다"
+	};
+	return {
+		ok: true,
+		value: n === 0 ? null : n
+	};
+}
+function validateWeight(raw) {
+	const trimmed = raw.trim();
+	if (!/^\d+$/.test(trimmed)) return {
+		ok: false,
+		error: "1–100 사이 정수를 입력하세요"
+	};
+	const value = Number(trimmed);
+	if (value < 1 || value > 100) return {
+		ok: false,
+		error: "1–100 사이 정수를 입력하세요"
+	};
+	return {
+		ok: true,
+		value
+	};
+}
+var PROVIDER_THEMES = {
+	openai: {
+		stripe: "bg-openai-400",
+		bar: "bg-openai-bar",
+		badge: "bg-openai-50 text-openai-600",
+		cost: "text-openai-600"
+	},
+	anthropic: {
+		stripe: "bg-anthropic-400",
+		bar: "bg-anthropic-400",
+		badge: "bg-anthropic-50 text-anthropic-600",
+		cost: "text-anthropic-600"
+	},
+	google: {
+		stripe: "bg-google-400",
+		bar: "bg-google-400",
+		badge: "bg-google-50 text-google-600",
+		cost: "text-google-600"
+	}
+};
+var DEFAULT_THEME = {
+	stripe: "bg-sand-400",
+	bar: "bg-sienna-400",
+	badge: "bg-sand-200 text-sand-500",
+	cost: "text-sienna-600"
+};
+function getProviderTheme(provider) {
+	return PROVIDER_THEMES[provider] ?? DEFAULT_THEME;
+}
+function barColor(pct, theme) {
+	if (pct >= 95) return "bg-danger-400";
+	if (pct >= 80) return "bg-caution-400";
+	return theme.bar;
+}
+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 formatWindowLabel(fallback, windowDurationMins) {
+	if (!windowDurationMins || windowDurationMins <= 0) return fallback;
+	const hours = windowDurationMins / 60;
+	if (hours >= 24) return `${Math.round(hours / 24)}d`;
+	return `${Math.round(hours)}h`;
+}
+function UsageRow({ label, utilization, resetsAt, windowDurationMins, theme, threshold }) {
+	const pct = utilization ?? 0;
+	const hasThreshold = threshold !== void 0 && threshold !== null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-xs text-sand-600 w-7 shrink-0",
+				children: formatWindowLabel(label, windowDurationMins)
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative flex-1 min-w-0 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, theme)}`,
+					style: { width: `${Math.min(pct, 100)}%` }
+				}), hasThreshold && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "absolute top-[-2px] bottom-[-2px] w-0.5 bg-sienna-500 rounded-full",
+					style: { left: `calc(${Math.min(threshold, 100)}% - 1px)` }
+				})]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+				className: "text-xs tabular-nums text-sand-700 w-9 text-right shrink-0",
+				children: [pct, "%"]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "hidden sm:inline text-[10px] text-sand-400 w-24 text-right shrink-0",
+				title: formatResets(resetsAt),
+				children: formatResets(resetsAt)
+			})
+		]
+	});
+}
+function TokenUsage({ token, theme }) {
+	const { data, isLoading } = QgridService.useUsage(token.id);
+	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) {
+		const isExpired = data.error.includes("re-login") || data.error.includes("token_revoked") || data.error.includes("401");
+		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: isExpired ? "Session expired" : "Unavailable"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+				className: "text-[10px] text-sand-400 mt-0.5",
+				children: isExpired ? "Please re-login via OAuth" : data.error
+			})]
+		});
+	}
+	if (!data?.fiveHour && !data?.sevenDay) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		className: "text-[11px] text-sand-400 py-1",
+		children: "No usage data"
+	});
+	const thresholdForPrimary = QUOTA_THRESHOLD_PROVIDERS.has(token.provider) ? token.quota_threshold : null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "space-y-1.5 py-1",
+		children: [data.fiveHour && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+			label: "5h",
+			utilization: data.fiveHour.utilization,
+			resetsAt: data.fiveHour.resetsAt,
+			windowDurationMins: data.fiveHour.windowDurationMins,
+			theme,
+			threshold: thresholdForPrimary
+		}), data.sevenDay && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageRow, {
+			label: "7d",
+			utilization: data.sevenDay.utilization,
+			resetsAt: data.sevenDay.resetsAt,
+			windowDurationMins: data.sevenDay.windowDurationMins,
+			theme
+		})]
+	});
+}
+function ThresholdControl({ token }) {
+	const [pos, setPos] = (0, import_react.useState)(null);
+	const [value, setValue] = (0, import_react.useState)("");
+	const triggerRef = (0, import_react.useRef)(null);
+	const queryClient = useQueryClient();
+	const updateMutation = useUpdateTokenMutation();
+	const supported = QUOTA_THRESHOLD_PROVIDERS.has(token.provider);
+	const open = pos !== null;
+	const validation = validateThreshold(value);
+	const POPOVER_WIDTH = 240;
+	const POPOVER_EST_HEIGHT = 150;
+	const MARGIN = 8;
+	const GAP = 6;
+	const openPopover = () => {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const left = Math.min(Math.max(rect.right - POPOVER_WIDTH, MARGIN), Math.max(window.innerWidth - POPOVER_WIDTH - MARGIN, MARGIN));
+		const above = rect.top - GAP - POPOVER_EST_HEIGHT;
+		const below = rect.bottom + GAP;
+		setPos({
+			left,
+			top: Math.min(Math.max(above >= MARGIN ? above : below, MARGIN), Math.max(window.innerHeight - POPOVER_EST_HEIGHT - MARGIN, MARGIN))
+		});
+		setValue(String(token.quota_threshold ?? 100));
+	};
+	const close = () => setPos(null);
+	if (!supported) return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+		className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] text-sand-300 border border-sand-100",
+		title: "Quota threshold는 이 provider에서 지원되지 않습니다",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGauge, { className: "size-3" }), "n/a"]
+	});
+	const adjust = (delta) => {
+		const current = /^\d+$/.test(value.trim()) ? Number(value.trim()) : 0;
+		const next = Math.min(Math.max(current + delta, 0), 100);
+		setValue(String(next));
+	};
+	const save = async () => {
+		if (!validation.ok) return;
+		await updateMutation.mutateAsync({
+			id: token.id,
+			quotaThreshold: validation.value
+		});
+		await Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
+		close();
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "inline-flex",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			ref: triggerRef,
+			type: "button",
+			title: "사용률 제한 설정",
+			onClick: open ? close : openPopover,
+			className: "flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] border border-sand-200/80 text-sand-400 hover:text-sand-600 hover:border-sand-300 transition-colors duration-150",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGauge, { className: "size-3" }), "Set limit"]
+		}), open && pos && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "fixed inset-0 z-40",
+			onPointerDown: close
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "fixed z-50 w-60 panel shadow-xl p-3",
+			style: {
+				top: pos.top,
+				left: pos.left
+			},
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+					htmlFor: `threshold-${token.id}`,
+					className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+					children: "사용률 제한"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-1 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => adjust(-10),
+							className: "size-9 shrink-0 rounded-md border border-sand-200 text-sand-600 text-base leading-none hover:bg-sand-100 transition-colors duration-150",
+							children: "−"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
+							id: `threshold-${token.id}`,
+							value,
+							onChange: (e) => setValue(e.target.value),
+							inputMode: "numeric",
+							className: `h-9 w-14 border rounded-md text-center text-sm text-sand-900 bg-white tabular-nums focus:outline-none ${validation.ok ? "border-sand-200 focus:border-sienna-300" : "border-red-300 focus:border-red-400"}`
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => adjust(10),
+							className: "size-9 shrink-0 rounded-md border border-sand-200 text-sand-600 text-base leading-none hover:bg-sand-100 transition-colors duration-150",
+							children: "+"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-sm text-sand-500",
+							children: "%"
+						})
+					]
+				}),
+				validation.ok ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1.5 text-[11px] text-sand-500 leading-snug",
+					children: validation.value === null ? "제한 없음 — 사용률과 무관하게 항상 사용합니다." : "5h 사용률이 임계치에 달하면 해당 토큰을 건너뜁니다."
+				}) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "mt-1.5 text-[11px] text-red-500",
+					children: validation.error
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-2 flex items-center justify-end gap-1.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "px-2 py-1 text-[11px] font-medium rounded-md border border-sand-200 text-sand-600 hover:bg-sand-100 transition-colors duration-150",
+						onClick: close,
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: "px-2 py-1 text-[11px] font-medium rounded-md bg-sienna-400 text-white hover:bg-sienna-500 disabled:opacity-50 transition-colors duration-150",
+						disabled: updateMutation.isPending || !validation.ok,
+						onClick: save,
+						children: updateMutation.isPending ? "Saving..." : "Save"
+					})]
+				})
+			]
+		})] })]
+	});
+}
+function WeightControl({ token }) {
+	const [pos, setPos] = (0, import_react.useState)(null);
+	const [value, setValue] = (0, import_react.useState)("");
+	const triggerRef = (0, import_react.useRef)(null);
+	const queryClient = useQueryClient();
+	const updateMutation = useUpdateTokenMutation();
+	const validation = validateWeight(value);
+	const openPopover = () => {
+		const rect = triggerRef.current?.getBoundingClientRect();
+		if (!rect) return;
+		const width = 240;
+		const height = 150;
+		const margin = 8;
+		const gap = 6;
+		const left = Math.min(Math.max(rect.right - width, margin), Math.max(window.innerWidth - width - margin, margin));
+		const above = rect.top - gap - height;
+		const top = Math.min(Math.max(above >= margin ? above : rect.bottom + gap, margin), Math.max(window.innerHeight - height - margin, margin));
+		setValue(String(token.weight));
+		setPos({
+			left,
+			top
+		});
+	};
+	const close = () => setPos(null);
+	const adjust = (delta) => {
+		const current = /^\d+$/.test(value.trim()) ? Number(value.trim()) : 1;
+		setValue(String(Math.min(Math.max(current + delta, 1), 100)));
+	};
+	const save = async () => {
+		if (!validation.ok) return;
+		await updateMutation.mutateAsync({
+			id: token.id,
+			weight: validation.value
+		});
+		await Promise.all([queryClient.invalidateQueries({ queryKey: ["Token"] }), queryClient.invalidateQueries({ queryKey: ["Qgrid"] })]);
+		close();
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "inline-flex",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", {
+			ref: triggerRef,
+			type: "button",
+			title: "라우팅 가중치 설정",
+			onClick: pos ? close : openPopover,
+			className: "flex items-center gap-1 px-1.5 py-0.5 rounded-md text-[10px] border border-sand-200/80 text-sand-400 hover:text-sand-600 hover:border-sand-300 transition-colors duration-150",
+			children: ["Weight ", token.weight]
+		}), pos && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "fixed inset-0 z-40",
+			onPointerDown: close
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "fixed z-50 w-60 panel shadow-xl p-3",
+			style: pos,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
+					htmlFor: `weight-${token.id}`,
+					className: "text-[10px] uppercase tracking-wider text-sand-500 font-medium",
+					children: "라우팅 가중치"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-1 flex items-center gap-2",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => adjust(-1),
+							className: "size-9 shrink-0 rounded-md border border-sand-200 text-sand-600",
+							children: "−"
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Q, {
+							id: `weight-${token.id}`,
+							value,
+							onChange: (event) => setValue(event.target.value),
+							inputMode: "numeric",
+							className: `h-9 w-16 border rounded-md text-center text-sm tabular-nums ${validation.ok ? "border-sand-200" : "border-red-300"}`
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							onClick: () => adjust(1),
+							className: "size-9 shrink-0 rounded-md border border-sand-200 text-sand-600",
+							children: "+"
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: `mt-1.5 text-[11px] ${validation.ok ? "text-sand-500" : "text-red-500"}`,
+					children: validation.ok ? "새 요청의 상대 배정 비율입니다." : validation.error
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-2 flex items-center justify-end gap-1.5",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: close,
+						className: "px-2 py-1 text-[11px]",
+						children: "Cancel"
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: save,
+						disabled: updateMutation.isPending || !validation.ok,
+						className: "px-2 py-1 text-[11px] rounded-md bg-sienna-400 text-white disabled:opacity-50",
+						children: updateMutation.isPending ? "Saving..." : "Save"
+					})]
+				})
+			]
+		})] })]
+	});
+}
+/**
+* 재로그인의 유일한 진입점.
+*
+* 조치가 필요하다는 것을 알게 되는 곳이 만료된 토큰 카드라, 거기서 바로 누를 수 있어야
+* 한다. Tokens 페이지에도 같은 버튼을 두었더니 같은 일을 두 곳에서 하게 돼 걷어냈다.
+*
+* `useOAuthLoginFlow` 는 Add Token 과 공유한다 — 원격 접속이면 코드 입력 단계로 이어지므로
+* 모달까지 이 컴포넌트가 함께 들고 있다.
+*/
+function ReloginButton({ token }) {
+	const oauth = useOAuthLoginFlow();
+	const submitCode = async (pastedCode) => {
+		if (await oauth.submitCode(pastedCode)) oauth.reset();
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+		type: "button",
+		title: "기존 이름으로 다시 로그인",
+		disabled: oauth.loadingProvider !== null,
+		onClick: () => void oauth.start(token.provider, token.name ?? ""),
+		className: "inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-[10px] font-medium border border-sienna-300 text-sienna-600 hover:bg-sienna-50 disabled:opacity-50 transition-colors duration-150",
+		children: oauth.loadingProvider === token.provider ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "size-2.5 border-2 border-sienna-400 border-t-transparent rounded-full animate-spin" }), "로그인 대기"] }) : "재로그인"
+	}), oauth.codeEntry && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "fixed inset-0 z-50 flex items-start justify-center pt-[15vh]",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "absolute inset-0 bg-sand-900/8 backdrop-blur-sm",
+			onClick: oauth.reset,
+			onKeyDown: () => {}
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "relative panel shadow-xl w-full max-w-md mx-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "px-5 py-4 border-b border-sand-100/60",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", {
+					className: "text-base font-medium text-sand-900",
+					children: "재로그인"
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "px-5 py-4",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(OAuthCodeEntry, {
+					isPending: oauth.completeMutation.isPending,
+					isError: oauth.completeMutation.isError,
+					onSubmit: (code) => void submitCode(code),
+					onRestart: oauth.reset
+				})
+			})]
+		})]
+	})] });
+}
+function SortableTokenCard({ token }) {
+	const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+		id: String(token.id),
+		transition: {
+			duration: 200,
+			easing: "ease"
+		}
+	});
+	const { data: costData } = QgridService.useTotalCost({
+		num: 0,
+		page: 1,
+		...token.name ? { token_name: token.name } : {}
+	}, { enabled: !!token.name });
+	const theme = getProviderTheme(token.provider);
+	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
+		},
+		className: "relative rounded-lg bg-white border border-sand-200/80 overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-200",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `absolute inset-y-0 left-0 w-1 ${theme.stripe}` }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "pl-4 pr-3 py-3",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-start justify-between gap-2 mb-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: "flex items-center gap-1.5 min-w-0",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+							type: "button",
+							"aria-label": "순서 변경 핸들",
+							...attributes,
+							...listeners,
+							className: "shrink-0 -m-1 p-1 text-sand-300 hover:text-sand-500 cursor-grab active:cursor-grabbing touch-none",
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(lucideGripVertical, { className: "size-3.5" })
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-[13px] font-medium text-sand-800 truncate select-none",
+							children: token.name ?? "Unnamed"
+						})]
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: `text-[11px] tabular-nums font-medium shrink-0 ${theme.cost}`,
+						title: "이 토큰의 누적 비용",
+						children: formatUsd(costData?.usd ?? 0)
+					})]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex flex-wrap items-center gap-1 mb-2",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: `text-[10px] px-1.5 py-0.5 rounded-full uppercase ${theme.badge}`,
+							children: token.provider
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: `text-[10px] px-1.5 py-0.5 rounded-full ${token.active ? "bg-sage-100 text-sage-600" : "bg-sand-200 text-sand-500"}`,
+							children: token.active ? "Active" : "Inactive"
+						}),
+						QUOTA_THRESHOLD_PROVIDERS.has(token.provider) && token.quota_threshold !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+							className: "px-1.5 py-0.5 rounded-full bg-sienna-50 text-[10px] tabular-nums font-medium text-sienna-600",
+							title: `사용률 ${token.quota_threshold}% 이상이면 이 토큰 제외`,
+							children: [
+								"≤ ",
+								token.quota_threshold,
+								"%"
+							]
+						})
+					]
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TokenUsage, {
+					token,
+					theme
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "mt-2 flex flex-wrap items-center gap-1.5",
+					children: [
+						!token.active && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReloginButton, { token }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1" }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(WeightControl, { token }),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThresholdControl, { token })
+					]
+				})
+			]
+		})]
+	});
+}
+var PROVIDERS = [
+	"all",
+	"openai",
+	"anthropic"
+];
+function UsageCard() {
+	const { data, isLoading } = TokenService.useTokens("A", { orderBy: "ord-asc" });
+	const queryClient = useQueryClient();
+	const reorderMutation = TokenService.useReorderMutation();
+	const [localTokens, setLocalTokens] = (0, import_react.useState)([]);
+	const [providerFilter, setProviderFilter] = (0, import_react.useState)("all");
+	(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: "panel p-5",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid grid-cols-1 sm: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: "panel px-5 py-10",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+			className: "text-sand-400 text-[13px] text-center",
+			children: "No tokens registered"
+		})
+	});
+	const filteredTokens = providerFilter === "all" ? localTokens : localTokens.filter((t) => t.provider === providerFilter);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "panel overflow-hidden",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "panel-header flex items-center justify-between px-5 py-2.5",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "text-[13px] font-medium text-sand-700",
+				children: "Token Usage"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "segmented-control flex gap-0.5",
+				children: PROVIDERS.map((p) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", {
+					type: "button",
+					"data-active": providerFilter === p,
+					className: `px-2.5 py-[3px] text-[11px] font-medium rounded-[6px] transition-all duration-150 ${providerFilter === p ? "text-sand-800" : "text-sand-500 hover:text-sand-700"}`,
+					onClick: () => setProviderFilter(p),
+					children: p === "all" ? "All" : p === "openai" ? "OpenAI" : "Anthropic"
+				}, p))
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DndContext, {
+				sensors,
+				collisionDetection: closestCenter,
+				onDragEnd: handleDragEnd,
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableContext, {
+					items: filteredTokens.map((t) => String(t.id)),
+					strategy: rectSortingStrategy,
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 gap-3",
+						children: filteredTokens.map((token) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SortableTokenCard, { token }, token.id))
+					})
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/routes/index.tsx?tsr-split=component
+function Dashboard() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "max-w-6xl mx-auto",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(UsageCard, {})
+	});
+}
+//#endregion
+export { Dashboard as component };