@endfield-ui/react 1.0.1 → 1.1.0

package/dist/game.js

@@ -0,0 +1,2042 @@
+"use client";
+import { Dialog } from "@base-ui/react/dialog";
+import { Fragment, memo, useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { cn, useControllableState, useFieldContext, useFieldControl, usePortalScope, useReducedMotion } from "./index.js";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ScrollArea } from "@base-ui/react/scroll-area";
+import { Popover } from "@base-ui/react/popover";
+import { flushSync } from "react-dom";
+import { Select } from "@base-ui/react/select";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/game/lib/first-focusable.ts
+const FOCUSABLE = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+/**
+* 弹窗打开时焦点落在哪：内容区里第一个能聚焦的元素；没有时返回 `true`，交还给默认行为。
+*
+* 和主库 `components/dialog/initial-focus.ts` 是同一条规则。那边不是公开导出，
+* 这一类又只经主入口用主库（见 `core.ts`），所以这里自己留一份。
+*/
+function firstFocusableIn(content) {
+	return () => content.current?.querySelector(FOCUSABLE) ?? true;
+}
+//#endregion
+//#region src/game/animated-dialog/AnimatedDialog.tsx
+function slotClass(value, open) {
+	return typeof value === "function" ? value(open) : value;
+}
+function AnimatedDialog({ trigger, open: controlledOpen, defaultOpen = false, onOpenChange, title, description, icon, width, height, className, classNames, dismissible = true, keyboardCloseable, onClose, onDismiss, closeLabel = "关闭", initialFocus, finalFocus, keepMounted = false, modal, container, children, ...popupProps }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const open = controlledOpen ?? internalOpen;
+	const [pending, setPending] = useState(false);
+	const lifecycle = useRef({
+		open,
+		session: 0,
+		locked: false,
+		mounted: true
+	});
+	const contentRef = useRef(null);
+	const { anchorRef, portalRef } = usePortalScope();
+	const focusContent = useCallback(() => firstFocusableIn(contentRef)(), []);
+	useLayoutEffect(() => {
+		const current = lifecycle.current;
+		current.mounted = true;
+		return () => {
+			current.mounted = false;
+			current.session += 1;
+			current.locked = false;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		if (lifecycle.current.open === open) return;
+		lifecycle.current.open = open;
+		lifecycle.current.session += 1;
+		lifecycle.current.locked = false;
+		setPending(false);
+	}, [open]);
+	const updateOpen = useCallback((next) => {
+		if (controlledOpen === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [controlledOpen, onOpenChange]);
+	const requestClose = useCallback(async (dismiss) => {
+		const current = lifecycle.current;
+		if (!current.open || current.locked || !current.mounted) return;
+		current.locked = true;
+		const session = current.session;
+		setPending(true);
+		const active = () => lifecycle.current.mounted && lifecycle.current.open && lifecycle.current.session === session;
+		try {
+			if (dismiss) {
+				if (await onDismiss?.() === false || !active()) return;
+			}
+			if (await onClose?.() !== false && active()) updateOpen(false);
+		} catch {} finally {
+			if (active()) {
+				lifecycle.current.locked = false;
+				setPending(false);
+			}
+		}
+	}, [
+		onClose,
+		onDismiss,
+		updateOpen
+	]);
+	const handleOpenChange = (next, details) => {
+		if (next) {
+			updateOpen(true);
+			return;
+		}
+		details.cancel();
+		if (details.reason === "escape-key" && !(keyboardCloseable ?? dismissible)) return;
+		const dismiss = details.reason === "escape-key" || details.reason === "outside-press" || details.reason === "focus-out";
+		if (dismiss && details.reason !== "escape-key" && !dismissible) return;
+		requestClose(dismiss);
+	};
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		open,
+		onOpenChange: handleOpenChange,
+		disablePointerDismissal: !dismissible,
+		modal,
+		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, {
+			ref: anchorRef,
+			render: trigger
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, {
+			ref: portalRef,
+			keepMounted,
+			container,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cn("ef-animated-dialog-backdrop", slotClass(classNames?.backdrop, open)) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+				className: "ef-animated-dialog-viewport",
+				children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+					...popupProps,
+					"aria-busy": pending || void 0,
+					initialFocus: initialFocus ?? focusContent,
+					finalFocus,
+					style: {
+						width,
+						height
+					},
+					className: cn("ef-animated-dialog", className, slotClass(classNames?.alert, open)),
+					children: [
+						/* @__PURE__ */ jsxs("header", {
+							className: cn("ef-animated-dialog__header", slotClass(classNames?.header, open)),
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									"aria-hidden": "true",
+									className: "ef-animated-dialog__top-strip",
+									children: [/* @__PURE__ */ jsx("span", { className: "ef-animated-dialog__yellow-block" }), /* @__PURE__ */ jsxs("span", {
+										className: "ef-animated-dialog__top-deco",
+										children: [/* @__PURE__ */ jsxs("svg", {
+											viewBox: "0 0 120 10",
+											children: [
+												/* @__PURE__ */ jsx("polygon", {
+													points: "0,2 7,2 3.5,8",
+													fill: "currentColor"
+												}),
+												/* @__PURE__ */ jsx("text", {
+													x: "7",
+													y: "7",
+													fontSize: "7",
+													fontStyle: "italic",
+													children: "//"
+												}),
+												/* @__PURE__ */ jsx("text", {
+													x: "16",
+													y: "7",
+													fontSize: "7",
+													children: "ARKNIGHTS:ENDFIELD"
+												})
+											]
+										}), /* @__PURE__ */ jsxs("svg", {
+											viewBox: "0 0 10 10",
+											className: "ef-animated-dialog__plus",
+											children: [/* @__PURE__ */ jsx("rect", {
+												x: "0.5",
+												y: "0.5",
+												width: "9",
+												height: "9",
+												fill: "none",
+												stroke: "currentColor"
+											}), /* @__PURE__ */ jsx("path", {
+												d: "M5 2.5v5M2.5 5h5",
+												stroke: "currentColor"
+											})]
+										})]
+									})]
+								}),
+								/* @__PURE__ */ jsxs("div", {
+									className: "ef-animated-dialog__title-band",
+									children: [
+										/* @__PURE__ */ jsx("div", {
+											"aria-hidden": "true",
+											className: "ef-animated-dialog__icon-slot",
+											children: /* @__PURE__ */ jsx("span", {
+												className: "ef-animated-dialog__icon",
+												children: icon
+											})
+										}),
+										/* @__PURE__ */ jsx(Dialog.Title, {
+											className: cn("ef-animated-dialog__title", slotClass(classNames?.title, open)),
+											children: /* @__PURE__ */ jsx("span", { children: title })
+										}),
+										/* @__PURE__ */ jsx("span", {
+											"aria-hidden": "true",
+											className: "ef-animated-dialog__title-deco",
+											children: "ENDFIELD"
+										})
+									]
+								}),
+								/* @__PURE__ */ jsx("div", {
+									className: "ef-animated-dialog__close-motion",
+									children: /* @__PURE__ */ jsx(Dialog.Close, {
+										"aria-label": closeLabel,
+										"aria-disabled": pending || void 0,
+										className: cn("ef-animated-dialog__close", slotClass(classNames?.close, open)),
+										children: /* @__PURE__ */ jsx("svg", {
+											"aria-hidden": "true",
+											viewBox: "0 0 205 205",
+											fill: "currentColor",
+											fillRule: "evenodd",
+											children: /* @__PURE__ */ jsx("path", { d: "M0 25L25 0L205 180L180 205ZM25 205L0 180L180 0L205 25Z" })
+										})
+									})
+								}),
+								/* @__PURE__ */ jsx("div", {
+									"aria-hidden": "true",
+									className: "ef-animated-dialog__separator"
+								})
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							"data-theme": "light",
+							className: cn("ef-animated-dialog__content", slotClass(classNames?.contentContainer, open)),
+							children: [/* @__PURE__ */ jsxs("div", {
+								ref: contentRef,
+								className: "ef-animated-dialog__body",
+								children: [description && /* @__PURE__ */ jsx(Dialog.Description, {
+									className: "ef-animated-dialog__description",
+									children: description
+								}), children]
+							}), /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "ef-animated-dialog__registration"
+							})]
+						}),
+						/* @__PURE__ */ jsxs("footer", {
+							"aria-hidden": "true",
+							className: cn("ef-animated-dialog__footer", slotClass(classNames?.footer, open)),
+							children: [
+								/* @__PURE__ */ jsx("span", { className: "ef-animated-dialog__footer-square" }),
+								/* @__PURE__ */ jsx("span", { className: "ef-animated-dialog__footer-outline" }),
+								/* @__PURE__ */ jsx("span", { className: "ef-animated-dialog__footer-hatch" })
+							]
+						})
+					]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/game/rounded-button/RoundedButton.tsx
+const hoverColors = {
+	primary: {
+		enter: [
+			"#2a272877",
+			"#2a2728b5",
+			"#2a272877",
+			"#2a2728b5"
+		],
+		leave: [
+			"#2a2728b5",
+			"#2a2728",
+			"#2a2728b5",
+			"#2a2728"
+		],
+		enterBorder: [
+			"#81807f",
+			"#81807f",
+			"#81807f",
+			"#81807f"
+		],
+		leaveBorder: [
+			"#81807f",
+			"#81807f",
+			"#81807f",
+			"#81807f"
+		]
+	},
+	default: {
+		enter: [
+			"#ececec77",
+			"#e8e8e8b5",
+			"#ececec77",
+			"#e8e8e8b5"
+		],
+		leave: [
+			"#e8e8e8b5",
+			"#f2f1ef",
+			"#e8e8e8b5",
+			"#f2f1ef"
+		],
+		enterBorder: [
+			"#a5a5a5",
+			"#a5a5a5",
+			"#a5a5a5",
+			"#a5a5a5"
+		],
+		leaveBorder: [
+			"#a5a5a5",
+			"#a0a2a3",
+			"#a5a5a5",
+			"#a0a2a3"
+		]
+	}
+};
+/** 原灰色圆角按钮；悬停闪动由浏览器动画执行。 */
+function RoundedButton({ variant = "primary", type = "button", text = "", children, icon, showIcon = true, iconPosition = "right", loading = false, disabled = false, className, classNames, onClick, onPointerEnter, onPointerLeave, ...props }) {
+	const reducedMotion = useReducedMotion();
+	const animationRef = useRef(null);
+	const isPrimary = variant === "primary";
+	const slotClass = (slot) => typeof slot === "function" ? slot(isPrimary) : slot;
+	useEffect(() => {
+		if (disabled || loading || reducedMotion) animationRef.current?.cancel();
+		return () => animationRef.current?.cancel();
+	}, [
+		disabled,
+		loading,
+		reducedMotion,
+		variant
+	]);
+	const animateHover = (event, entering) => {
+		const button = event.currentTarget;
+		if (disabled || loading || reducedMotion || event.defaultPrevented || event.pointerType !== "mouse" || typeof window.matchMedia !== "function" || !window.matchMedia("(hover: hover) and (pointer: fine)").matches || typeof button.animate !== "function") return;
+		animationRef.current?.cancel();
+		const colors = hoverColors[variant];
+		const backgrounds = entering ? colors.enter : colors.leave;
+		const borders = entering ? colors.enterBorder : colors.leaveBorder;
+		animationRef.current = button.animate(backgrounds.map((backgroundColor, index) => ({
+			backgroundColor,
+			boxShadow: `0 0 0 0.1em ${backgroundColor}, 0 0 0 0.1em ${borders[index]} inset`
+		})), {
+			duration: 200,
+			easing: "ease-out"
+		});
+	};
+	const iconElement = showIcon && /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: cn("ef-rounded-button-icon", slotClass(classNames?.icon)),
+		children: loading ? /* @__PURE__ */ jsx("span", { className: "ef-rounded-button-spinner" }) : icon
+	});
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		type,
+		disabled,
+		"aria-busy": loading || props["aria-busy"] || void 0,
+		"aria-disabled": loading || props["aria-disabled"] || void 0,
+		"data-variant": variant,
+		"data-icon-position": iconPosition,
+		"data-loading": loading ? "" : void 0,
+		className: cn("ef-rounded-button", className, slotClass(classNames?.button)),
+		onClick: (event) => {
+			if (disabled || loading) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		},
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			animateHover(event, true);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			animateHover(event, false);
+		},
+		children: [
+			iconPosition === "left" && iconElement,
+			/* @__PURE__ */ jsx("span", {
+				className: cn("ef-rounded-button-text", slotClass(classNames?.text)),
+				children: children ?? text
+			}),
+			iconPosition === "right" && iconElement
+		]
+	});
+}
+//#endregion
+//#region src/game/banner-alert/AlertIcons.tsx
+function AlertTickIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		width: "1em",
+		height: "1em",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M4.89163 13.2687L9.16582 17.5427L18.7085 8",
+			stroke: "currentColor",
+			strokeWidth: "3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round"
+		})
+	});
+}
+function AlertCloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 1024 1024",
+		width: "1em",
+		height: "1em",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"
+		})
+	});
+}
+//#endregion
+//#region src/game/banner-alert/types.ts
+function alertSlotClass(value, open) {
+	return typeof value === "function" ? value(open) : value;
+}
+//#endregion
+//#region src/game/banner-alert/useAlertActions.ts
+function useAlertActions({ open: controlledOpen, defaultOpen = false, onOpenChange, loading = false, onConfirm, onCancel, onDismiss, onClose }) {
+	const [internalOpen, setInternalOpen] = useState(defaultOpen);
+	const [pending, setPending] = useState(false);
+	const open = controlledOpen ?? internalOpen;
+	const lifecycle = useRef({
+		open,
+		loading,
+		mounted: true,
+		locked: false,
+		session: 0
+	});
+	useLayoutEffect(() => {
+		const current = lifecycle.current;
+		current.mounted = true;
+		return () => {
+			current.mounted = false;
+			current.locked = false;
+			current.session += 1;
+		};
+	}, []);
+	useLayoutEffect(() => {
+		lifecycle.current.loading = loading;
+		if (lifecycle.current.open === open) return;
+		lifecycle.current.open = open;
+		lifecycle.current.session += 1;
+		lifecycle.current.locked = false;
+		setPending(false);
+	}, [open, loading]);
+	const updateOpen = useCallback((next) => {
+		if (controlledOpen === void 0) setInternalOpen(next);
+		onOpenChange?.(next);
+	}, [controlledOpen, onOpenChange]);
+	const run = useCallback(async (kind) => {
+		const current = lifecycle.current;
+		if (!current.open || !current.mounted || current.loading || current.locked) return;
+		current.locked = true;
+		setPending(true);
+		const session = current.session;
+		const active = () => lifecycle.current.mounted && lifecycle.current.open && lifecycle.current.session === session;
+		try {
+			const action = {
+				confirm: onConfirm,
+				cancel: onCancel,
+				dismiss: onDismiss,
+				close: void 0
+			}[kind];
+			if (await action?.() === false || !active()) return;
+			if (await onClose?.() !== false && active()) updateOpen(false);
+		} catch {} finally {
+			if (active()) {
+				lifecycle.current.locked = false;
+				setPending(false);
+			}
+		}
+	}, [
+		onConfirm,
+		onCancel,
+		onDismiss,
+		onClose,
+		updateOpen
+	]);
+	return {
+		open,
+		busy: loading || pending,
+		updateOpen,
+		run
+	};
+}
+//#endregion
+//#region src/game/banner-alert/AlertModal.tsx
+function hasTabbableContent(popup) {
+	const candidates = popup.querySelectorAll("a[href],button,input:not([type=\"hidden\"]),select,textarea,[tabindex],[contenteditable=\"true\"]");
+	return Array.from(candidates).some((node) => {
+		if (node.matches(":disabled") || node.hasAttribute("tabindex") && node.tabIndex < 0 || node.closest("[hidden],[inert],[aria-hidden=\"true\"]")) return false;
+		const style = getComputedStyle(node);
+		return style.display !== "none" && style.visibility !== "hidden";
+	});
+}
+function AlertModal({ trigger, open: controlledOpen, defaultOpen, onOpenChange, title, description, dismissible = true, keyboardCloseable, loading, hideCancel = false, cancelText: _cancelText, confirmText: _confirmText, showIcon: _showIcon, width, height, className, classNames, onConfirm, onCancel, onDismiss, onClose, initialFocus, finalFocus, keepMounted = false, modal, container, popupClassName, backdropClassName, viewportClassName, children, ref: forwardedRef, ...popupProps }) {
+	const { open, busy, updateOpen, run } = useAlertActions({
+		open: controlledOpen,
+		defaultOpen,
+		onOpenChange,
+		loading,
+		onConfirm,
+		onCancel,
+		onDismiss,
+		onClose
+	});
+	const { anchorRef, portalRef } = usePortalScope();
+	const popupRef = useRef(null);
+	const cancelRef = useRef(null);
+	const confirmRef = useRef(null);
+	const lastFocus = useRef(null);
+	const wasBusy = useRef(false);
+	const focusAction = useCallback(() => {
+		const button = hideCancel ? confirmRef.current : cancelRef.current;
+		return button && !button.disabled ? button : popupRef.current ?? true;
+	}, [hideCancel]);
+	const assignRef = useCallback((node) => {
+		popupRef.current = node;
+		if (typeof forwardedRef === "function") return forwardedRef(node);
+		if (forwardedRef) forwardedRef.current = node;
+	}, [forwardedRef]);
+	useLayoutEffect(() => {
+		const popup = popupRef.current;
+		const previousBusy = wasBusy.current;
+		wasBusy.current = busy;
+		if (!open || !popup) return;
+		const focused = popup.ownerDocument.activeElement;
+		if (busy) {
+			if (focused === popup.ownerDocument.body || focused instanceof HTMLElement && popup.contains(focused) && focused.matches(":disabled")) popup.focus({ preventScroll: true });
+		} else if (previousBusy && focused === popup) {
+			const previousFocus = lastFocus.current;
+			if (previousFocus && popup.contains(previousFocus) && !previousFocus.matches(":disabled")) previousFocus.focus({ preventScroll: true });
+		}
+	}, [busy, open]);
+	const changeOpen = (next, details) => {
+		if (next) {
+			updateOpen(true);
+			return;
+		}
+		details.cancel();
+		if (details.reason === "escape-key" && !(keyboardCloseable ?? dismissible)) return;
+		const dismiss = details.reason === "escape-key" || details.reason === "outside-press" || details.reason === "focus-out";
+		if (dismiss && details.reason !== "escape-key" && !dismissible) return;
+		run(dismiss ? "dismiss" : "close");
+	};
+	return /* @__PURE__ */ jsxs(Dialog.Root, {
+		open,
+		onOpenChange: changeOpen,
+		disablePointerDismissal: !dismissible || busy,
+		modal,
+		children: [trigger && /* @__PURE__ */ jsx(Dialog.Trigger, {
+			ref: anchorRef,
+			render: trigger
+		}), /* @__PURE__ */ jsxs(Dialog.Portal, {
+			ref: portalRef,
+			keepMounted,
+			container,
+			children: [/* @__PURE__ */ jsx(Dialog.Backdrop, { className: cn(backdropClassName, alertSlotClass(classNames?.backdrop, open)) }), /* @__PURE__ */ jsx(Dialog.Viewport, {
+				className: cn("ef-alert-modal-viewport", viewportClassName),
+				children: /* @__PURE__ */ jsxs(Dialog.Popup, {
+					...popupProps,
+					onFocusCapture: (event) => {
+						popupProps.onFocusCapture?.(event);
+						if (event.target instanceof HTMLElement && event.target !== event.currentTarget && event.currentTarget.contains(event.target)) lastFocus.current = event.target;
+					},
+					onKeyDownCapture: (event) => {
+						popupProps.onKeyDownCapture?.(event);
+						if (open && busy && event.key === "Tab" && event.target instanceof Node && event.currentTarget.contains(event.target) && !hasTabbableContent(event.currentTarget)) {
+							event.preventDefault();
+							event.currentTarget.focus({ preventScroll: true });
+						}
+					},
+					ref: assignRef,
+					role: "alertdialog",
+					"aria-busy": busy || void 0,
+					"data-theme": "light",
+					initialFocus: initialFocus ?? focusAction,
+					finalFocus,
+					style: {
+						width,
+						height
+					},
+					className: cn(popupClassName, className, alertSlotClass(classNames?.alert, open)),
+					children: [
+						/* @__PURE__ */ jsx(Dialog.Title, {
+							className: "ef-alert-modal-sr-only",
+							children: title
+						}),
+						description && /* @__PURE__ */ jsx(Dialog.Description, {
+							className: "ef-alert-modal-sr-only",
+							children: description
+						}),
+						children({
+							open,
+							busy,
+							cancelRef,
+							confirmRef,
+							confirm: () => {
+								run("confirm");
+							},
+							cancel: () => {
+								run("cancel");
+							}
+						})
+					]
+				})
+			})]
+		})]
+	});
+}
+//#endregion
+//#region src/game/banner-alert/useAlertGlitch.ts
+const OPACITY = [
+	0,
+	1,
+	1,
+	0,
+	0,
+	1,
+	1,
+	0,
+	0,
+	1
+];
+const OFFSETS = [
+	0,
+	.48,
+	.82,
+	.85,
+	.87,
+	.9,
+	.92,
+	.95,
+	.97,
+	1
+];
+const frames = OPACITY.map((opacity, index) => ({
+	opacity,
+	offset: OFFSETS[index]
+}));
+function useAlertGlitch(open) {
+	const contentRef = useRef(null);
+	const actionsRef = useRef(null);
+	useLayoutEffect(() => {
+		if (!open) return;
+		const nodes = [contentRef.current, actionsRef.current].filter((node) => node !== null);
+		const media = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		const animations = nodes.flatMap((node) => {
+			node.style.removeProperty("--ef-game-alert-exit-opacity");
+			node.style.opacity = "1";
+			if (media?.matches || typeof node.animate !== "function") return [];
+			node.style.opacity = "0";
+			const animation = node.animate(frames, {
+				duration: 205,
+				easing: "ease-out",
+				fill: "both"
+			});
+			animation.onfinish = () => {
+				node.style.opacity = "1";
+				animation.cancel();
+			};
+			return [{
+				node,
+				animation
+			}];
+		});
+		const settle = () => {
+			for (const { node, animation } of animations) {
+				node.style.opacity = "1";
+				animation.cancel();
+			}
+		};
+		const reduced = () => {
+			if (media?.matches) settle();
+		};
+		media?.addEventListener("change", reduced);
+		return () => {
+			media?.removeEventListener("change", reduced);
+			for (const { node, animation } of animations) {
+				node.style.setProperty("--ef-game-alert-exit-opacity", getComputedStyle(node).opacity);
+				animation.cancel();
+				node.style.opacity = "1";
+			}
+		};
+	}, [open]);
+	return {
+		contentRef,
+		actionsRef
+	};
+}
+//#endregion
+//#region src/game/banner-alert/BannerAlert.tsx
+function BannerAlert({ children, width = "30em", hideCancel = false, cancelText = "取消", confirmText = "确认", showIcon = true, classNames, ...props }) {
+	return /* @__PURE__ */ jsx(AlertModal, {
+		...props,
+		width,
+		hideCancel,
+		classNames,
+		popupClassName: "ef-banner-alert",
+		backdropClassName: "ef-banner-alert-backdrop",
+		children: (state) => /* @__PURE__ */ jsx(BannerAlertContent, {
+			...state,
+			hideCancel,
+			cancelText,
+			confirmText,
+			showIcon,
+			classNames,
+			children
+		})
+	});
+}
+function BannerAlertContent({ open, busy, cancelRef, confirmRef, cancel, confirm, hideCancel, cancelText, confirmText, showIcon, classNames, children }) {
+	const { contentRef, actionsRef } = useAlertGlitch(open);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsxs("div", {
+			"aria-hidden": "true",
+			className: "ef-banner-alert__banner",
+			children: [/* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsx("span", {})]
+		}),
+		/* @__PURE__ */ jsx("div", {
+			ref: contentRef,
+			className: cn("ef-banner-alert__content", alertSlotClass(classNames?.content, open)),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "ef-banner-alert__body",
+				children
+			})
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			ref: actionsRef,
+			className: "ef-banner-alert__actions",
+			"data-hide-cancel": hideCancel ? "" : void 0,
+			children: [!hideCancel && /* @__PURE__ */ jsx(RoundedButton, {
+				ref: cancelRef,
+				variant: "default",
+				text: cancelText,
+				showIcon,
+				disabled: busy,
+				onClick: cancel,
+				icon: /* @__PURE__ */ jsx(AlertCloseIcon, {}),
+				className: "ef-banner-alert__button"
+			}), /* @__PURE__ */ jsx(RoundedButton, {
+				ref: confirmRef,
+				variant: "primary",
+				text: confirmText,
+				showIcon,
+				disabled: busy,
+				loading: busy,
+				onClick: confirm,
+				icon: /* @__PURE__ */ jsx(AlertTickIcon, {}),
+				className: "ef-banner-alert__button"
+			})]
+		})
+	] });
+}
+//#endregion
+//#region src/game/full-width-alert/FullWidthAlert.tsx
+/** 横贯视口的确认面板，底部按钮突出于面板下沿。 */
+function FullWidthAlert({ hideCancel = false, cancelText = "取消", confirmText = "确认", showIcon = true, height = "auto", classNames, children, ...props }) {
+	return /* @__PURE__ */ jsx(AlertModal, {
+		...props,
+		hideCancel,
+		height,
+		classNames,
+		popupClassName: "ef-full-width-alert",
+		backdropClassName: "ef-full-width-alert-backdrop",
+		viewportClassName: "ef-full-width-alert-viewport",
+		children: ({ open, busy, cancelRef, confirmRef, cancel, confirm }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs("div", {
+				"aria-hidden": "true",
+				className: "ef-full-width-alert-decoration",
+				children: [
+					/* @__PURE__ */ jsx("span", { className: "ef-full-width-alert-logo" }),
+					/* @__PURE__ */ jsx("span", { className: "ef-full-width-alert-color-bar" }),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ef-full-width-alert-banner",
+						children: [/* @__PURE__ */ jsx("span", { className: "ef-full-width-alert-banner-left" }), /* @__PURE__ */ jsx("span", { className: "ef-full-width-alert-banner-right" })]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("ef-full-width-alert-content", alertSlotClass(classNames?.content, open)),
+				children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+					className: "ef-full-width-alert-scroll-area",
+					children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+						className: "ef-full-width-alert-viewport-content",
+						style: { overflowX: "hidden" },
+						render: (viewportProps, state) => /* @__PURE__ */ jsx("div", {
+							...viewportProps,
+							role: state.hasOverflowY ? "region" : "presentation",
+							"aria-label": state.hasOverflowY ? "内容" : void 0,
+							tabIndex: state.hasOverflowY ? 0 : -1
+						}),
+						children: /* @__PURE__ */ jsx(ScrollArea.Content, {
+							className: "ef-full-width-alert-body",
+							children
+						})
+					}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+						orientation: "vertical",
+						className: "ef-full-width-alert-scrollbar",
+						children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "ef-full-width-alert-thumb" })
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ef-full-width-alert-actions",
+				children: [!hideCancel && /* @__PURE__ */ jsxs("div", {
+					className: "ef-full-width-alert-action",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "ef-full-width-alert-action-backing"
+					}), /* @__PURE__ */ jsx(RoundedButton, {
+						ref: cancelRef,
+						variant: "default",
+						text: cancelText,
+						showIcon,
+						disabled: busy,
+						onClick: cancel,
+						icon: /* @__PURE__ */ jsx(AlertCloseIcon, {}),
+						className: "ef-full-width-alert-button"
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "ef-full-width-alert-action",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "ef-full-width-alert-action-backing"
+					}), /* @__PURE__ */ jsx(RoundedButton, {
+						ref: confirmRef,
+						variant: "primary",
+						text: confirmText,
+						showIcon,
+						loading: busy,
+						disabled: busy,
+						onClick: confirm,
+						icon: /* @__PURE__ */ jsx(AlertTickIcon, {}),
+						className: "ef-full-width-alert-button"
+					})]
+				})]
+			})
+		] })
+	});
+}
+//#endregion
+//#region src/game/item-icon/helpers.ts
+const EMPTY_ITEM_ICON_LAYERS = {
+	iconUrl: "",
+	iconBgUrl: "",
+	iconMarkUrl: "",
+	iconOverlayUrl: "",
+	iconContentUrl: "",
+	iconTrans: "",
+	iconShowRarity: true
+};
+const ITEM_ICON_TRANSFORMS = {
+	formula: {
+		scale: .72,
+		pivotX: 1,
+		pivotY: .5
+	},
+	bigGem: {
+		scale: 1,
+		offsetX: 3,
+		offsetY: 4
+	}
+};
+function itemIconTransformStyle(key) {
+	const variable = (part, fallback) => `var(--ef-game-iicon-${key}-${part}, ${fallback})`;
+	if (key === "formula") {
+		const values = ITEM_ICON_TRANSFORMS.formula;
+		return {
+			transform: `scale(${variable("scale", values.scale)})`,
+			transformOrigin: `calc(${variable("pivot-x", values.pivotX)} * 100%) calc((1 - ${variable("pivot-y", values.pivotY)}) * 100%)`
+		};
+	}
+	const values = ITEM_ICON_TRANSFORMS.bigGem;
+	return {
+		transform: `translate(calc(${variable("offset-x", values.offsetX)} * 1%), calc(${variable("offset-y", values.offsetY)} * -1%)) scale(${variable("scale", values.scale)})`,
+		transformOrigin: "50% 50%"
+	};
+}
+function coerceItemIconTrans(value) {
+	return value === "formula" || value === "bigGem" ? value : "";
+}
+function pickItemIconLayers(source, prefix = "icon") {
+	const values = source ?? {};
+	const key = (name) => prefix === "icon" ? name : `${prefix}${name.slice(0, 1).toUpperCase()}${name.slice(1)}`;
+	const stringValue = (name) => {
+		const value = values[key(name)];
+		return typeof value === "string" ? value : "";
+	};
+	const showRarity = values[key("iconShowRarity")];
+	return {
+		iconUrl: stringValue("iconUrl"),
+		iconBgUrl: stringValue("iconBgUrl"),
+		iconMarkUrl: stringValue("iconMarkUrl"),
+		iconOverlayUrl: stringValue("iconOverlayUrl"),
+		iconContentUrl: stringValue("iconContentUrl"),
+		iconTrans: coerceItemIconTrans(values[key("iconTrans")]),
+		iconShowRarity: typeof showRarity === "boolean" ? showRarity : true
+	};
+}
+//#endregion
+//#region src/game/item-icon/ItemIcon.tsx
+function ItemImage({ src, alt, className, style, loading = "lazy", fallback = null }) {
+	const [failed, setFailed] = useState(false);
+	if (!src.trim() || failed) return /* @__PURE__ */ jsx(Fragment$1, { children: fallback });
+	return /* @__PURE__ */ jsx("img", {
+		src,
+		alt,
+		className,
+		style,
+		loading,
+		decoding: "async",
+		draggable: false,
+		onError: () => setFailed(true)
+	});
+}
+function ItemIcon({ layers, alt, className, style, fallback = null, loading, renderImage }) {
+	const trans = coerceItemIconTrans(layers.iconTrans);
+	const hasOverlay = Boolean(layers.iconOverlayUrl);
+	const iconStyle = trans === "formula" ? itemIconTransformStyle("formula") : trans === "bigGem" && !hasOverlay ? itemIconTransformStyle("bigGem") : void 0;
+	const overlayStyle = trans === "bigGem" ? itemIconTransformStyle("bigGem") : void 0;
+	const renderLayer = (role, props) => /* @__PURE__ */ jsx(Fragment, { children: renderImage ? renderImage(props) : /* @__PURE__ */ jsx(ItemImage, { ...props }) }, `${role}:${props.src}`);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("ef-composite-item-icon", className),
+		style,
+		children: [
+			layers.iconBgUrl && renderLayer("background", {
+				src: layers.iconBgUrl,
+				alt: "",
+				className: "ef-composite-item-icon__layer",
+				loading
+			}),
+			renderLayer("art", {
+				src: layers.iconUrl,
+				alt,
+				className: "ef-composite-item-icon__layer ef-composite-item-icon__art",
+				style: iconStyle,
+				loading,
+				fallback
+			}),
+			hasOverlay && renderLayer("overlay", {
+				src: layers.iconOverlayUrl ?? "",
+				alt: "",
+				className: "ef-composite-item-icon__layer ef-composite-item-icon__overlay",
+				style: overlayStyle,
+				loading
+			}),
+			layers.iconContentUrl && renderLayer("content", {
+				src: layers.iconContentUrl,
+				alt: "",
+				className: "ef-composite-item-icon__layer",
+				style: {
+					transform: `scale(${80 / 180})`,
+					transformOrigin: "50% 50%"
+				},
+				loading
+			}),
+			layers.iconMarkUrl && renderLayer("mark", {
+				src: layers.iconMarkUrl,
+				alt: "",
+				className: "ef-composite-item-icon__layer",
+				loading
+			})
+		]
+	});
+}
+//#endregion
+//#region src/game/item-card/ItemCard.tsx
+const KIND_LABEL = {
+	weapon: "武器",
+	item: "物品",
+	enemy: "敌人"
+};
+function isItemKind(kind) {
+	return kind === "weapon" || kind === "item" || kind === "enemy";
+}
+function clampRarity(rarity) {
+	return Math.min(Math.max(Math.trunc(rarity), 1), 6);
+}
+function nameFontSize(name) {
+	let em = 0;
+	for (const character of name) em += (character.codePointAt(0) ?? 0) < 11904 ? .5 : 1;
+	return em > 0 ? `clamp(9px, calc(100cqw / ${em}), 14px)` : void 0;
+}
+/** Wiki 物品卡片：名称横条或库存数量横条，共用完整图层图标。 */
+const ItemCard = memo(function ItemCard({ kind, name, imageUrl, rarity, itemId, href, variant = "banner", count = 0, showName = true, className, style, icon, action, badges, ariaLabel, fallback, renderImage, renderLink, renderName, renderCount }) {
+	if (!isItemKind(kind)) return null;
+	const hasRarity = Number.isFinite(rarity) && rarity > 0 && (icon?.iconShowRarity ?? true);
+	const inventory = variant === "inventory";
+	const layers = {
+		...EMPTY_ITEM_ICON_LAYERS,
+		...icon,
+		iconUrl: imageUrl
+	};
+	const label = ariaLabel || name || KIND_LABEL[kind];
+	const renderedName = renderName ? renderName(name) : name || "—";
+	const tile = /* @__PURE__ */ jsxs("div", {
+		className: "ef-item-card-tile",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "ef-item-card-background"
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "ef-item-card-art",
+				children: /* @__PURE__ */ jsx(ItemIcon, {
+					layers,
+					alt: name,
+					className: "ef-item-card-icon",
+					renderImage,
+					fallback: fallback === void 0 ? /* @__PURE__ */ jsx("span", {
+						className: "ef-item-card-fallback",
+						children: "NO IMAGE"
+					}) : fallback
+				})
+			}),
+			badges ? /* @__PURE__ */ jsx("div", {
+				className: "ef-item-card-badges",
+				children: badges
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: "ef-item-card-strip",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "ef-item-card-edge"
+				}), /* @__PURE__ */ jsx("div", {
+					className: "ef-item-card-strip-content",
+					children: inventory ? /* @__PURE__ */ jsx("span", {
+						className: "ef-item-card-count",
+						children: renderCount ? renderCount(count) : count > 0 ? count : "\xA0"
+					}) : /* @__PURE__ */ jsx("span", {
+						className: "ef-item-card-name",
+						style: { fontSize: nameFontSize(name) },
+						title: name,
+						children: showName ? renderedName : "\xA0"
+					})
+				})]
+			})
+		]
+	});
+	const inner = /* @__PURE__ */ jsxs("div", {
+		className: cn("ef-item-card", className),
+		style,
+		"data-kind": kind,
+		"data-variant": variant,
+		"data-rarity": hasRarity ? clampRarity(rarity) : void 0,
+		"data-item-tooltip-id": !action && !href && kind === "item" ? itemId : void 0,
+		children: [tile, inventory && showName && /* @__PURE__ */ jsx("span", {
+			className: "ef-item-card-caption",
+			title: name,
+			children: renderedName
+		})]
+	});
+	if (action) return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: action.onSelect,
+		disabled: action.disabled,
+		"aria-pressed": action.selected,
+		"aria-label": [action.ariaLabel || label, action.disabledReason].filter(Boolean).join(" · "),
+		className: "ef-item-card-action",
+		"data-selected": action.selected ? "" : void 0,
+		children: [inner, action.disabledReason && /* @__PURE__ */ jsx("span", {
+			className: "ef-item-card-disabled-reason",
+			children: action.disabledReason
+		})]
+	});
+	if (href) {
+		const linkProps = {
+			href,
+			children: inner,
+			className: "ef-item-card-link",
+			"aria-label": label,
+			"data-item-tooltip-id": kind === "item" ? itemId : void 0
+		};
+		return renderLink ? renderLink(linkProps) : /* @__PURE__ */ jsx("a", { ...linkProps });
+	}
+	return inner;
+});
+//#endregion
+//#region src/game/item-tooltip-card/icons.tsx
+function ObtainFallbackIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M12 22V12M20.27 18.27 22 20" }),
+			/* @__PURE__ */ jsx("path", { d: "M21 10.498V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.729l7 4a2 2 0 0 0 2 .001l.98-.559" }),
+			/* @__PURE__ */ jsx("path", { d: "M3.29 7 12 12l8.71-5M7.5 4.27l8.997 5.148" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "18.5",
+				cy: "16.5",
+				r: "2.5"
+			})
+		]
+	});
+}
+function ObtainLinkIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		className: "ef-item-tooltip-card__chevrons",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "3",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		children: /* @__PURE__ */ jsx("path", { d: "m6 17 5-5-5-5m7 10 5-5-5-5" })
+	});
+}
+//#endregion
+//#region src/game/item-tooltip-card/ItemTooltipCard.tsx
+const plainText = (text) => text;
+const defaultLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
+/** 固定灰色游戏皮肤的物品详情；文章路由与富文本由使用方接入。 */
+function ItemTooltipCard({ item, className, style, fontFamily, obtainLabel = "获取途径", renderText = plainText, renderImage, renderLink = defaultLink }) {
+	const rarity = Number.isFinite(item.rarity) ? Math.min(6, Math.max(1, Math.trunc(item.rarity))) : 1;
+	const obtainWays = item.obtainWays ?? [];
+	return /* @__PURE__ */ jsxs("article", {
+		className: cn("ef-item-tooltip-card", className),
+		style: {
+			fontFamily,
+			...style
+		},
+		"data-rarity": rarity,
+		children: [
+			/* @__PURE__ */ jsxs("header", {
+				className: "ef-item-tooltip-card__header",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "ef-item-tooltip-card__header-texture"
+					}),
+					/* @__PURE__ */ jsx("h2", { children: item.name }),
+					item.href && renderLink({
+						href: item.href,
+						className: "ef-item-tooltip-card__detail-link",
+						"aria-label": item.name,
+						children: /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							className: "ef-item-tooltip-card__detail-link-icon"
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "ef-item-tooltip-card__body",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "ef-item-tooltip-card__detail-texture"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "ef-item-tooltip-card__hero",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "ef-item-tooltip-card__category",
+								children: item.category
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "ef-item-tooltip-card__marker"
+							}),
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								className: "ef-item-tooltip-card__barcode"
+							}),
+							/* @__PURE__ */ jsx(ItemIcon, {
+								layers: {
+									...pickItemIconLayers(item),
+									iconBgUrl: "",
+									iconMarkUrl: ""
+								},
+								alt: item.name,
+								loading: "eager",
+								className: "ef-item-tooltip-card__icon",
+								renderImage
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "ef-item-tooltip-card__color-strip"
+					}),
+					(item.usage || item.description) && /* @__PURE__ */ jsxs("div", {
+						className: "ef-item-tooltip-card__text",
+						children: [item.usage && /* @__PURE__ */ jsx("p", { children: renderText(item.usage) }), item.description && /* @__PURE__ */ jsx("p", {
+							className: "ef-item-tooltip-card__description",
+							children: renderText(item.description)
+						})]
+					})
+				]
+			}),
+			(obtainWays.length > 0 || item.noObtainWayHint) && /* @__PURE__ */ jsxs("section", {
+				"aria-label": obtainLabel,
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: "ef-item-tooltip-card__obtain-title",
+						children: obtainLabel
+					}),
+					/* @__PURE__ */ jsx("ul", {
+						className: "ef-item-tooltip-card__obtain-list",
+						children: obtainWays.map((way, index) => {
+							const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+								/* @__PURE__ */ jsx(ItemIcon, {
+									layers: { iconUrl: way.iconUrl ?? "" },
+									alt: "",
+									loading: "eager",
+									className: "ef-item-tooltip-card__obtain-icon",
+									renderImage,
+									fallback: /* @__PURE__ */ jsx(ObtainFallbackIcon, {})
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "ef-item-tooltip-card__obtain-name",
+									children: renderText(way.name)
+								}),
+								way.href && /* @__PURE__ */ jsx(ObtainLinkIcon, {})
+							] });
+							return /* @__PURE__ */ jsx("li", { children: way.href ? renderLink({
+								href: way.href,
+								className: "ef-item-tooltip-card__obtain-row",
+								children: content
+							}) : /* @__PURE__ */ jsx("div", {
+								className: "ef-item-tooltip-card__obtain-row",
+								children: content
+							}) }, `${way.id ?? index}-${index}`);
+						})
+					}),
+					item.noObtainWayHint && /* @__PURE__ */ jsx("p", {
+						className: "ef-item-tooltip-card__obtain-hint",
+						children: renderText(item.noObtainWayHint)
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/game/item-hover-card/events.ts
+function bindItemHoverEvents(options, select, panel) {
+	const doc = options.root.ownerDocument ?? options.root;
+	const win = doc.defaultView;
+	let active = null;
+	let dismissed = null;
+	let focusedTrigger = null;
+	let pointerTarget = null;
+	let openTimer;
+	let closeTimer;
+	let shown = false;
+	let activeId;
+	let activeTarget = null;
+	const cancel = () => {
+		win.clearTimeout(openTimer);
+		win.clearTimeout(closeTimer);
+		openTimer = closeTimer = void 0;
+	};
+	const close = () => {
+		cancel();
+		active = null;
+		activeId = void 0;
+		activeTarget = null;
+		shown = false;
+		unwatch();
+		select(null);
+	};
+	const inPanel = (node) => node instanceof Node && Boolean(panel()?.contains(node));
+	const inside = (node) => inPanel(node) || node instanceof Node && Boolean(active?.contains(node));
+	const hostOf = (node) => {
+		if (!(node instanceof Element) || inPanel(node)) return null;
+		if (node.closest("[inert], [aria-disabled='true'], :disabled")) return null;
+		const host = node.closest("[data-item-tooltip-id]");
+		const scope = options.rootOf ? options.rootOf() : options.root;
+		if (!host || !scope?.contains(host)) return null;
+		if (host.closest("[inert], [aria-disabled='true'], :disabled")) return null;
+		return options.anchorOf(host) ? host : null;
+	};
+	const open = (host, delay, target) => {
+		if (host === dismissed) return;
+		dismissed = null;
+		win.clearTimeout(closeTimer);
+		closeTimer = void 0;
+		if (host === active && shown) {
+			activeTarget = target;
+			if (activeId !== host.dataset.itemTooltipId) {
+				activeId = host.dataset.itemTooltipId;
+				select(options.anchorOf(host));
+			}
+			return;
+		}
+		if (host === active && openTimer !== void 0 && delay > 0) return;
+		cancel();
+		active = host;
+		activeId = host.dataset.itemTooltipId;
+		activeTarget = target;
+		shown = false;
+		watch();
+		select(null);
+		openTimer = win.setTimeout(() => {
+			openTimer = void 0;
+			const anchor = host.isConnected && hostOf(target) === host ? options.anchorOf(host) : null;
+			if (active !== host) return;
+			if (!anchor) return close();
+			shown = true;
+			activeId = host.dataset.itemTooltipId;
+			select(anchor);
+		}, Math.max(0, delay));
+	};
+	const leave = () => {
+		if (inside(pointerTarget) || inside(doc.activeElement)) {
+			win.clearTimeout(closeTimer);
+			closeTimer = void 0;
+			return;
+		}
+		cancel();
+		closeTimer = win.setTimeout(close, Math.max(0, options.closeDelay));
+	};
+	const clearDismissed = (target, next) => {
+		if (target instanceof Node && dismissed?.contains(target) && !(next instanceof Node && dismissed.contains(next))) dismissed = null;
+	};
+	const pointerOver = (event) => {
+		if (event.pointerType === "touch") return;
+		pointerTarget = event.target;
+		if (inPanel(event.target)) return cancel();
+		const host = hostOf(event.target);
+		if (host) open(host, options.openDelay, event.target);
+	};
+	const pointerOut = (event) => {
+		if (event.pointerType === "touch") return;
+		pointerTarget = event.relatedTarget;
+		clearDismissed(event.target, event.relatedTarget);
+		if (active && inside(event.target) && !inside(event.relatedTarget)) leave();
+	};
+	const focusIn = (event) => {
+		if (inPanel(event.target)) return cancel();
+		const host = hostOf(event.target);
+		if (host) {
+			focusedTrigger = event.target instanceof HTMLElement ? event.target : host;
+			open(host, 0, event.target);
+		}
+	};
+	const focusOut = (event) => {
+		clearDismissed(event.target, event.relatedTarget);
+		if (active && inside(event.target) && !inside(event.relatedTarget)) leave();
+	};
+	const scroll = (event) => {
+		if (active && !inPanel(event.target)) close();
+	};
+	const dismiss = (restoreFocus = false) => {
+		const available = (node) => Boolean(node?.isConnected && !node.closest("[hidden],[inert],[aria-disabled='true'],:disabled"));
+		const restore = restoreFocus && inPanel(doc.activeElement) && active ? focusedTrigger && available(focusedTrigger) && active.contains(focusedTrigger) ? focusedTrigger : Array.from(active.querySelectorAll("a[href],button:not(:disabled),[tabindex='0']")).find(available) ?? (available(active) && active.matches("a[href],button,[tabindex]") ? active : null) ?? (available(active.closest("[role='dialog']")) ? active.closest("[role='dialog']") : null) : null;
+		dismissed = active;
+		close();
+		if (restore?.isConnected) restore.focus({ preventScroll: true });
+	};
+	const listeners = [
+		["pointerover", pointerOver],
+		["pointerout", pointerOut],
+		["focusin", focusIn],
+		["focusout", focusOut]
+	];
+	for (const [type, listener] of listeners) doc.addEventListener(type, listener);
+	const mutation = new MutationObserver(() => {
+		if (!active) return;
+		if (hostOf(activeTarget) !== active || !active.isConnected) return dismiss(true);
+		if (shown && activeId !== active.dataset.itemTooltipId) {
+			activeId = active.dataset.itemTooltipId;
+			const anchor = options.anchorOf(active);
+			if (anchor) select(anchor);
+			else dismiss(true);
+		}
+	});
+	let watching = false;
+	function watch() {
+		if (watching) return;
+		watching = true;
+		mutation.observe(doc, {
+			subtree: true,
+			childList: true,
+			attributes: true,
+			attributeFilter: [
+				"data-item-tooltip-id",
+				"disabled",
+				"inert",
+				"aria-disabled"
+			]
+		});
+		win.addEventListener("scroll", scroll, true);
+		win.addEventListener("resize", close);
+	}
+	function unwatch() {
+		if (!watching) return;
+		watching = false;
+		mutation.disconnect();
+		win.removeEventListener("scroll", scroll, true);
+		win.removeEventListener("resize", close);
+	}
+	return {
+		close,
+		dismiss,
+		dispose() {
+			cancel();
+			unwatch();
+			for (const [type, listener] of listeners) doc.removeEventListener(type, listener);
+		}
+	};
+}
+//#endregion
+//#region src/game/item-hover-card/ItemHoverCard.tsx
+/** 一个监听层为网格内所有 data-item-tooltip-id 提供物品预览。 */
+function ItemHoverCardLayer({ resolveItem, root, rootRef, disabled = false, disableOnMobile = true, openDelay = 180, closeDelay = 160, gap = 8, width = 320, className, style, cardProps, onOpenChange }) {
+	const [anchor, setAnchor] = useState(null);
+	const panelRef = useRef(null);
+	const controls = useRef(null);
+	const binding = useRef(null);
+	const resolveRef = useRef(resolveItem);
+	const scopeRef = useRef({
+		root,
+		rootRef
+	});
+	const changeRef = useRef(onOpenChange);
+	useLayoutEffect(() => {
+		resolveRef.current = resolveItem;
+		scopeRef.current = {
+			root,
+			rootRef
+		};
+		changeRef.current = onOpenChange;
+	});
+	const close = useCallback(() => controls.current?.close(), []);
+	useEffect(() => {
+		const delegateRoot = disabled ? null : rootRef?.current ?? root ?? document;
+		const previous = binding.current;
+		const delegateDocument = delegateRoot ? delegateRoot.ownerDocument ?? delegateRoot : null;
+		const scope = rootRef ? rootRef.current : root ?? delegateRoot;
+		if (anchor && !scope?.contains(anchor.host)) controls.current?.close();
+		if (previous && previous.root === delegateDocument && previous.disableOnMobile === disableOnMobile && previous.openDelay === openDelay && previous.closeDelay === closeDelay) return;
+		previous?.dispose();
+		binding.current = null;
+		if (!delegateRoot) return;
+		const media = (delegateRoot.ownerDocument ?? delegateRoot).defaultView.matchMedia("(min-width: 768px) and (hover: hover) and (pointer: fine)");
+		const bind = () => {
+			controls.current?.close();
+			controls.current?.dispose();
+			controls.current = null;
+			if (disableOnMobile && !media.matches) return;
+			controls.current = bindItemHoverEvents({
+				root: delegateRoot,
+				rootOf: () => {
+					const scope = scopeRef.current;
+					return scope.rootRef ? scope.rootRef.current : scope.root ?? delegateDocument;
+				},
+				anchorOf: (host) => {
+					const itemId = host.dataset.itemTooltipId;
+					return itemId && resolveRef.current(itemId, host) ? {
+						host,
+						itemId
+					} : null;
+				},
+				openDelay,
+				closeDelay
+			}, setAnchor, () => panelRef.current);
+		};
+		bind();
+		media.addEventListener("change", bind);
+		binding.current = {
+			root: delegateDocument,
+			disableOnMobile,
+			openDelay,
+			closeDelay,
+			dispose: () => {
+				media.removeEventListener("change", bind);
+				controls.current?.close();
+				controls.current?.dispose();
+				controls.current = null;
+			}
+		};
+	});
+	useEffect(() => () => {
+		binding.current?.dispose();
+		binding.current = null;
+	}, []);
+	const currentId = anchor?.host.dataset.itemTooltipId;
+	const item = !disabled && anchor && currentId ? resolveItem(currentId, anchor.host) : null;
+	const activeId = item ? currentId ?? null : null;
+	useEffect(() => {
+		changeRef.current?.(Boolean(activeId), activeId);
+	}, [activeId]);
+	if (!anchor || !item) return null;
+	return /* @__PURE__ */ jsx(ItemHoverPanel, {
+		anchor,
+		item,
+		panelRef,
+		close,
+		dismiss: (restore) => controls.current?.dismiss(restore),
+		gap,
+		width,
+		className,
+		style,
+		cardProps
+	});
+}
+function ItemHoverPanel({ anchor, item, panelRef, close, dismiss, gap, width, className, style, cardProps }) {
+	const id = useId();
+	const { anchorRef, portalRef } = usePortalScope();
+	useLayoutEffect(() => {
+		const doc = anchor.host.ownerDocument;
+		const attributes = [
+			"aria-controls",
+			"aria-expanded",
+			"aria-haspopup"
+		];
+		let trigger = null;
+		let previous = [];
+		const restoreAria = () => {
+			if (!trigger) return;
+			attributes.forEach((name, index) => {
+				const value = previous[index];
+				if (value == null) trigger?.removeAttribute(name);
+				else trigger?.setAttribute(name, value);
+			});
+		};
+		const syncAria = () => {
+			const next = anchor.host.contains(doc.activeElement) ? doc.activeElement : anchor.host;
+			if (next === trigger) return;
+			restoreAria();
+			trigger = next;
+			previous = attributes.map((name) => trigger.getAttribute(name));
+			trigger.setAttribute("aria-controls", id);
+			trigger.setAttribute("aria-expanded", "true");
+			trigger.setAttribute("aria-haspopup", "dialog");
+		};
+		syncAria();
+		const focusPanel = (event) => {
+			if (event.defaultPrevented) return;
+			const first = panelRef.current?.querySelector("a[href],button:not(:disabled),[tabindex='0']");
+			if (event.key === "Tab" && !first) {
+				flushSync(close);
+				return;
+			}
+			if (event.key === "ArrowDown" && first) {
+				event.preventDefault();
+				first.focus({ preventScroll: true });
+			}
+		};
+		anchor.host.addEventListener("keydown", focusPanel);
+		anchor.host.addEventListener("focusin", syncAria);
+		return () => {
+			anchor.host.removeEventListener("keydown", focusPanel);
+			anchor.host.removeEventListener("focusin", syncAria);
+			restoreAria();
+		};
+	}, [
+		anchor.host,
+		close,
+		id,
+		panelRef
+	]);
+	useEffect(() => {
+		const observer = typeof IntersectionObserver === "undefined" ? null : new IntersectionObserver((entries) => {
+			if (entries.some((entry) => !entry.isIntersecting)) close();
+		});
+		observer?.observe(anchor.host);
+		return () => observer?.disconnect();
+	}, [anchor.host, close]);
+	return /* @__PURE__ */ jsx(Popover.Root, {
+		open: true,
+		onOpenChange: (open, details) => {
+			if (open) return;
+			if (details.reason === "focus-out") details.cancel();
+			else dismiss(details.reason === "escape-key");
+		},
+		children: /* @__PURE__ */ jsx(Popover.Portal, {
+			ref: (node) => {
+				anchorRef(anchor.host);
+				portalRef(node);
+			},
+			container: anchor.host.closest("dialog,[role='dialog'],[role='alertdialog']") ?? void 0,
+			children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				anchor: anchor.host,
+				positionMethod: "fixed",
+				side: "right",
+				align: "start",
+				sideOffset: gap,
+				collisionBoundary: [],
+				collisionPadding: 8,
+				collisionAvoidance: {
+					side: "flip",
+					align: "shift"
+				},
+				className: "ef-item-hover-positioner",
+				style: {
+					width,
+					...style
+				},
+				children: /* @__PURE__ */ jsx(Popover.Popup, {
+					ref: panelRef,
+					id,
+					"aria-label": item.name,
+					initialFocus: false,
+					finalFocus: false,
+					"data-item-tooltip-panel": "",
+					className: cn("ef-item-hover-panel", className),
+					children: /* @__PURE__ */ jsx(ItemTooltipCard, {
+						...cardProps,
+						item
+					})
+				})
+			})
+		})
+	});
+}
+function ItemHoverCard({ item, children, triggerProps, ...layerProps }) {
+	const rootRef = useRef(null);
+	const itemId = useId();
+	return /* @__PURE__ */ jsxs("span", {
+		...triggerProps,
+		className: cn("ef-item-hover-trigger", triggerProps?.className),
+		ref: rootRef,
+		"data-item-tooltip-id": itemId,
+		children: [children, /* @__PURE__ */ jsx(ItemHoverCardLayer, {
+			...layerProps,
+			rootRef,
+			resolveItem: () => item
+		})]
+	});
+}
+//#endregion
+//#region src/game/rounded-button/RoundedIconButton.tsx
+/** 24px 圆形图标按钮；纹理与双边线只作装饰。 */
+function RoundedIconButton({ type = "button", disabled = false, children, className, ...props }) {
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		type,
+		disabled,
+		className: cn("ef-rounded-icon-button", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "ef-rounded-icon-button-texture"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "ef-rounded-icon-button-border"
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "ef-rounded-icon-button-content",
+				children
+			})
+		]
+	});
+}
+//#endregion
+//#region src/game/rounded-select/RoundedSelect.tsx
+/** 圆角触发器与半覆盖面板；隐藏项不进入列表，禁用项不能选择。 */
+function RoundedSelect({ options, value, defaultValue, onValueChange, placeholder, name, form, required: requiredProp, disabled: disabledProp, invalid: invalidProp, open, defaultOpen = false, onOpenChange, id: idProp, "aria-label": ariaLabel, "aria-describedby": describedByProp, className, classNames, ref }) {
+	const { id, disabled, required, invalid, ...field } = useFieldControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		invalid: invalidProp,
+		"aria-describedby": describedByProp
+	});
+	const [expanded, setExpanded] = useControllableState({
+		value: open,
+		defaultValue: defaultOpen
+	});
+	const [currentValue, setCurrentValue] = useControllableState({
+		value,
+		defaultValue: defaultValue ?? null,
+		onChange: (next) => {
+			if (next !== null) onValueChange?.(next);
+		}
+	});
+	if (disabled && expanded && open === void 0) setExpanded(false);
+	const popupOpen = expanded && !disabled;
+	const [hovered, setHovered] = useState(false);
+	const [pressed, setPressed] = useState(false);
+	const boxRef = useRef(null);
+	const { anchorRef, portalRef } = usePortalScope();
+	return /* @__PURE__ */ jsxs(Select.Root, {
+		items: options,
+		value: currentValue,
+		onValueChange: setCurrentValue,
+		name,
+		form,
+		required,
+		disabled,
+		modal: false,
+		open: popupOpen,
+		onOpenChange: (next) => {
+			setExpanded(next);
+			if (next !== expanded) onOpenChange?.(next);
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: (node) => {
+				boxRef.current = node;
+				anchorRef(node);
+			},
+			className: cn("ef-rounded-select", className, classNames?.container),
+			"data-invalid": invalid ? "" : void 0,
+			children: /* @__PURE__ */ jsx(Select.Trigger, {
+				ref,
+				id,
+				"aria-label": ariaLabel,
+				"aria-invalid": invalid || void 0,
+				"aria-describedby": field["aria-describedby"],
+				className: cn("ef-rounded-select-trigger", classNames?.trigger),
+				onPointerEnter: (event) => setHovered(event.pointerType !== "touch"),
+				onPointerLeave: () => {
+					setHovered(false);
+					setPressed(false);
+				},
+				onPointerDown: (event) => setPressed(event.button === 0),
+				onPointerUp: () => setPressed(false),
+				onPointerCancel: () => setPressed(false),
+				children: /* @__PURE__ */ jsx(RoundedTriggerContent, { placeholder })
+			})
+		}), /* @__PURE__ */ jsx(Select.Portal, {
+			ref: portalRef,
+			children: /* @__PURE__ */ jsxs(Select.Positioner, {
+				anchor: boxRef,
+				alignItemWithTrigger: false,
+				side: "bottom",
+				align: "start",
+				sideOffset: -16,
+				className: "ef-rounded-select-positioner",
+				children: [/* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					className: cn("ef-rounded-select-trigger ef-rounded-select-mirror", classNames?.trigger),
+					"data-invalid": invalid ? "" : void 0,
+					"data-hovered": hovered ? "" : void 0,
+					"data-pressed": pressed ? "" : void 0,
+					children: /* @__PURE__ */ jsx(RoundedTriggerContent, { placeholder })
+				}), /* @__PURE__ */ jsx(Select.Popup, {
+					className: cn("ef-rounded-select-popup", classNames?.optionContainer),
+					children: /* @__PURE__ */ jsxs(ScrollArea.Root, {
+						className: cn("ef-rounded-select-scroll-area", classNames?.optionScrollArea),
+						children: [/* @__PURE__ */ jsx(ScrollArea.Viewport, {
+							className: "ef-rounded-select-viewport",
+							style: { overflowX: "hidden" },
+							render: /* @__PURE__ */ jsx(Select.List, { role: "listbox" }),
+							children: /* @__PURE__ */ jsx(ScrollArea.Content, { children: options.filter((option) => !option.hidden).map((option) => /* @__PURE__ */ jsx(Select.Item, {
+								value: option.value,
+								label: option.textValue,
+								disabled: disabled || option.disabled,
+								className: cn("ef-rounded-select-option", classNames?.option),
+								render: (itemProps, state) => {
+									const left = typeof option.left === "function" ? option.left(state.selected) : option.left;
+									const right = typeof option.right === "function" ? option.right(state.selected) : option.right;
+									return /* @__PURE__ */ jsxs("div", {
+										...itemProps,
+										children: [
+											left != null && /* @__PURE__ */ jsx("span", {
+												className: "ef-rounded-select-left",
+												children: left
+											}),
+											/* @__PURE__ */ jsx(Select.ItemText, {
+												className: "ef-rounded-select-option-label",
+												children: option.label
+											}),
+											right != null && /* @__PURE__ */ jsx("span", {
+												className: "ef-rounded-select-right",
+												children: right
+											}),
+											/* @__PURE__ */ jsx(RoundedOptionIndicator, {})
+										]
+									});
+								}
+							}, option.value)) })
+						}), /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
+							orientation: "vertical",
+							className: "ef-rounded-select-scrollbar",
+							children: /* @__PURE__ */ jsx(ScrollArea.Thumb, { className: "ef-rounded-select-thumb" })
+						})]
+					})
+				})]
+			})
+		})]
+	});
+}
+function RoundedTriggerContent({ placeholder }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Select.Value, {
+		placeholder,
+		className: "ef-rounded-select-value"
+	}), /* @__PURE__ */ jsx(Select.Icon, {
+		className: "ef-rounded-select-chevron",
+		children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			viewBox: "0 0 1024 1024",
+			width: "0.6em",
+			height: "0.6em",
+			fill: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M957.056 338.624C951.84 327.296 940.512 320 928 320H96c-12.512 0-23.84 7.296-29.088 18.624-5.216 11.36-3.328 24.704 4.768 34.208l416 485.344c6.08 7.104 14.944 11.2 24.288 11.2s18.208-4.096 24.288-11.2l416-485.344c8.096-9.472 9.952-22.88 4.768-34.208Z" })
+		})
+	})] });
+}
+function RoundedOptionIndicator() {
+	return /* @__PURE__ */ jsx("span", {
+		className: "ef-rounded-select-check",
+		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
+			"aria-hidden": "true",
+			width: "0.85em",
+			height: "0.85em",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "3",
+			children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+		}) })
+	});
+}
+//#endregion
+//#region src/game/rounded-toggle/keyboard.ts
+function roundedGroupBoundary(event) {
+	if (event.defaultPrevented || event.key !== "Home" && event.key !== "End") return;
+	const options = event.currentTarget.querySelectorAll("[data-rounded-option]:not([disabled]):not([aria-disabled=\"true\"])");
+	const target = event.key === "Home" ? options[0] : options[options.length - 1];
+	if (!target) return;
+	event.preventDefault();
+	target.focus();
+	target.click();
+}
+//#endregion
+//#region src/game/rounded-toggle/spring-highlight.ts
+const DURATION = 650;
+const SAMPLES = 65;
+/** stiffness 300、damping 30、mass 1 的位移响应。 */
+function roundedSpringProgress(milliseconds) {
+	const time = Math.max(0, milliseconds) / 1e3;
+	const frequency = Math.sqrt(75);
+	return 1 - Math.exp(-15 * time) * (Math.cos(frequency * time) + 15 / frequency * Math.sin(frequency * time));
+}
+const offsets = Array.from({ length: 66 }, (_, index) => ({
+	offset: index / SAMPLES,
+	time: index / SAMPLES * DURATION
+}));
+function springPosition(time, start, end, velocity) {
+	const seconds = time / 1e3;
+	const frequency = Math.sqrt(75);
+	return start + (end - start) * roundedSpringProgress(time) + velocity * Math.exp(-15 * seconds) * Math.sin(frequency * seconds) / frequency;
+}
+function springVelocity(time, start, end, velocity) {
+	const seconds = time / 1e3;
+	const frequency = Math.sqrt(75);
+	return Math.exp(-15 * seconds) * (velocity * Math.cos(frequency * seconds) + (300 * (end - start) - 15 * velocity) / frequency * Math.sin(frequency * seconds));
+}
+function translation(transform) {
+	if (transform === "none") return 0;
+	const values = transform.match(/^matrix\((.+)\)$/)?.[1]?.split(",");
+	return values ? Number.parseFloat(values[4] ?? "0") : 0;
+}
+function useSpringHighlight(target) {
+	const ref = useRef(null);
+	const previous = useRef(null);
+	const animation = useRef(null);
+	const movement = useRef({
+		start: 0,
+		end: 0,
+		velocity: 0
+	});
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const before = previous.current;
+		previous.current = target;
+		if (!target) {
+			animation.current?.cancel();
+			animation.current = null;
+			return;
+		}
+		const from = animation.current ? getComputedStyle(node).transform : (() => {
+			node.style.transform = before ?? target;
+			return getComputedStyle(node).transform;
+		})();
+		const active = animation.current;
+		const velocity = active?.playState === "running" && typeof active.currentTime === "number" ? springVelocity(active.currentTime, movement.current.start, movement.current.end, movement.current.velocity) : 0;
+		animation.current?.cancel();
+		animation.current = null;
+		node.style.transform = target;
+		const media = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		if (!before || media?.matches || typeof node.animate !== "function") return;
+		const start = translation(from);
+		const end = translation(getComputedStyle(node).transform);
+		if (Math.abs(end - start) < .01 && Math.abs(velocity) < .01) return;
+		movement.current = {
+			start,
+			end,
+			velocity
+		};
+		const running = node.animate(offsets.map(({ offset, time }) => ({
+			offset,
+			transform: `translateX(${offset === 1 ? end : springPosition(time, start, end, velocity)}px)`
+		})), {
+			duration: DURATION,
+			easing: "linear"
+		});
+		animation.current = running;
+		running.onfinish = () => {
+			if (animation.current === running) animation.current = null;
+		};
+	}, [target]);
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		const media = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+		const settle = () => {
+			animation.current?.cancel();
+			animation.current = null;
+		};
+		const reduced = () => {
+			if (media?.matches) settle();
+		};
+		media?.addEventListener("change", reduced);
+		const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(settle) : null;
+		observer?.observe(node);
+		return () => {
+			observer?.disconnect();
+			media?.removeEventListener("change", reduced);
+			settle();
+		};
+	}, []);
+	return ref;
+}
+//#endregion
+//#region src/game/rounded-switch/RoundedSwitch.tsx
+function RoundedSwitch({ checked, defaultChecked = false, onCheckedChange, onText = "ON", offText = "OFF", name, form, disabled: disabledProp, required: requiredProp, className, onKeyDown, ...props }) {
+	const field = useFieldContext();
+	const disabled = disabledProp ?? field?.disabled ?? false;
+	const required = requiredProp ?? field?.required ?? false;
+	const [current, setCurrent] = useControllableState({
+		value: checked,
+		defaultValue: defaultChecked,
+		onChange: onCheckedChange
+	});
+	const target = current ? "translateX(0%)" : "translateX(calc(100% - 1em))";
+	const highlightRef = useSpringHighlight(target);
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		...props,
+		"aria-labelledby": props["aria-labelledby"] ?? (field && !field.group ? field.labelId : void 0),
+		"aria-describedby": props["aria-describedby"] ?? field?.describedBy,
+		"aria-invalid": field?.invalid || void 0,
+		value: current,
+		name,
+		form,
+		disabled,
+		required,
+		className: cn("ef-rounded-switch", className),
+		onValueChange: (next) => {
+			if (!disabled) setCurrent(next);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			roundedGroupBoundary(event);
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: highlightRef,
+				"aria-hidden": "true",
+				className: "ef-rounded-switch__highlight",
+				style: { transform: target }
+			}),
+			/* @__PURE__ */ jsx(Radio.Root, {
+				value: true,
+				nativeButton: true,
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				"data-rounded-option": "",
+				className: "ef-rounded-switch__option",
+				children: /* @__PURE__ */ jsx("span", { children: onText })
+			}),
+			/* @__PURE__ */ jsx(Radio.Root, {
+				value: false,
+				nativeButton: true,
+				render: /* @__PURE__ */ jsx("button", { type: "button" }),
+				"data-rounded-option": "",
+				className: "ef-rounded-switch__option",
+				children: /* @__PURE__ */ jsx("span", { children: offText })
+			})
+		]
+	});
+}
+//#endregion
+//#region src/game/rounded-toggle/RoundedToggle.tsx
+function RoundedToggle({ options, value, defaultValue, onValueChange, label, name, form, required: requiredProp, disabled: disabledProp, className, onKeyDown, "aria-label": ariaLabel, ...props }) {
+	const field = useFieldContext();
+	const disabled = disabledProp ?? field?.disabled ?? false;
+	const required = requiredProp ?? field?.required ?? false;
+	const [current, setCurrent] = useControllableState({
+		value,
+		defaultValue,
+		onChange: (next) => {
+			if (next !== void 0) onValueChange?.(next);
+		}
+	});
+	const index = options.findIndex((option) => option.value === current);
+	const target = index >= 0 ? `translateX(${index * 100}%)` : null;
+	const highlightRef = useSpringHighlight(target);
+	return /* @__PURE__ */ jsxs(RadioGroup, {
+		...props,
+		"aria-label": ariaLabel ?? label,
+		"aria-labelledby": props["aria-labelledby"] ?? (field && !field.group ? field.labelId : void 0),
+		"aria-describedby": props["aria-describedby"] ?? field?.describedBy,
+		"aria-invalid": field?.invalid || void 0,
+		value: index >= 0 ? current : null,
+		name,
+		form,
+		disabled,
+		required,
+		className: cn("ef-rounded-toggle", className),
+		onValueChange: (next) => {
+			if (disabled || next === null || !options.some((option) => option.value === next && !option.disabled)) return;
+			setCurrent(next);
+		},
+		onKeyDown: (event) => {
+			onKeyDown?.(event);
+			roundedGroupBoundary(event);
+		},
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: highlightRef,
+			"aria-hidden": "true",
+			hidden: index < 0,
+			className: "ef-rounded-toggle__highlight",
+			style: options.length > 0 ? {
+				width: `${100 / options.length}%`,
+				transform: target ?? void 0
+			} : void 0
+		}), options.map((option) => /* @__PURE__ */ jsxs(Radio.Root, {
+			value: option.value,
+			disabled: option.disabled,
+			"aria-label": option["aria-label"],
+			nativeButton: true,
+			render: /* @__PURE__ */ jsx("button", { type: "button" }),
+			"data-rounded-option": "",
+			className: "ef-rounded-toggle__option",
+			children: [option.icon && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "ef-rounded-toggle__icon",
+				children: option.icon
+			}), /* @__PURE__ */ jsx("span", {
+				className: "ef-rounded-toggle__label",
+				children: option.label
+			})]
+		}, option.value))]
+	});
+}
+//#endregion
+export { AnimatedDialog, BannerAlert, EMPTY_ITEM_ICON_LAYERS, FullWidthAlert, ITEM_ICON_TRANSFORMS, ItemCard, ItemHoverCard, ItemHoverCardLayer, ItemIcon, ItemTooltipCard, RoundedButton, RoundedIconButton, RoundedSelect, RoundedSwitch, RoundedToggle, coerceItemIconTrans, itemIconTransformStyle, pickItemIconLayers };