@endfield-ui/react 0.3.0 → 1.0.0

package/dist/index.js

@@ -78,7 +78,8 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 		"fade-in",
 		"indeterminate",
 		"bracket-in",
-		"shift-in"
+		"shift-in",
+		"wipe-in"
 	]
 } } });
 function cn(...inputs) {
@@ -170,6 +171,74 @@ function AccordionItem({ value, title, extra, disabled, className, children, ...
 	});
 }
 //#endregion
+//#region src/hooks/usePresence.ts
+/** 循环的动画（加载指示那一类）等不到头，不等 */
+function ends(animation) {
+	return animation.effect?.getComputedTiming().iterations !== Infinity;
+}
+/**
+* 等这个元素上**正在跑的**、有尽头的过渡和动画走完，再调 `done`；一个都没有
+* （没有写退场的样式、测试环境里没有动效）就当场调。返回的函数取消这一次等待。
+*/
+function afterMotion(node, done) {
+	let live = true;
+	const finish = () => {
+		if (live) done();
+	};
+	const running = typeof node?.getAnimations === "function" ? node.getAnimations().filter(ends) : [];
+	if (running.length === 0) finish();
+	else Promise.allSettled(running.map((animation) => animation.finished)).then(finish);
+	return () => {
+		live = false;
+	};
+}
+/**
+* 退场后再卸载：`open` 变成假之后元素先留着，等它身上的动效走完才卸载。
+*
+* 等的是这个元素上**正在跑的**过渡和动画，不另抄一份时长；一个都没有
+* （没有写退场的样式、测试环境里没有动效）就当场卸载。退场途中又打开：不卸载，
+* 过渡自己折回去。
+*/
+function usePresence(open, { onLeave, onExited } = {}) {
+	const ref = useRef(null);
+	const [mounted, setMounted] = useState(open);
+	const [entered, setEntered] = useState(false);
+	if (open && !mounted) {
+		setMounted(true);
+		setEntered(true);
+	}
+	const leaving = !open && mounted;
+	const handlers = useRef({
+		onLeave,
+		onExited
+	});
+	useLayoutEffect(() => {
+		handlers.current = {
+			onLeave,
+			onExited
+		};
+	});
+	useLayoutEffect(() => {
+		if (!leaving) return;
+		const node = ref.current;
+		const undo = node ? handlers.current.onLeave?.(node) : void 0;
+		const cancel = afterMotion(node, () => {
+			setMounted(false);
+			handlers.current.onExited?.();
+		});
+		return () => {
+			cancel();
+			undo?.();
+		};
+	}, [leaving]);
+	return {
+		ref,
+		mounted,
+		leaving,
+		entered
+	};
+}
+//#endregion
 //#region src/icons/Close.tsx
 const Close = createIcon("Close", /* @__PURE__ */ jsx("path", { d: "M5 5l14 14M19 5L5 19" }));
 //#endregion
@@ -193,6 +262,15 @@ const StatusSuccess = createIcon("StatusSuccess", /* @__PURE__ */ jsxs(Fragment$
 /** 三角：警告 */
 const StatusWarning = createIcon("StatusWarning", /* @__PURE__ */ jsx("path", { d: "M12 4l9 16H3zM12 10v5M12 16.5v2" }));
 //#endregion
+//#region src/lib/merge-refs.ts
+/** 把几个 ref 合成一个：组件自己要用节点，同时还得把它交给使用方。 */
+function mergeRefs(...refs) {
+	return (node) => {
+		for (const ref of refs) if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	};
+}
+//#endregion
 //#region src/components/alert/Alert.tsx
 const toneIcon$1 = {
 	info: StatusInfo,
@@ -212,15 +290,43 @@ const toneText$1 = {
 	warning: "text-warning",
 	danger: "text-danger"
 };
+function collapseOut(node) {
+	const { style } = node;
+	const before = style.cssText;
+	let gap = 0;
+	if (node.parentElement) {
+		const layout = getComputedStyle(node.parentElement);
+		if (layout.display.includes("grid") || layout.display.includes("flex") && layout.flexDirection.startsWith("column")) gap = Number.parseFloat(layout.rowGap) || 0;
+	}
+	style.height = `${node.getBoundingClientRect().height}px`;
+	node.getBoundingClientRect();
+	style.height = "0px";
+	style.minHeight = "0px";
+	style.paddingBlock = "0px";
+	style.borderBlockWidth = "0px";
+	style.marginTop = "0px";
+	style.marginBottom = `${-gap}px`;
+	style.opacity = "0";
+	return () => {
+		style.cssText = before;
+	};
+}
 /** 页面内的一条常驻消息。需要用户处理的重要信息用它，不用会消失的轻提示。 */
-function Alert({ tone = "info", title, action, onClose, closeLabel = "关闭", icon, className, children, ...props }) {
+function Alert({ tone = "info", title, action, onClose, open = true, onExited, closeLabel = "关闭", icon, className, ref, children, ...props }) {
+	const { ref: rootRef, mounted, leaving } = usePresence(open, {
+		onLeave: collapseOut,
+		onExited
+	});
+	if (!mounted) return null;
 	const Icon = toneIcon$1[tone];
 	const graphic = icon === void 0 ? /* @__PURE__ */ jsx(Icon, { size: 20 }) : icon;
 	return /* @__PURE__ */ jsxs("div", {
 		role: tone === "danger" || tone === "warning" ? "alert" : "status",
 		...props,
+		ref: mergeRefs(rootRef, ref),
 		"data-tone": tone,
-		className: cn("flex items-start gap-3 border border-l-4 border-line bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink", toneBar[tone], className),
+		inert: leaving,
+		className: cn("flex items-start gap-3 border border-l-4 border-line bg-surface-raised py-3 pr-3 pl-3 text-sm text-ink", toneBar[tone], leaving && ["pointer-events-none overflow-hidden", "transition-[height,padding,margin,border-width,opacity] duration-(--duration-fast) ease-standard"], className),
 		children: [
 			graphic !== null && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
@@ -278,7 +384,7 @@ function Avatar({ name, src, alt = name ?? "", size = "md", selected = false, cl
 		},
 		"data-size": size,
 		"data-selected": selected ? "" : void 0,
-		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-clip rounded-full bg-surface-muted font-medium text-ink-secondary select-none", sizeClass$13[size], selected && "shadow-[0_0_0_2px_var(--ef-surface),0_0_0_5px_var(--ef-action),0_0_0_6px_var(--ef-ink)]", className),
+		className: cn("relative inline-flex shrink-0 items-center justify-center overflow-clip rounded-full bg-surface-muted font-medium text-ink-secondary select-none", sizeClass$13[size], selected && "shadow-[0_0_0_2px_var(--ef-surface),0_0_0_5px_var(--ef-action),0_0_0_6px_var(--ef-ink)] forced-colors:border-[3px] forced-colors:border-[Highlight]", className),
 		children: [src && /* @__PURE__ */ jsx(Avatar$1.Image, {
 			src,
 			alt: "",
@@ -319,7 +425,7 @@ const ChevronRight = createIcon("ChevronRight", /* @__PURE__ */ jsx("path", { d:
 //#endregion
 //#region src/components/icon-button/IconButton.tsx
 const sizeClass$12 = {
-	sm: "size-8 after:absolute after:-inset-1 after:content-[''] [&_svg]:size-4",
+	sm: "size-8 after:absolute after:-inset-1 after:content-[''] forced-colors:after:-inset-[5px] [&_svg]:size-4",
 	md: "size-10 [&_svg]:size-5",
 	lg: "size-12 [&_svg]:size-6"
 };
@@ -335,6 +441,10 @@ const pressedClass = {
 	accent: "bg-action text-on-action active:bg-action-pressed",
 	inverse: "bg-surface-inverse text-accent-ink-inverse"
 };
+const outlineForced = "forced-colors:border";
+const enabledForced = "forced-colors:border-[ButtonText]";
+const pressedForced = "forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]";
+const disabledForced = "forced-colors:border-[GrayText]";
 const disabledClass = {
 	plain: "cursor-not-allowed bg-surface-sunken text-ink-disabled",
 	floating: "cursor-not-allowed rounded-full bg-neutral-50 text-neutral-400 shadow-sm",
@@ -349,7 +459,7 @@ function IconButton({ variant = "plain", size = "md", pressed, disabled = false,
 		"aria-pressed": pressed,
 		"data-variant": variant,
 		"data-size": size,
-		className: cn("relative inline-flex shrink-0 items-center justify-center", "transition-colors duration-(--duration-fast) ease-standard", focusRing, sizeClass$12[size], disabled ? disabledClass[variant] : pressed ? pressedClass[variant] : enabledClass$1[variant], className),
+		className: cn("relative inline-flex shrink-0 items-center justify-center", "transition-colors duration-(--duration-fast) ease-standard", focusRing, sizeClass$12[size], outlineForced, disabled ? [disabledClass[variant], disabledForced] : pressed ? [pressedClass[variant], pressedForced] : [enabledClass$1[variant], enabledForced], className),
 		children
 	});
 }
@@ -608,27 +718,69 @@ function Badge({ count, max = 99, showZero = false, dot = false, label, classNam
 	});
 }
 //#endregion
+//#region src/hooks/useInView.ts
+/**
+* 元素第一次进入视口后返回 true，之后不再变回 false——入场动画只播一次。
+*/
+function useInView({ disabled = false, rootMargin = "0px", threshold = 0 } = {}) {
+	const ref = useRef(null);
+	const [inView, setInView] = useState(false);
+	useEffect(() => {
+		const node = ref.current;
+		if (disabled || inView || !node) return;
+		if (typeof IntersectionObserver === "undefined") {
+			setInView(true);
+			return;
+		}
+		const observer = new IntersectionObserver((entries) => {
+			if (entries.some((entry) => entry.isIntersecting)) {
+				setInView(true);
+				observer.disconnect();
+			}
+		}, {
+			rootMargin,
+			threshold
+		});
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, [
+		disabled,
+		inView,
+		rootMargin,
+		threshold
+	]);
+	return [ref, inView];
+}
+//#endregion
 //#region src/components/bracket-title/BracketTitle.tsx
 const bracket = "font-medium text-ink-tertiary";
 /**
 * 方括号标题 `[ 名称 ]`：人物、地点、物品的名称——"一个被归档的条目"。
 * 普通的分节标题用 `SectionTitle`。字号用 `className` 改，默认是名称用的 `text-4xl`。
 */
-function BracketTitle({ level = 3, className, children, ...props }) {
+function BracketTitle({ level = 3, animate = true, className, children, ref, ...props }) {
 	const Heading = `h${level}`;
+	const [inViewRef, inView] = useInView({ disabled: !animate });
+	const pending = animate && !inView;
+	const playing = animate && inView;
+	const bracketEnter = cn(pending && "opacity-0", playing && "animate-fade-in");
 	return /* @__PURE__ */ jsxs(Heading, {
 		...props,
+		ref: mergeRefs(inViewRef, ref),
 		className: cn("text-4xl font-bold wrap-anywhere text-ink", className),
 		children: [
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn(bracket, "mr-[0.4em]"),
+				className: cn(bracket, "mr-[0.4em]", bracketEnter),
 				children: "["
 			}),
-			children,
+			/* @__PURE__ */ jsx("span", {
+				className: cn(pending && "opacity-0", playing && "animate-fade-in [animation-delay:100ms]") || void 0,
+				children
+			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn(bracket, "ml-[0.4em]"),
+				className: cn(bracket, "ml-[0.4em]", bracketEnter),
 				children: "]"
 			})
 		]
@@ -747,7 +899,7 @@ const sizeClass$10 = {
 	sm: "size-3",
 	md: "size-4"
 };
-const square = "animate-spin bg-current motion-reduce:rotate-45 motion-reduce:animate-none";
+const square = ["animate-spin bg-current motion-reduce:rotate-45 motion-reduce:animate-none", "forced-colors:bg-[CanvasText]"].join(" ");
 /**
 * 行内加载指示：一个匀速旋转的小方块，颜色继承文字。
 * 圆环形的用 `<ProgressRing size={16} />`；整块内容加载用 `Skeleton`。
@@ -837,13 +989,17 @@ const enabledClass = {
 	back: "hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed",
 	text: "text-ink active:text-ink-secondary"
 };
+const forcedOutline = "forced-colors:border";
+const forcedEnabled = "forced-colors:border-[ButtonText]";
+const forcedDisabled = "forced-colors:border-[GrayText] forced-colors:text-[GrayText]";
 function Button(props) {
 	const { variant = "control", size = "md", iconStart, iconEnd, loading = false, loadingText, block = false, disabled = false, className, children, ...rest } = props;
 	const inert = disabled || loading;
 	const isText = variant === "text";
 	const marker = markerColor[variant];
 	const iconSize = inlineIconSize[size];
-	const classes = cn("group relative inline-flex shrink-0 items-center justify-center font-medium leading-none whitespace-nowrap select-none", "transition-colors duration-(--duration-fast) ease-standard", focusRing, sizeClass$9[size], marker && markerPadding[size], variant === "action" && actionPadding[size], variant === "back" && backPadding[size], isText && "h-auto border-b border-current py-1", disabled ? isText ? "cursor-not-allowed text-ink-disabled" : "cursor-not-allowed bg-disabled text-on-disabled" : enabledClass[variant], loading && "pointer-events-none", block && "flex w-full", className);
+	const forcedMark = disabled ? "forced-colors:bg-[GrayText]" : "forced-colors:bg-[ButtonText]";
+	const classes = cn("group relative inline-flex shrink-0 items-center justify-center font-medium leading-none whitespace-nowrap select-none", "transition-colors duration-(--duration-fast) ease-standard", focusRing, sizeClass$9[size], marker && markerPadding[size], variant === "action" && actionPadding[size], variant === "back" && backPadding[size], isText && "h-auto border-b border-current py-1", disabled ? isText ? "cursor-not-allowed text-ink-disabled" : "cursor-not-allowed bg-disabled text-on-disabled" : enabledClass[variant], !isText && forcedOutline, disabled ? forcedDisabled : !isText && forcedEnabled, loading && !disabled && "forced-colors:text-[ButtonText]", loading && "pointer-events-none", block && "flex w-full", className);
 	let start = iconStart;
 	let end = iconEnd;
 	if (variant === "back" && start === void 0) start = loading ? /* @__PURE__ */ jsx("span", {
@@ -854,7 +1010,7 @@ function Button(props) {
 		},
 		children: /* @__PURE__ */ jsx(Spinner, {
 			label: null,
-			className: "size-2"
+			className: cn("size-2", forcedMark)
 		})
 	}) : /* @__PURE__ */ jsx(ChevronLeft, { size: iconSize });
 	if (isText && end === void 0) end = loading ? /* @__PURE__ */ jsx("span", {
@@ -865,7 +1021,7 @@ function Button(props) {
 		},
 		children: /* @__PURE__ */ jsx(Spinner, {
 			label: null,
-			className: "size-2"
+			className: cn("size-2", forcedMark)
 		})
 	}) : /* @__PURE__ */ jsx(ArrowCorner, {
 		size: iconSize,
@@ -888,11 +1044,11 @@ function Button(props) {
 			className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2", markerSpinner[size]),
 			children: /* @__PURE__ */ jsx(Spinner, {
 				label: null,
-				className: cn("block size-full", marker)
+				className: cn("block size-full", marker, forcedMark)
 			})
 		}) : /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: cn("marker-bar pointer-events-none absolute top-1/2 -translate-y-1/2", "transition-[clip-path,translate] duration-(--duration-base) ease-standard", markerBox[size], disabled ? "bg-on-disabled" : [
+			className: cn("marker-bar pointer-events-none absolute top-1/2 -translate-y-1/2", "transition-[clip-path,translate] duration-(--duration-base) ease-standard", markerBox[size], forcedMark, disabled ? "bg-on-disabled" : [
 				marker,
 				"group-hover:marker-arrow group-active:marker-arrow",
 				markerShift[size]
@@ -903,12 +1059,12 @@ function Button(props) {
 		end,
 		variant === "action" && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: cn("pointer-events-none absolute top-[17.5%] h-[65%]", "transition-colors duration-(--duration-fast) ease-standard", actionDivider[size], disabled ? "bg-on-disabled/20" : "bg-on-action/10 group-hover:bg-on-action/15 group-active:bg-on-action/20")
+			className: cn("pointer-events-none absolute top-[17.5%] h-[65%]", "transition-colors duration-(--duration-fast) ease-standard", actionDivider[size], disabled ? "bg-on-disabled/20" : ["bg-on-action/10 group-hover:bg-on-action/15 group-active:bg-on-action/20", "forced-colors:group-hover:bg-[ButtonText] forced-colors:group-active:bg-[ButtonText]"], forcedMark)
 		}), loading && /* @__PURE__ */ jsx("span", {
 			className: cn("pointer-events-none absolute top-1/2 -translate-y-1/2", actionSpinner[size]),
 			children: /* @__PURE__ */ jsx(Spinner, {
 				label: null,
-				className: "block size-full"
+				className: cn("block size-full", forcedMark)
 			})
 		})] })
 	] });
@@ -1135,6 +1291,30 @@ function Calendar({ range = false, value: valueProp, defaultValue = null, onValu
 		pendingFocus.current = false;
 		gridRef.current?.querySelector(`[data-date="${focused}"]`)?.focus();
 	}, [focused, month]);
+	const turned = useRef({
+		month,
+		until: 0,
+		length: 0
+	});
+	useLayoutEffect(() => {
+		const last = turned.current;
+		if (last.month === month) return;
+		const forward = month > last.month;
+		last.month = month;
+		const grid = gridRef.current;
+		if (!grid) return;
+		const now = performance.now();
+		delete grid.dataset.turn;
+		if (now < last.until) {
+			last.until = now + last.length;
+			return;
+		}
+		grid.offsetWidth;
+		grid.dataset.turn = forward ? "next" : "previous";
+		const running = typeof grid.getAnimations === "function" ? grid.getAnimations()[0] : void 0;
+		last.length = Number(running?.effect?.getComputedTiming().endTime ?? 0);
+		last.until = now + last.length;
+	}, [month]);
 	const weeks = useMemo(() => monthGrid(month, weekStartsOn), [month, weekStartsOn]);
 	const formats = useMemo(() => ({
 		title: new Intl.DateTimeFormat(locale, {
@@ -1232,6 +1412,7 @@ function Calendar({ range = false, value: valueProp, defaultValue = null, onValu
 					children: formats.weekdayShort.format(toDateObject(date))
 				}, date)) }) }), /* @__PURE__ */ jsx("tbody", {
 					ref: gridRef,
+					className: "data-turn:animate-shift-in data-[turn=next]:[--shift-x:var(--motion-shift-lg)] data-[turn=previous]:[--shift-x:calc(var(--motion-shift-lg)*-1)]",
 					onPointerLeave: () => setHovered(null),
 					onKeyDown: (event) => {
 						if (event.key === "Escape" && anchor !== null) {
@@ -1278,7 +1459,7 @@ function Calendar({ range = false, value: valueProp, defaultValue = null, onValu
 								onClick: () => select(date),
 								onFocus: () => setFocused(date),
 								onPointerEnter: range ? () => setHovered(date) : void 0,
-								className: cn("relative flex size-10 items-center justify-center font-tech text-sm tabular-nums", "transition-colors duration-(--duration-fast) ease-standard", focusRingInset, endpoint ? "bg-surface-inverse font-bold text-ink-inverse" : [between ? "bg-ink/10" : previewing && "bg-ink/5", disabled ? "cursor-not-allowed text-ink-disabled line-through" : [outside ? "text-ink-tertiary" : "text-ink", between ? "hover:bg-ink/15" : "hover:bg-ink/5"]], isToday && "after:absolute after:bottom-1.5 after:left-1/2 after:h-0.5 after:w-3 after:-translate-x-1/2 after:content-['']", isToday && (endpoint ? "after:bg-accent-ink-inverse" : "after:bg-accent-ink")),
+								className: cn("relative flex size-10 items-center justify-center font-tech text-sm tabular-nums", "transition-colors duration-(--duration-fast) ease-standard", focusRingInset, endpoint ? "bg-surface-inverse font-bold text-ink-inverse focus-visible:outline-accent-ink-inverse forced-colors:forced-color-adjust-none forced-colors:bg-[Highlight] forced-colors:text-[HighlightText] forced-colors:focus-visible:-outline-offset-4 forced-colors:focus-visible:outline-[HighlightText]" : [between ? "bg-ink/10 forced-colors:border-y-2 forced-colors:border-[Highlight]" : previewing && "bg-ink/5", disabled ? "cursor-not-allowed text-ink-disabled line-through" : [outside ? "text-ink-tertiary" : "text-ink", between ? "hover:bg-ink/15" : "hover:bg-ink/5"]], isToday && "after:absolute after:bottom-1.5 after:left-1/2 after:h-0.5 after:w-3 after:-translate-x-1/2 after:content-['']", isToday && (endpoint ? "after:bg-accent-ink-inverse forced-colors:after:bg-[HighlightText]" : "after:bg-accent-ink forced-colors:after:bg-[CanvasText]")),
 								children: dateParts(date).day
 							})
 						}, date);
@@ -1309,7 +1490,7 @@ function DashIndicator({ count, index, className, ...props }) {
 		className: cn("inline-flex items-center gap-1", className),
 		children: Array.from({ length: total }, (_, position) => /* @__PURE__ */ jsx("span", {
 			"data-current": position === current ? "" : void 0,
-			className: cn("h-0.5 transition-[width,background-color] duration-(--duration-base) ease-standard", position === current ? "w-8 bg-accent-ink" : "w-4 bg-line-strong")
+			className: cn("h-0.5 transition-[width,background-color] duration-(--duration-base) ease-standard", position === current ? "w-8 bg-accent-ink forced-colors:bg-[Highlight]" : "w-4 bg-line-strong forced-colors:bg-[CanvasText]")
 		}, position))
 	});
 }
@@ -1510,27 +1691,18 @@ function CarouselSlide({ title: _title, description: _description, className, ch
 /** 对勾：已选、已完成 */
 const Check = createIcon("Check", /* @__PURE__ */ jsx("path", { d: "M4 12l6 6L20 6" }));
 //#endregion
-//#region src/lib/merge-refs.ts
-/** 把几个 ref 合成一个：组件自己要用节点，同时还得把它交给使用方。 */
-function mergeRefs(...refs) {
-	return (node) => {
-		for (const ref of refs) if (typeof ref === "function") ref(node);
-		else if (ref) ref.current = node;
-	};
-}
-//#endregion
 //#region src/components/checkbox/choice-style.ts
-const choiceLabel = "group inline-flex min-h-10 items-start gap-2 py-2 text-base text-ink has-disabled:cursor-not-allowed has-disabled:text-ink-disabled";
+const choiceLabel = "group inline-flex min-h-10 items-start gap-2 py-2 text-base text-ink has-disabled:cursor-not-allowed has-disabled:text-ink-disabled forced-colors:has-disabled:text-[GrayText]";
 /** 控件的定位盒：高度等于一行文字，标签换行时控件仍然对齐第一行 */
 const choiceControl = "flex h-[1lh] shrink-0 items-center";
-const choiceBox = "peer size-5 shrink-0 appearance-none border-2 choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:checked:disabled:bg-ink-disabled border-line-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard group-hover:border-ink-secondary checked:border-surface-inverse checked:bg-surface-inverse aria-invalid:border-danger disabled:cursor-not-allowed disabled:border-ink-disabled disabled:bg-surface-sunken";
+const choiceBox = ["peer size-5 shrink-0 appearance-none border-2 choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:checked:disabled:bg-ink-disabled border-line-strong bg-surface-sunken transition-colors duration-(--duration-fast) ease-standard group-hover:border-ink-secondary checked:border-surface-inverse checked:bg-surface-inverse aria-invalid:border-danger disabled:cursor-not-allowed disabled:border-ink-disabled disabled:bg-surface-sunken", "forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight] forced-colors:disabled:border-[GrayText] forced-colors:disabled:bg-[Canvas] forced-colors:choice-diamond:checked:disabled:bg-[GrayText]"].join(" ");
 /** 方格 / 圆的定位盒：菱形比它小一圈，所以居中 */
 const choiceFrame = "relative inline-flex size-5 items-center justify-center";
 /**
 * 压在方格 / 圆正中的记号，默认透明，由 peer 的状态点亮。
 * 淡入淡出，和方格换底色的那一下同时走——底色有过渡而记号硬切，看起来是两件事
 */
-const choiceMark = "pointer-events-none absolute inset-0 m-auto text-accent-ink-inverse opacity-0 transition-opacity duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled";
+const choiceMark = "pointer-events-none absolute inset-0 m-auto text-accent-ink-inverse opacity-0 transition-opacity duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled forced-colors:text-[HighlightText] forced-colors:peer-disabled:text-[GrayText]";
 //#endregion
 //#region src/components/checkbox/Checkbox.tsx
 /**
@@ -1559,7 +1731,7 @@ function Checkbox({ indeterminate = false, invalid = false, onCheckedChange, onC
 						type: "checkbox",
 						"aria-invalid": invalid || void 0,
 						onChange: handleChange,
-						className: cn(choiceBox, "indeterminate:border-surface-inverse indeterminate:bg-surface-inverse", focusRing)
+						className: cn(choiceBox, "indeterminate:border-surface-inverse indeterminate:bg-surface-inverse", "forced-colors:indeterminate:border-[Highlight] forced-colors:indeterminate:bg-[Highlight]", focusRing)
 					}),
 					/* @__PURE__ */ jsx(Check, {
 						size: 14,
@@ -1586,11 +1758,20 @@ const capsuleSize = {
 	sm: "h-7 px-3 text-xs",
 	md: "h-8 px-4 text-sm"
 };
+const forcedSelected = "forced-colors:forced-color-adjust-none forced-colors:focus-visible:outline-[Highlight]";
 const capsuleState = {
-	selected: "border-transparent bg-surface-inverse text-ink-inverse",
+	selected: [
+		"border-transparent bg-surface-inverse text-ink-inverse",
+		"forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+		forcedSelected
+	].join(" "),
 	rest: "border-line-strong text-ink hover:bg-ink/5",
 	disabled: "cursor-not-allowed border-line text-ink-disabled",
-	selectedDisabled: "cursor-not-allowed border-transparent bg-disabled text-on-disabled"
+	selectedDisabled: [
+		"cursor-not-allowed border-transparent bg-disabled text-on-disabled",
+		"forced-colors:border-[GrayText] forced-colors:bg-[GrayText] forced-colors:text-[Canvas]",
+		forcedSelected
+	].join(" ")
 };
 //#endregion
 //#region src/components/chip/FilterChip.tsx
@@ -1712,7 +1893,7 @@ function MenuCheck({ checked, disabled = false }) {
 		"data-checked": checked ? "" : void 0,
 		className: "flex size-4 shrink-0 items-center justify-center",
 		children: /* @__PURE__ */ jsx("span", {
-			className: cn("flex size-4 items-center justify-center border-2 transition-colors duration-(--duration-fast) ease-standard choice-diamond:size-3 choice-diamond:rotate-45", disabled ? ["border-ink-disabled bg-surface-sunken text-ink-disabled", checked && "choice-diamond:bg-ink-disabled"] : checked ? "border-surface-inverse bg-surface-inverse text-accent-ink-inverse" : "border-line-strong bg-surface-sunken"),
+			className: cn("flex size-4 items-center justify-center border-2 transition-colors duration-(--duration-fast) ease-standard choice-diamond:size-3 choice-diamond:rotate-45", disabled ? ["border-ink-disabled bg-surface-sunken text-ink-disabled", checked && "choice-diamond:bg-ink-disabled forced-colors:choice-diamond:bg-[GrayText]"] : checked ? "border-surface-inverse bg-surface-inverse text-accent-ink-inverse forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]" : "border-line-strong bg-surface-sunken"),
 			children: checked && /* @__PURE__ */ jsx(Check, {
 				size: 10,
 				strokeWidth: 4,
@@ -1738,6 +1919,54 @@ const enterFromSide = [
 	"data-starting-style:data-[side=inline-end]:-translate-x-(--motion-shift)",
 	"data-starting-style:data-[side=inline-start]:translate-x-(--motion-shift)"
 ].join(" ");
+/**
+* 按高度收放，不量高度：外面这一层是只有一行的网格，行高在 `0fr` 和 `1fr` 之间过渡；
+* 里面再套一层 `collapseInner`，裁掉还放不下的那一截。表格的明细行、字段下面的错误文字
+* 都这么收放——内容后来变高了也跟着走。
+*
+* 展开 300ms、收起 200ms。收起由 `data-leaving` 触发，配 `usePresence`：收完再卸载。
+*/
+const collapse = [
+	"grid grid-rows-[1fr]",
+	"transition-[grid-template-rows] duration-(--duration-base) ease-standard",
+	"data-leaving:grid-rows-[0fr] data-leaving:duration-(--duration-fast)"
+].join(" ");
+/** 只裁纵向：横向照旧，里面的东西该多宽还是多宽 */
+const collapseInner = "min-h-0 min-w-0 overflow-y-clip";
+/**
+* 选中指示：画在容器的 `::after` 上的一块东西，压在容器的底色之上、各项之下。
+* 位置和尺寸来自 `useIndicator` 写在容器上的变量；换了一项时滑过去（200ms，
+* 和各项换字色同一拍），没有当前项时原地淡出。
+*
+* 容器上没有 `data-indicator`（量不到）时不画——各项照旧自己画选中态，
+* 所以给各项的选中底加一个 `in-data-indicator:` 的变体把它让出来。
+* 这里只管定位和过渡：颜色、圆角由用的地方给，几何用 `indicatorBox` 或者自己写。
+*/
+const indicator = [
+	"relative isolate",
+	"after:pointer-events-none after:absolute after:top-0 after:left-0 after:-z-1",
+	"after:hidden data-indicator:after:block",
+	"after:opacity-0 data-[indicator=on]:after:opacity-100",
+	"after:transition-[translate,width,height,opacity] after:duration-(--duration-fast) after:ease-standard",
+	"data-[indicator=off]:after:transition-[opacity]",
+	"data-indicator-instant:after:transition-none"
+].join(" ");
+/** 指示盖住当前项的整个盒子：分段选择的墨块、胶囊页签的底 */
+const indicatorBox = ["after:h-(--indicator-h) after:w-(--indicator-w)", "after:translate-x-(--indicator-x) after:translate-y-(--indicator-y)"].join(" ");
+/**
+* 补位（`useFlip`）：一排里有一项走了，其余的从旧位置滑到新位置。
+*
+* `flipBox` 给那一排——走的那一项以它为参照钉在原处，并且压在别的项下面。
+* 少了一行它就矮了：高度由钩子量着收（200ms），这期间还在滑的项不露到它外面去；
+* 各行靠上排，撑着的那一段空在底下。
+* `flipLeaving` 给会走的每一项：带上 `data-leaving` 之后脱离排版（位置由钩子给）、
+* 原地淡出、点不到。
+*
+* 过渡由用的地方自己写：各项的 `translate`（滑回原位）、走的那一项的 `opacity`，
+* 都是 200ms——这几项多半本来就带着换色的过渡，得写进同一份清单里。
+*/
+const flipBox = ["relative isolate content-start overflow-y-clip", "transition-[min-height] duration-(--duration-fast) ease-standard"].join(" ");
+const flipLeaving = ["data-leaving:pointer-events-none data-leaving:absolute data-leaving:-z-1", "data-leaving:opacity-0"].join(" ");
 //#endregion
 //#region src/components/dropdown-menu/menu-style.ts
 /** 选项要知道自己在哪种面板里，才知道"当前项"怎么画 */
@@ -1768,10 +1997,19 @@ const menuItem = [
 ].join(" ");
 /** 不是当前项的选项才有悬停底：当前项的底不能被悬停盖掉 */
 const menuItemHover = "data-highlighted:bg-ink/5";
-/** 当前项（下拉选择的已选项、单选菜单项的选中项） */
+/**
+* 当前项（下拉选择的已选项、单选菜单项的选中项）。
+*
+* `strong` 的当前项是一整行黄底，而面板是深色的局部主题，焦点色也是黄的：
+* 画在里面的焦点环换成压得住黄底的颜色，并且再往里收 2px——那个颜色是墨色，
+* 贴着边的话和深色的面板分不开，看上去只是黄底小了一圈。
+*
+* 高对比模式下底色都被系统换掉：两种面板的当前项都是左缘一条系统"选中"色的竖条
+* （`strong` 平时没有这一条，只在这时候画）
+*/
 const menuItemCurrent = {
-	plain: "bg-surface-muted font-medium before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-ink before:content-['']",
-	strong: "bg-action font-medium text-on-action"
+	plain: "bg-surface-muted font-medium before:absolute before:inset-y-0 before:left-0 before:w-[3px] before:bg-ink before:content-[''] forced-colors:before:bg-[Highlight]",
+	strong: "bg-action font-medium text-on-action focus-visible:-outline-offset-4 focus-visible:outline-on-action forced-colors:before:absolute forced-colors:before:inset-y-0 forced-colors:before:left-0 forced-colors:before:w-[3px] forced-colors:before:bg-[Highlight] forced-colors:before:content-['']"
 };
 const menuGroupLabel = "px-3 pt-2 pb-1 text-xs text-ink-tertiary";
 const menuSeparator = "my-1 h-px bg-line";
@@ -1807,6 +2045,9 @@ function Field({ label, help, error, required = false, disabled = false, group =
 	const hasError = error !== void 0 && error !== null && error !== false;
 	const hasHelp = help !== void 0 && help !== null && help !== false;
 	const describedBy = [hasError && errorId, hasHelp && helpId].filter(Boolean).join(" ") || void 0;
+	const { ref: errorRef, mounted: errorMounted, leaving: errorLeaving, entered: errorEntered } = usePresence(hasError);
+	const [lastError, setLastError] = useState(error);
+	if (hasError && !Object.is(lastError, error)) setLastError(error);
 	const context = useMemo(() => ({
 		controlId: group ? void 0 : id,
 		labelId,
@@ -1830,16 +2071,25 @@ function Field({ label, help, error, required = false, disabled = false, group =
 		"data-required": "",
 		className: cn("ml-1.5 inline-block size-1.5 rotate-45 align-middle", disabled ? "bg-ink-disabled" : "bg-accent-ink")
 	})] });
-	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [hasError && /* @__PURE__ */ jsxs("p", {
-		id: errorId,
-		className: "mt-1.5 flex items-start gap-1.5 text-sm text-danger",
-		children: [/* @__PURE__ */ jsx(StatusDanger, {
-			size: 16,
-			className: "mt-0.5 shrink-0"
-		}), /* @__PURE__ */ jsx("span", {
-			className: "min-w-0 wrap-anywhere",
-			children: error
-		})]
+	const messages = /* @__PURE__ */ jsxs(Fragment$1, { children: [errorMounted && /* @__PURE__ */ jsx("div", {
+		ref: errorRef,
+		"data-leaving": errorLeaving ? "" : void 0,
+		"aria-hidden": errorLeaving || void 0,
+		className: cn(collapse, "transition-[grid-template-rows,opacity] duration-(--duration-fast) data-leaving:opacity-0", errorEntered && ["starting:grid-rows-[0fr]", "starting:opacity-0"]),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 min-w-0 overflow-y-clip",
+			children: /* @__PURE__ */ jsxs("p", {
+				id: errorId,
+				className: "flex items-start gap-1.5 pt-1.5 text-sm text-danger",
+				children: [/* @__PURE__ */ jsx(StatusDanger, {
+					size: 16,
+					className: "mt-0.5 shrink-0"
+				}), /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 wrap-anywhere",
+					children: hasError ? error : lastError
+				})]
+			})
+		})
 	}), hasHelp && /* @__PURE__ */ jsx("p", {
 		id: helpId,
 		className: cn("mt-1.5 text-sm", disabled ? "text-ink-disabled" : "text-ink-secondary"),
@@ -1908,10 +2158,16 @@ const fill$1 = {
 	outline: "bg-surface"
 };
 function controlBox({ variant = "sunken", invalid, disabled, readOnly }) {
-	return cn("flex w-full min-w-0 text-ink", frame[variant], "transition-colors duration-(--duration-fast) ease-standard", focusRingWithin, readOnly ? "border-transparent bg-transparent" : fill$1[variant], disabled ? "cursor-not-allowed border-line text-ink-disabled" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus-within:border-ink-secondary focus-within:border-ink");
+	return cn("flex w-full min-w-0 text-ink", frame[variant], "transition-colors duration-(--duration-fast) ease-standard", focusRingWithin, readOnly ? "border-transparent bg-transparent" : fill$1[variant], readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]", disabled ? "cursor-not-allowed border-line text-ink-disabled" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus-within:border-ink-secondary focus-within:border-ink");
 }
-/** 框里真正的 `<input>` / `<textarea>`：没有自己的底和边，焦点环画在外框上 */
-const controlElement = "min-w-0 flex-1 bg-transparent outline-none placeholder:text-ink-tertiary disabled:cursor-not-allowed disabled:placeholder:text-ink-disabled";
+/**
+* 框里真正的 `<input>` / `<textarea>`：没有自己的底和边，焦点环画在外框上。
+*
+* 高对比模式下禁用的字色要自己写明：平时的 `ink-disabled` 写在外框上，系统换掉之后
+* 只有它自己认得的禁用控件才是灰字色——`<textarea>`、写了 `type` 的 `<input>` 认得，
+* 没写 `type` 的 `<input>`（输入框、组合框都是）不认，字和没禁用的一个颜色
+*/
+const controlElement = "min-w-0 flex-1 bg-transparent outline-none placeholder:text-ink-tertiary disabled:cursor-not-allowed disabled:placeholder:text-ink-disabled forced-colors:disabled:text-[GrayText]";
 //#endregion
 //#region src/components/input/value-chip.ts
 /** 小块高 20 / 24 / 32px，跟着外框的三档 */
@@ -1920,9 +2176,9 @@ const valueChipSize = {
 	md: "h-6 text-sm",
 	lg: "h-8 text-base"
 };
-const valueChip = "flex max-w-full min-w-0 cursor-default items-center bg-surface-muted pl-2 text-ink";
+const valueChip = "flex max-w-full min-w-0 cursor-default items-center bg-surface-muted pl-2 text-ink forced-colors:border forced-colors:border-[ButtonText]";
 /** 小块右端的删除叉：一个和小块等高的方钮 */
-const valueChipRemove = "flex aspect-square h-full shrink-0 items-center justify-center text-ink-secondary hover:bg-line hover:text-ink";
+const valueChipRemove = "flex aspect-square h-full shrink-0 items-center justify-center text-ink-secondary hover:bg-line hover:text-ink forced-colors:in-data-disabled:text-[GrayText]";
 /** 和小块排在一起的那个输入框：和小块一样高，这一行才不会比小块高出一截 */
 const valueInputHeight = {
 	sm: "h-5",
@@ -1948,6 +2204,7 @@ const currentHighlighted = {
 	plain: "data-highlighted:bg-line",
 	strong: "data-highlighted:bg-action-pressed"
 };
+const highlightedForced = "forced-colors:data-highlighted:outline-2 forced-colors:data-highlighted:-outline-offset-2 forced-colors:data-highlighted:outline-[Highlight]";
 const iconButton = "flex shrink-0 items-center justify-center self-stretch text-ink-secondary hover:text-ink disabled:cursor-not-allowed disabled:text-ink-disabled disabled:hover:text-ink-disabled";
 const byValue = (a, b) => a?.value === b?.value;
 /**
@@ -1979,7 +2236,7 @@ function Combobox(props) {
 	const renderOption = (option) => /* @__PURE__ */ jsx(Combobox$1.Item, {
 		value: option,
 		disabled: option.disabled,
-		className: (state) => cn(menuItem, multiple ? [menuItemHover, state.selected && "font-medium"] : state.selected ? [menuItemCurrent[panelVariant], currentHighlighted[panelVariant]] : menuItemHover),
+		className: (state) => cn(menuItem, multiple ? [menuItemHover, state.selected && "font-medium"] : state.selected ? [menuItemCurrent[panelVariant], currentHighlighted[panelVariant]] : menuItemHover, highlightedForced),
 		render: multiple ? ({ children, ...itemProps }, state) => /* @__PURE__ */ jsxs("div", {
 			...itemProps,
 			children: [/* @__PURE__ */ jsx(MenuCheck, {
@@ -2020,7 +2277,7 @@ function Combobox(props) {
 				className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2",
 				children: /* @__PURE__ */ jsx(Combobox$1.Value, { children: (selected) => /* @__PURE__ */ jsxs(Fragment$1, { children: [selected.map((option) => /* @__PURE__ */ jsxs(Combobox$1.Chip, {
 					"aria-label": option.label,
-					className: cn(valueChip, "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", "data-disabled:text-ink-disabled", valueChipSize[size]),
+					className: cn(valueChip, "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", "data-disabled:text-ink-disabled", "forced-colors:data-disabled:border-[GrayText] forced-colors:data-disabled:text-[GrayText]", valueChipSize[size]),
 					children: [/* @__PURE__ */ jsx("span", {
 						className: "min-w-0 truncate",
 						children: option.label
@@ -2158,13 +2415,17 @@ function GhostText({ variant = "hatch", className, ...props }) {
 * 底是反转块：亮色主题下是深底黄字，暗色主题下是浅底深字。
 * 整块是一个 `data-theme="inverse"` 的局部主题，`action` 里的按钮按这块底色取值。
 */
-function CompletionBanner({ title, word = "COMPLETED", description, action, level = 3, className, children, ...props }) {
+function CompletionBanner({ title, word = "COMPLETED", description, action, level = 3, animate = true, className, children, ref, ...props }) {
 	const Heading = `h${level}`;
+	const [inViewRef, inView] = useInView({ disabled: !animate });
+	const pending = animate && !inView;
+	const playing = animate && inView;
 	return /* @__PURE__ */ jsxs("div", {
 		role: "status",
 		"data-theme": "inverse",
 		...props,
-		className: cn("@container relative isolate overflow-clip bg-surface text-ink", className),
+		ref: mergeRefs(inViewRef, ref),
+		className: cn("@container relative isolate overflow-clip bg-surface text-ink", pending && "[clip-path:inset(0_100%_0_0)]", playing && "animate-wipe-in", className),
 		children: [word !== null && /* @__PURE__ */ jsx(GhostText, {
 			variant: "outline",
 			className: "absolute -right-2 -bottom-3 -z-10 hidden text-5xl [--ghost-ink:color-mix(in_srgb,var(--ef-ink)_28%,transparent)] [mask-image:linear-gradient(to_left,black_45%,transparent)] @md:block",
@@ -2172,7 +2433,7 @@ function CompletionBanner({ title, word = "COMPLETED", description, action, leve
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-wrap items-center justify-between gap-x-6 gap-y-3 px-4 py-4 @md:px-6 @md:py-5",
 			children: [/* @__PURE__ */ jsxs("div", {
-				className: "min-w-0 border-l-4 border-accent-ink pl-3",
+				className: cn("min-w-0 border-l-4 border-accent-ink pl-3", playing && "animate-shift-in [animation-delay:200ms] [--shift-x:calc(var(--motion-shift-lg)*-1)]"),
 				children: [
 					/* @__PURE__ */ jsx(Heading, {
 						className: "text-lg font-bold wrap-anywhere text-accent-ink @md:text-xl",
@@ -2185,7 +2446,7 @@ function CompletionBanner({ title, word = "COMPLETED", description, action, leve
 					children
 				]
 			}), action && /* @__PURE__ */ jsx("div", {
-				className: "shrink-0",
+				className: cn("shrink-0", playing && "animate-fade-in [animation-delay:200ms]"),
 				children: action
 			})]
 		})]
@@ -2365,6 +2626,8 @@ function sparklinePath(data, range = {}) {
 		area: `${line}L${SIZE} ${SIZE}L0 ${SIZE}Z`
 	};
 }
+const areaForced = "forced-colors:fill-[CanvasText]";
+const lineForced = "forced-colors:stroke-[CanvasText]";
 const areaClass = {
 	info: "fill-data/75",
 	danger: "fill-alert/75",
@@ -2381,11 +2644,14 @@ const lineClass = {
 * 行内的小型图表：没有坐标轴、网格和图例，只有一块面积或一条折线。
 * 撑满给它的盒子（默认高 32px、通宽）。它旁边应该有数字——图只是帮着看趋势。
 */
-function Sparkline({ data, variant = "area", tone = "info", min, max, label, className, ...props }) {
+function Sparkline({ data, variant = "area", tone = "info", min, max, label, animate = true, className, ref, ...props }) {
 	const path = sparklinePath(data, {
 		min,
 		max
 	});
+	const [inViewRef, inView] = useInView({ disabled: !animate });
+	const pending = animate && !inView;
+	const playing = animate && inView;
 	return /* @__PURE__ */ jsx("svg", {
 		viewBox: `0 0 ${SIZE} ${SIZE}`,
 		preserveAspectRatio: "none",
@@ -2396,17 +2662,18 @@ function Sparkline({ data, variant = "area", tone = "info", min, max, label, cla
 		"data-variant": variant,
 		"data-tone": tone,
 		...props,
-		className: cn("block h-8 w-full overflow-visible", className),
+		ref: mergeRefs(inViewRef, ref),
+		className: cn("block h-8 w-full overflow-visible", pending && "[clip-path:inset(0_100%_0_0)]", playing && "animate-wipe-in [animation-duration:var(--duration-slower)] [--wipe-bleed:4px]", className),
 		children: path && (variant === "area" ? /* @__PURE__ */ jsx("path", {
 			d: path.area,
-			className: areaClass[tone]
+			className: cn(areaClass[tone], areaForced)
 		}) : /* @__PURE__ */ jsx("path", {
 			d: path.line,
 			fill: "none",
 			strokeWidth: 1.5,
 			strokeLinejoin: "miter",
 			vectorEffect: "non-scaling-stroke",
-			className: lineClass[tone]
+			className: cn(lineClass[tone], lineForced)
 		}))
 	});
 }
@@ -2480,7 +2747,7 @@ const toneClass$1 = {
 	danger: "text-danger"
 };
 const favoriteDot = "block size-4 rounded-full";
-const favoriteOn = "bg-action";
+const favoriteOn = "bg-action forced-colors:bg-[Highlight]";
 const favoriteOff = "border-2 border-ink-tertiary";
 /** 数据行带里的一行。放在 `DataRowList` 里。 */
 function DataRow({ name, categoryColor, favorite, onFavoriteChange, favoriteLabel = "收藏", series, value, tone = "neutral", reference, className, style, ...props }) {
@@ -2605,7 +2872,7 @@ function DateField({ display, placeholder, fields, variant, size, invalid, disab
 					}),
 					/* @__PURE__ */ jsx(CalendarIcon, {
 						size: iconSize,
-						className: cn("shrink-0", disabled ? "text-ink-disabled" : "text-ink-secondary")
+						className: cn("shrink-0", disabled ? "text-ink-disabled forced-colors:text-[GrayText]" : "text-ink-secondary forced-colors:text-[ButtonText]")
 					})
 				]
 			}), fields]
@@ -3229,12 +3496,12 @@ function Viewfinder$1() {
 	});
 }
 /** 没有内容时的占位。说清楚为什么为空、接下来能做什么；不要用大幅插画填满。 */
-function EmptyState({ title, description, action, icon, bordered = true, level = 3, className, children, ...props }) {
+function EmptyState({ title, description, action, icon, bordered = true, level = 3, animate = true, className, children, ...props }) {
 	const Heading = `h${level}`;
 	const graphic = icon === void 0 ? /* @__PURE__ */ jsx(Viewfinder$1, {}) : icon;
 	return /* @__PURE__ */ jsxs("div", {
 		...props,
-		className: cn("flex flex-col items-center px-6 py-10 text-center text-ink", bordered && "border border-dashed border-line-strong", className),
+		className: cn("flex flex-col items-center px-6 py-10 text-center text-ink", bordered && "border border-dashed border-line-strong", animate && "animate-fade-in", className),
 		children: [
 			graphic !== null && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
@@ -3314,7 +3581,8 @@ const trackSize = {
 	sm: "h-1",
 	md: "h-2"
 };
-const fillClass = "bg-action";
+const fillClass = "bg-action forced-colors:bg-[Highlight]";
+const trackClass$1 = "bg-line forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText]";
 /**
 * 进度：灰轨 + 黄填充。表示"完成了多少"；表示"数量有多少"用图表，那是蓝色的事。
 *
@@ -3333,7 +3601,7 @@ function Progress({ value, max, segments, size = "md", showValue = false, format
 			className: "flex h-full gap-1",
 			children: Array.from({ length: segments }, (_, index) => /* @__PURE__ */ jsx("span", {
 				"data-done": index < done ? "" : void 0,
-				className: cn("flex-1", index < done ? fillClass : "bg-line")
+				className: cn("flex-1", index < done ? fillClass : trackClass$1)
 			}, index))
 		});
 	} else if (indeterminate) bar = /* @__PURE__ */ jsx("span", { className: cn("absolute inset-y-0 left-0 w-2/5 animate-indeterminate", "motion-reduce:translate-x-3/4", fillClass) });
@@ -3358,7 +3626,7 @@ function Progress({ value, max, segments, size = "md", showValue = false, format
 			"aria-valuenow": indeterminate ? void 0 : current,
 			"aria-valuetext": segmented && !indeterminate ? `${current} / ${total}` : void 0,
 			...props,
-			className: cn("relative min-w-0 flex-1", trackSize[size], !segmented && "bg-line"),
+			className: cn("relative min-w-0 flex-1", trackSize[size], !segmented && trackClass$1),
 			children: bar
 		}), text !== null && /* @__PURE__ */ jsx("span", {
 			className: "min-w-[4ch] shrink-0 text-right font-tech text-sm leading-none font-bold tabular-nums",
@@ -3477,6 +3745,121 @@ function FileItem({ name, size, status, progress, error, onRemove, onRetry, remo
 	});
 }
 //#endregion
+//#region src/hooks/useAddedKeys.ts
+const NONE = /* @__PURE__ */ new Set();
+const same$1 = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+/**
+* 一串 key 里哪几个是后来加进来的。一开始就在的不算；删掉之后又加回来的算。
+*
+* 给"新项淡入"用：入场的类只加在这几个上。一开始就有的不该在载入时播一遍，
+* 已经在的也不会因为别的项变了而重播——它一直带着那个类，动画只在挂上时播一次。
+*/
+function useAddedKeys(keys) {
+	const [state, setState] = useState({
+		keys,
+		added: NONE
+	});
+	if (!same$1(state.keys, keys)) {
+		const before = new Set(state.keys);
+		setState({
+			keys,
+			added: new Set(keys.filter((key) => !before.has(key) || state.added.has(key)))
+		});
+	}
+	return state.added;
+}
+//#endregion
+//#region src/hooks/useLingering.ts
+const same = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
+/**
+* 新的一份：现在的那几项按现在的顺序，走着的插回它原来挨着的那一项后面。
+* `keep` 是这一次新走的要不要留。
+*/
+function merge(before, keys, keep) {
+	const now = new Set(keys);
+	const next = keys.map((key) => ({
+		key,
+		leaving: false
+	}));
+	let anchor = null;
+	for (const entry of before) {
+		if (now.has(entry.key)) {
+			anchor = entry.key;
+			continue;
+		}
+		if (!entry.leaving && !keep) continue;
+		const at = anchor === null ? -1 : next.findIndex((item) => item.key === anchor);
+		next.splice(at + 1, 0, {
+			key: entry.key,
+			leaving: true
+		});
+		anchor = entry.key;
+	}
+	return next;
+}
+/**
+* 列表里被拿掉的项先留着：`keys` 里少了一项，它不当场消失，而是带着 `leaving`
+* 留在原来的位置上，等它身上的退场走完才真的拿掉（等法和 `usePresence` 是同一套：
+* 看元素上正在跑的动效，一个都没有就当场拿掉——测试环境里东西删了就是删了）。
+*
+* 用法：`entries` 按顺序渲染成 `ref` 那个容器的直接子元素，走着的那几项带上
+* `data-leaving`（退场的样式挂在它上面），并且对键盘和读屏隐藏。钩子按这个标记找元素。
+*
+* - 这一次变化里同时有加进来的（整批换掉、"只收一个"换了一个）：新走的不留，照旧直接换。
+* - 走到一半又加回来：它不再是走着的，留在页面上的还是同一个元素。
+* - `enabled` 为假时不留新走的（项太多的时候）。
+*/
+function useLingering(keys, enabled = true) {
+	const ref = useRef(null);
+	const [state, setState] = useState(() => ({
+		keys,
+		entries: merge([], keys, false)
+	}));
+	let { entries } = state;
+	if (!same(state.keys, keys)) {
+		const known = new Set(state.keys);
+		const grew = keys.some((key) => !known.has(key));
+		entries = merge(state.entries, keys, enabled && !grew);
+		setState({
+			keys,
+			entries
+		});
+	}
+	const drop = useCallback((key) => {
+		setState((current) => ({
+			keys: current.keys,
+			entries: current.entries.filter((entry) => !(entry.leaving && entry.key === key))
+		}));
+	}, []);
+	const waits = useRef(/* @__PURE__ */ new Map());
+	useLayoutEffect(() => {
+		const pending = waits.current;
+		const leaving = entries.filter((entry) => entry.leaving).map((entry) => entry.key);
+		for (const [key, cancel] of pending) {
+			if (leaving.includes(key)) continue;
+			cancel();
+			pending.delete(key);
+		}
+		if (leaving.length === 0) return;
+		const nodes = [...ref.current?.children ?? []].filter((node) => node.hasAttribute("data-leaving"));
+		leaving.forEach((key, index) => {
+			if (pending.has(key)) return;
+			pending.set(key, afterMotion(nodes[index] ?? null, () => drop(key)));
+		});
+	}, [entries, drop]);
+	useEffect(() => {
+		const pending = waits.current;
+		return () => {
+			for (const cancel of pending.values()) cancel();
+			pending.clear();
+		};
+	}, []);
+	return {
+		ref,
+		entries
+	};
+}
+//#endregion
 //#region src/icons/Upload.tsx
 /** 上传：一个托盘，上面一支朝上的箭头 */
 const Upload = createIcon("Upload", /* @__PURE__ */ jsx("path", { d: "M12 16V4M7 9l5-5 5 5M4 15v5h16v-5" }));
@@ -3494,6 +3877,8 @@ const zoneSize = {
 	sm: "min-h-10 flex-wrap gap-x-3 px-3 py-2 text-sm",
 	md: "gap-3 px-4 py-4"
 };
+/** 列表里认一个文件靠的那串字 */
+const fileKey = (file) => `${file.name}-${file.size}-${file.lastModified}`;
 /** 拖进来的东西里的文件；文件夹不收 */
 function droppedFiles(transfer) {
 	const items = [...transfer.items ?? []];
@@ -3505,6 +3890,25 @@ function droppedFiles(transfer) {
 	});
 }
 /**
+* 列表里的一行。淡入、收起都写在这一层：里面那一行可能是使用方自己画的（renderFile）。
+* 移除的那一行先留着——高度收到 0 并淡出，连它占的 4px 行距一起收，收完才卸载；
+* 下面的行和控件后面的内容是被带着上来的。
+*/
+function FileRow({ leaving, entering, children }) {
+	const [last, setLast] = useState(children);
+	if (!leaving && last !== children) setLast(children);
+	return /* @__PURE__ */ jsx("li", {
+		"data-leaving": leaving ? "" : void 0,
+		inert: leaving,
+		"aria-hidden": leaving || void 0,
+		className: cn(collapse, "transition-[grid-template-rows,margin,opacity] duration-(--duration-fast)", "data-leaving:-mb-1 data-leaving:opacity-0", entering && "animate-fade-in [animation-duration:var(--duration-fast)]"),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "min-h-0 min-w-0 in-data-leaving:overflow-y-clip",
+			children: leaving ? last : children
+		})
+	});
+}
+/**
 * 文件上传：选文件，或者把文件拖进来。它只管"选"和"列"——发请求、算进度是使用方的事。
 *
 * 里面是一个真的 `<input type="file">`，铺满整个投放区：点哪儿都是打开系统的文件框。
@@ -3529,6 +3933,9 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 		defaultValue: defaultValue ?? [],
 		onChange: onValueChange
 	});
+	const keys = files.map(fileKey);
+	const added = useAddedKeys(keys);
+	const lingering = useLingering(keys);
 	const [rejections, setRejections] = useState([]);
 	const [dragging, setDragging] = useState(false);
 	const depth = useRef(0);
@@ -3547,7 +3954,7 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 		const index = pendingFocus.current;
 		if (index === null) return;
 		pendingFocus.current = null;
-		const buttons = listRef.current?.querySelectorAll("[data-file-remove]") ?? [];
+		const buttons = listRef.current?.querySelectorAll("li:not([data-leaving]) [data-file-remove]") ?? [];
 		const target = buttons[Math.min(index, buttons.length - 1)];
 		if (target) target.focus();
 		else inputRef.current?.focus();
@@ -3683,22 +4090,29 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 					})]
 				})
 			}),
-			files.length > 0 && /* @__PURE__ */ jsx("ul", {
-				ref: listRef,
+			lingering.entries.length > 0 && /* @__PURE__ */ jsx("ul", {
+				ref: mergeRefs(listRef, lingering.ref),
 				"aria-label": labels.list,
-				className: "flex flex-col gap-1",
-				children: files.map((file, index) => {
+				"data-emptying": files.length === 0 ? "" : void 0,
+				className: "flex flex-col gap-1 transition-[margin] duration-(--duration-fast) ease-standard data-emptying:-mt-2",
+				children: lingering.entries.map(({ key, leaving }) => {
+					const index = keys.indexOf(key);
+					const file = files[index];
 					const actions = {
 						remove: () => remove(index),
 						index
 					};
-					return /* @__PURE__ */ jsx("li", { children: renderFile ? renderFile(file, actions) : /* @__PURE__ */ jsx(FileItem, {
-						name: file.name,
-						size: file.size,
-						disabled,
-						removeLabel: removeLabel(file.name),
-						onRemove: actions.remove
-					}) }, `${file.name}-${file.size}-${file.lastModified}`);
+					return /* @__PURE__ */ jsx(FileRow, {
+						leaving,
+						entering: added.has(key),
+						children: file !== void 0 && (renderFile ? renderFile(file, actions) : /* @__PURE__ */ jsx(FileItem, {
+							name: file.name,
+							size: file.size,
+							disabled,
+							removeLabel: removeLabel(file.name),
+							onRemove: actions.remove
+						}))
+					}, key);
 				})
 			}),
 			/* @__PURE__ */ jsx("span", {
@@ -4574,23 +4988,8 @@ function ListRow({ start, end, description, selected, completed = false, complet
 * 加载页：近黑底、大号等宽百分比、一行标语、黄色进度条。只用于整页的首次加载。
 * 不伪造进度；内容就绪后立刻把 `open` 置为 `false`，不要为了播完动画而等待。
 */
-function Loader({ value, tagline, open = true, fullscreen = true, label = "加载中", onExited, onKeyDown, onTransitionEnd, className, ...props }) {
-	const rootRef = useRef(null);
-	const [mounted, setMounted] = useState(open);
-	if (open && !mounted) setMounted(true);
-	const onExitedRef = useRef(onExited);
-	useEffect(() => {
-		onExitedRef.current = onExited;
-	});
-	const leaving = !open && mounted;
-	useEffect(() => {
-		if (!leaving) return;
-		const timer = window.setTimeout(() => {
-			setMounted(false);
-			onExitedRef.current?.();
-		}, 700);
-		return () => window.clearTimeout(timer);
-	}, [leaving]);
+function Loader({ value, tagline, open = true, fullscreen = true, label = "加载中", onExited, onKeyDown, className, ref, ...props }) {
+	const { ref: rootRef, mounted } = usePresence(open, { onExited });
 	useEffect(() => {
 		if (!fullscreen || !open) return;
 		const page = document.documentElement;
@@ -4602,15 +5001,12 @@ function Loader({ value, tagline, open = true, fullscreen = true, label = "加
 			page.style.overflow = previousOverflow;
 			if (previousFocus instanceof HTMLElement && previousFocus.isConnected) previousFocus.focus({ preventScroll: true });
 		};
-	}, [fullscreen, open]);
+	}, [
+		fullscreen,
+		open,
+		rootRef
+	]);
 	if (!mounted) return null;
-	const handleTransitionEnd = (event) => {
-		onTransitionEnd?.(event);
-		if (leaving && event.target === event.currentTarget) {
-			setMounted(false);
-			onExitedRef.current?.();
-		}
-	};
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
 		if (fullscreen && open && event.key === "Tab") event.preventDefault();
@@ -4618,12 +5014,11 @@ function Loader({ value, tagline, open = true, fullscreen = true, label = "加
 	const indeterminate = value === void 0;
 	const current = indeterminate ? 0 : Math.min(Math.max(value, 0), 100);
 	return /* @__PURE__ */ jsx("div", {
-		ref: rootRef,
 		tabIndex: -1,
 		...props,
+		ref: mergeRefs(rootRef, ref),
 		"data-state": open ? "open" : "closing",
 		onKeyDown: handleKeyDown,
-		onTransitionEnd: handleTransitionEnd,
 		className: cn("@container flex flex-col justify-end bg-neutral-950 text-neutral-0 outline-none", fullscreen ? "fixed inset-0 z-(--z-loader)" : "absolute inset-0", "transition-[translate] duration-(--duration-slower) ease-emphasis", open ? "translate-y-0" : "pointer-events-none -translate-y-full", className),
 		children: /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-4 p-6 @md:p-10",
@@ -4649,9 +5044,9 @@ function Loader({ value, tagline, open = true, fullscreen = true, label = "加
 					"aria-valuemin": 0,
 					"aria-valuemax": 100,
 					"aria-valuenow": indeterminate ? void 0 : current,
-					className: "relative h-1.5 overflow-hidden rounded-sm bg-neutral-800",
-					children: indeterminate ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 w-2/5 animate-indeterminate bg-action motion-reduce:translate-x-3/4" }) : /* @__PURE__ */ jsx("span", {
-						className: "absolute inset-0 origin-left bg-action transition-transform duration-(--duration-base) ease-standard",
+					className: "relative h-1.5 overflow-hidden rounded-sm bg-neutral-800 forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[CanvasText]",
+					children: indeterminate ? /* @__PURE__ */ jsx("span", { className: "absolute inset-y-0 left-0 w-2/5 animate-indeterminate bg-action motion-reduce:translate-x-3/4 forced-colors:bg-[Highlight]" }) : /* @__PURE__ */ jsx("span", {
+						className: "absolute inset-0 origin-left bg-action transition-transform duration-(--duration-base) ease-standard forced-colors:bg-[Highlight]",
 						style: { transform: `scaleX(${current / 100})` }
 					})
 				})
@@ -4963,7 +5358,7 @@ function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = t
 	const classes = cn("relative flex h-14 w-full items-center gap-3 px-4 text-left text-base font-medium", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "cursor-not-allowed bg-surface-sunken text-ink-disabled" : current ? [
 		"bg-action font-bold text-on-action",
 		"before:absolute before:inset-y-0 before:left-0 before:w-1 before:bg-on-action before:content-['']",
-		"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-on-action"
+		"focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-on-action"
 	] : ["bg-surface-sunken text-ink hover:bg-surface-muted active:bg-line", focusRingInset]);
 	const mark = disabled ? "text-ink-disabled" : current ? "text-on-action" : "text-ink-secondary";
 	const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
@@ -5125,7 +5520,7 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 	const labelId = useId();
 	const ownLabel = ariaLabelledBy ?? (ariaLabel ? labelId : void 0);
 	const groupLabel = ownLabel ?? fieldContext?.labelId;
-	const slotClass = cn("min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], disabled ? "cursor-not-allowed border-line" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink");
+	const slotClass = cn("min-w-0 shrink text-center font-tech font-medium tabular-nums text-transparent caret-ink", "transition-colors duration-(--duration-fast) ease-standard", disabled ? "data-filled:text-ink-disabled" : "data-filled:text-ink", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], readOnly && !disabled && !invalid && "forced-colors:border-[Canvas]", disabled ? "cursor-not-allowed border-line" : invalid ? "border-danger" : !readOnly && "border-line-strong hover:not-focus:border-ink-secondary focus:border-ink");
 	const group = groupSize !== void 0 && groupSize > 0 ? groupSize : 0;
 	return /* @__PURE__ */ jsxs(OTPField.Root, {
 		...props,
@@ -5157,7 +5552,7 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 		}), Array.from({ length }, (_, index) => /* @__PURE__ */ jsxs(Fragment, { children: [group > 0 && index > 0 && index % group === 0 && /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			"data-separator": "",
-			className: "h-0.5 w-2 shrink-0 bg-line-strong"
+			className: "h-0.5 w-2 shrink-0 bg-line-strong forced-colors:bg-[CanvasText]"
 		}), /* @__PURE__ */ jsx(OTPField.Input, {
 			...index === 0 ? {
 				"aria-labelledby": ownLabel,
@@ -5175,12 +5570,20 @@ function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete,
 const ArrowLeft = createIcon("ArrowLeft", /* @__PURE__ */ jsx("path", { d: "M20 12H5M11 5l-7 7 7 7" }));
 //#endregion
 //#region src/components/page-header/PageHeader.tsx
+const enter = "animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]";
+const enterStep = [
+	enter,
+	`${enter} [animation-delay:100ms]`,
+	`${enter} [animation-delay:200ms]`
+];
 /**
 * 页头：这是哪一页、怎么回去、在这一页能做什么。一页一个。
 * 按自身的宽度响应：行动区放不下时折到标题下面。
 */
-function PageHeader({ title, level = 1, meta, description, breadcrumb, back, actions, divider = false, sticky = false, className, children, ...props }) {
+function PageHeader({ title, level = 1, meta, description, breadcrumb, back, actions, divider = false, sticky = false, animate = true, className, children, ...props }) {
 	const Heading = `h${level}`;
+	const reveal = animate && !sticky;
+	const first = meta ? 1 : 0;
 	return /* @__PURE__ */ jsxs("header", {
 		...props,
 		"data-sticky": sticky ? "" : void 0,
@@ -5190,7 +5593,7 @@ function PageHeader({ title, level = 1, meta, description, breadcrumb, back, act
 			/* @__PURE__ */ jsxs("div", {
 				className: "flex flex-col gap-1",
 				children: [meta && /* @__PURE__ */ jsx("p", {
-					className: "font-tech text-xs text-ink-secondary",
+					className: cn("font-tech text-xs text-ink-secondary", reveal && enterStep[0]),
 					children: meta
 				}), /* @__PURE__ */ jsxs("div", {
 					className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-4",
@@ -5202,10 +5605,10 @@ function PageHeader({ title, level = 1, meta, description, breadcrumb, back, act
 						}), /* @__PURE__ */ jsxs("div", {
 							className: "flex min-w-0 flex-col gap-1",
 							children: [/* @__PURE__ */ jsx(Heading, {
-								className: "min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12",
+								className: cn("min-w-0 text-2xl leading-10 font-bold wrap-anywhere @md:text-3xl @md:leading-12", reveal && enterStep[first]),
 								children: title
 							}), description && /* @__PURE__ */ jsx("p", {
-								className: "max-w-prose text-sm text-ink-secondary",
+								className: cn("max-w-prose text-sm text-ink-secondary", reveal && enterStep[first + 1]),
 								children: description
 							})]
 						})]
@@ -5299,7 +5702,7 @@ function Pagination({ page, defaultPage = 1, onPageChange, pageCount, jump = fal
 		"aria-label": "分页",
 		...props,
 		"data-size": size,
-		className: cn("@container hatch flex items-center justify-between gap-2 bg-surface-muted px-1 text-ink", barSize[size], className),
+		className: cn("@container hatch flex items-center justify-between gap-2 bg-surface-muted px-1 text-ink", "forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText]", barSize[size], className),
 		children: [
 			/* @__PURE__ */ jsx(IconButton, {
 				variant: "accent",
@@ -5458,6 +5861,8 @@ function PopoverClose({ children }) {
 }
 //#endregion
 //#region src/components/progress/ProgressRing.tsx
+const trackClass = "stroke-line forced-colors:stroke-[CanvasText] forced-colors:stroke-1";
+const arcClass = "stroke-action forced-colors:stroke-[Highlight]";
 /**
 * 进度环：细圆环轨道 + 从 12 点方向顺时针的黄弧。用在紧凑的位置，或者围住一个头像、图标。
 * 取色与 `Progress` 相同；需要名称时传 `aria-label`。
@@ -5479,16 +5884,16 @@ function ProgressRing({ value, max = 100, size = 48, thickness, showValue = fals
 	let arc = null;
 	if (indeterminate) arc = /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("circle", {
 		...circle,
-		className: "origin-center animate-spin stroke-action motion-reduce:hidden",
+		className: cn("origin-center animate-spin motion-reduce:hidden", arcClass),
 		strokeDasharray: `${circumference / 4} ${circumference}`
 	}), /* @__PURE__ */ jsx("circle", {
 		...circle,
-		className: "hidden stroke-action motion-reduce:block",
+		className: cn("hidden motion-reduce:block", arcClass),
 		strokeDasharray: `${stroke} ${stroke * 2}`
 	})] });
 	else if (ratio > 0) arc = /* @__PURE__ */ jsx("circle", {
 		...circle,
-		className: "stroke-action transition-[stroke-dashoffset] duration-(--duration-base) ease-standard",
+		className: cn("transition-[stroke-dashoffset] duration-(--duration-base) ease-standard", arcClass),
 		strokeDasharray: circumference,
 		strokeDashoffset: circumference * (1 - ratio)
 	});
@@ -5522,7 +5927,7 @@ function ProgressRing({ value, max = 100, size = 48, thickness, showValue = fals
 			className: "absolute inset-0 -rotate-90",
 			children: [/* @__PURE__ */ jsx("circle", {
 				...circle,
-				className: "stroke-line"
+				className: trackClass
 			}), arc]
 		}), center]
 	});
@@ -5610,7 +6015,7 @@ function Radio({ value, disabled, onChange, className, children, ...props }) {
 					className: cn(choiceBox, "rounded-full choice-diamond:rounded-none", focusRing)
 				}), /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
-					className: cn(choiceMark, "size-2 rounded-full bg-accent-ink-inverse peer-checked:opacity-100 peer-disabled:bg-ink-disabled choice-diamond:hidden")
+					className: cn(choiceMark, "size-2 rounded-full bg-accent-ink-inverse peer-checked:opacity-100 peer-disabled:bg-ink-disabled choice-diamond:hidden", "forced-colors:bg-[HighlightText] forced-colors:peer-disabled:bg-[GrayText]")
 				})]
 			})
 		}), children !== void 0 && /* @__PURE__ */ jsx("span", {
@@ -5671,6 +6076,105 @@ function RegistrationStrip({ orientation = "horizontal", rule = false, className
 	});
 }
 //#endregion
+//#region src/hooks/useReducedMotion.ts
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe$1(notify) {
+	if (typeof window.matchMedia !== "function") return () => {};
+	const media = window.matchMedia(QUERY);
+	media.addEventListener("change", notify);
+	return () => media.removeEventListener("change", notify);
+}
+function read() {
+	return typeof window.matchMedia === "function" && window.matchMedia(QUERY).matches;
+}
+/**
+* 系统开了"减少动态效果"时返回 true，设置变了会跟着变。
+*
+* CSS 的动画和过渡不用它：`theme.css` 末尾的全局规则已经统一降级了。
+* 只有脚本驱动的动效（一帧一帧自己算的）才要看它——那条规则管不到脚本。
+*/
+function useReducedMotion() {
+	return useSyncExternalStore(subscribe$1, read, () => false);
+}
+//#endregion
+//#region src/components/rolling-number/RollingNumber.tsx
+const FALLBACK_DURATION = 600;
+function readDuration(node) {
+	if (!node) return FALLBACK_DURATION;
+	const raw = getComputedStyle(node).getPropertyValue("--duration-slower");
+	const amount = Number.parseFloat(raw);
+	if (!Number.isFinite(amount) || amount <= 0) return FALLBACK_DURATION;
+	return raw.trim().endsWith("ms") ? amount : amount * 1e3;
+}
+/** 减速：先快后慢，停得住。和 `ease-exit` 是一类，不带过冲 */
+const decelerate = (progress) => 1 - (1 - progress) ** 3;
+function fractionDigits(value) {
+	const fraction = new Intl.NumberFormat("en-US", {
+		maximumFractionDigits: 20,
+		useGrouping: false
+	}).format(value).split(".")[1];
+	return fraction ? fraction.length : 0;
+}
+const never = () => () => {};
+/**
+* 滚动数字：进入视口时从 0 滚到终值，只滚一次。放进 `Stat` 的 `value` 里，
+* 或者任何"一个需要被一眼看到的数字"的地方。等宽数字由所在处给（`tabular-nums`）。
+*
+* - 读屏只读终值：终值一直在，滚的时候只是看不见；滚动的那一份对读屏隐藏。
+* - 宽度由终值占着，滚的时候旁边的东西不动。
+* - 服务端渲染出来的、打印出来的、"减少动态效果"下的，都直接是终值。
+* - 值后来变了直接换，不再滚。
+*/
+function RollingNumber({ value, format, animate = true, className, ref, ...props }) {
+	const digits = fractionDigits(value);
+	const write = format ?? ((amount) => amount.toLocaleString("en-US", {
+		minimumFractionDigits: digits,
+		maximumFractionDigits: digits
+	}));
+	const mounted = useSyncExternalStore(never, () => true, () => false);
+	const reduced = useReducedMotion();
+	const [done, setDone] = useState(false);
+	const [shown, setShown] = useState(0);
+	const rolling = mounted && animate && !reduced && !done;
+	const [inViewRef, inView] = useInView({ disabled: !rolling });
+	useEffect(() => {
+		if (!rolling || !inView) return;
+		const duration = readDuration(inViewRef.current);
+		let started;
+		let frame = requestAnimationFrame(function tick(now) {
+			started ??= now;
+			const progress = Math.min((now - started) / duration, 1);
+			if (progress >= 1) {
+				setDone(true);
+				return;
+			}
+			setShown(Number((value * decelerate(progress)).toFixed(digits)));
+			frame = requestAnimationFrame(tick);
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		rolling,
+		inView,
+		inViewRef,
+		value,
+		digits
+	]);
+	return /* @__PURE__ */ jsxs("span", {
+		...props,
+		ref: mergeRefs(inViewRef, ref),
+		"data-rolling": rolling ? "" : void 0,
+		className: cn(rolling && "relative inline-block", className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: rolling ? "opacity-0 print:opacity-100" : void 0,
+			children: write(value)
+		}), rolling && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "absolute inset-0 print:hidden",
+			children: write(shown)
+		})]
+	});
+}
+//#endregion
 //#region src/hooks/useOverflowing.ts
 /**
 * 容器里的内容是不是比容器宽、比容器高。
@@ -5806,11 +6310,11 @@ function Schedule({ label, start, end, anchors: anchorsProp, today, dayWidth = 3
 					}),
 					todayColumn !== null && /* @__PURE__ */ jsx("div", {
 						"aria-hidden": "true",
-						className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "absolute inset-y-0 right-0 z-2", AFTER_RAIL, dayColumns),
+						className: cn("pointer-events-none absolute inset-y-0 right-0 z-2 select-none print:hidden", AFTER_RAIL, dayColumns),
 						children: /* @__PURE__ */ jsx("span", {
 							"data-today": "",
 							style: { gridColumn: todayColumn },
-							className: "row-start-1 border-l-2 border-accent-ink"
+							className: "row-start-1 border-l-2 border-accent-ink forced-colors:border-[Highlight]"
 						})
 					})
 				]
@@ -5872,7 +6376,7 @@ function ScheduleItem({ start, end, title, type, variant = "banner", media, href
 			gridColumn: `${from} / ${to}`,
 			...style
 		},
-		className: cn("@container relative isolate flex min-w-0 overflow-clip text-sm", "has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-focus", banner ? "items-start justify-between gap-2 bg-surface-muted p-2" : "items-center gap-2 bg-control pr-2 text-on-control", className),
+		className: cn("@container relative isolate flex min-w-0 overflow-clip text-sm", "has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-focus", "forced-colors:border forced-colors:border-[CanvasText]", banner ? "items-start justify-between gap-2 bg-surface-muted p-2" : "items-center gap-2 bg-control pr-2 text-on-control", className),
 		children: [banner ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
 			media && /* @__PURE__ */ jsx("div", {
 				"aria-hidden": "true",
@@ -5995,40 +6499,6 @@ function ScrollHint({ label = "SCROLL", variant = "line", target, threshold = 8,
 	});
 }
 //#endregion
-//#region src/hooks/useInView.ts
-/**
-* 元素第一次进入视口后返回 true，之后不再变回 false——入场动画只播一次。
-*/
-function useInView({ disabled = false, rootMargin = "0px", threshold = 0 } = {}) {
-	const ref = useRef(null);
-	const [inView, setInView] = useState(false);
-	useEffect(() => {
-		const node = ref.current;
-		if (disabled || inView || !node) return;
-		if (typeof IntersectionObserver === "undefined") {
-			setInView(true);
-			return;
-		}
-		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) {
-				setInView(true);
-				observer.disconnect();
-			}
-		}, {
-			rootMargin,
-			threshold
-		});
-		observer.observe(node);
-		return () => observer.disconnect();
-	}, [
-		disabled,
-		inView,
-		rootMargin,
-		threshold
-	]);
-	return [ref, inView];
-}
-//#endregion
 //#region src/components/section-title/SectionTitle.tsx
 function SectionTitle({ variant = "standard", children, latin, subtitle, meta, level = 2, animate = true, latinHidden = true, tone = "accent", illustration, className, ref: forwardedRef, ...props }) {
 	const Heading = `h${level}`;
@@ -6131,6 +6601,105 @@ function SectionTitle({ variant = "standard", children, latin, subtitle, meta, l
 	});
 }
 //#endregion
+//#region src/hooks/useIndicator.ts
+const VARS = [
+	"--indicator-x",
+	"--indicator-y",
+	"--indicator-w",
+	"--indicator-h"
+];
+function clear(node) {
+	if (node.dataset.indicator === void 0) return;
+	delete node.dataset.indicator;
+	for (const name of VARS) node.style.removeProperty(name);
+}
+/** 量一次、写一次。`last` 记着上一次指的是哪一项：换了才滑 */
+function place(node, selector, last) {
+	const box = node.getBoundingClientRect();
+	if (box.width === 0 || box.height === 0) {
+		clear(node);
+		last.current = null;
+		return;
+	}
+	const item = node.querySelector(selector);
+	const rect = item?.getBoundingClientRect();
+	if (!item || !rect || rect.width === 0 || rect.height === 0) {
+		node.dataset.indicator = "off";
+		last.current = null;
+		return;
+	}
+	const laid = Number.parseFloat(getComputedStyle(node).width);
+	const scale = laid > 0 ? box.width / laid : 1;
+	const values = [
+		(rect.left - box.left) / scale - node.clientLeft + node.scrollLeft,
+		(rect.top - box.top) / scale - node.clientTop + node.scrollTop,
+		rect.width / scale,
+		rect.height / scale
+	].map((value) => `${Math.round(value * 100) / 100}px`);
+	const slide = node.dataset.indicator === "on" && last.current !== null && last.current !== item;
+	last.current = item;
+	if (VARS.some((name, at) => node.style.getPropertyValue(name) !== values[at])) {
+		if (!slide) node.dataset.indicatorInstant = "";
+		VARS.forEach((name, at) => node.style.setProperty(name, values[at]));
+		if (!slide) {
+			node.getBoundingClientRect();
+			delete node.dataset.indicatorInstant;
+		}
+	}
+	node.dataset.indicator = "on";
+}
+/**
+* 选中指示的位置：量出容器里"当前项"相对容器的位置和尺寸，写成容器上的 CSS 变量
+* （`--indicator-x` / `-y` / `-w` / `-h`），并在容器上标 `data-indicator`——`on` 是有当前项，
+* `off` 是没有。指示本身由用的地方画在容器的 `::after` 上（`lib/motion.ts` 的 `indicator`），
+* 换了一项时由 CSS 的过渡滑过去。
+*
+* 只有"换了一项"才滑；第一次到位、同一项挪了地方或变了大小（容器宽了、字体到了、
+* 前面多了一项）都直接到位。量不到（服务端、还没排版、藏着）时什么都不标，
+* 各项照旧自己画选中态——不会有哪一帧没有选中态。
+*
+* `current` 是当前项在容器里的选择器；传 `null` 是不用。
+*/
+function useIndicator(current) {
+	const ref = useRef(null);
+	const last = useRef(null);
+	const observer = useRef(null);
+	const watched = useRef([]);
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node) return;
+		if (current === null) {
+			clear(node);
+			last.current = null;
+			return;
+		}
+		place(node, current, last);
+		const watching = observer.current;
+		if (!watching) return;
+		const next = [node, ...node.children];
+		const before = watched.current;
+		if (next.length === before.length && next.every((element, at) => element === before[at])) return;
+		watching.disconnect();
+		for (const element of next) watching.observe(element);
+		watched.current = next;
+	});
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node || current === null || typeof ResizeObserver === "undefined") return;
+		const watching = new ResizeObserver(() => place(node, current, last));
+		const targets = [node, ...node.children];
+		for (const element of targets) watching.observe(element);
+		observer.current = watching;
+		watched.current = targets;
+		return () => {
+			watching.disconnect();
+			observer.current = null;
+			watched.current = [];
+		};
+	}, [current]);
+	return ref;
+}
+//#endregion
 //#region src/components/segmented-control/SegmentedControl.tsx
 const SegmentedContext = createContext(null);
 const track = {
@@ -6144,8 +6713,9 @@ const track = {
 *
 * 切换的是下面显示哪一块内容时用 `Tabs`，不是它。
 */
-function SegmentedControl({ value, defaultValue, onValueChange, name, size = "md", variant = "sunken", disabled: disabledProp, required: requiredProp, invalid: invalidProp, className, ...props }) {
+function SegmentedControl({ value, defaultValue, onValueChange, name, size = "md", variant = "sunken", disabled: disabledProp, required: requiredProp, invalid: invalidProp, className, ref, ...props }) {
 	const field = useFieldContext();
+	const trackRef = useIndicator("[data-selected]");
 	const autoName = useId();
 	const [current, setCurrent] = useControllableState({
 		value,
@@ -6185,9 +6755,10 @@ function SegmentedControl({ value, defaultValue, onValueChange, name, size = "md
 			"aria-required": required || void 0,
 			"aria-disabled": disabled || void 0,
 			...props,
+			ref: mergeRefs(trackRef, ref),
 			"data-variant": variant,
 			"data-size": size,
-			className: cn("inline-grid max-w-full auto-cols-fr grid-flow-col p-0.5 text-ink", "transition-colors duration-(--duration-fast) ease-standard", track[variant], controlSize$1[size], disabled ? "border-line" : invalid ? "border-danger" : "border-line-strong focus-within:border-ink", className)
+			className: cn("inline-grid max-w-full auto-cols-fr grid-flow-col p-0.5 text-ink", "transition-colors duration-(--duration-fast) ease-standard", indicator, indicatorBox, "after:bg-surface-inverse has-[[data-selected][data-disabled]]:after:bg-disabled", "forced-colors:after:bg-[Highlight] forced-colors:has-[[data-selected][data-disabled]]:after:bg-[GrayText]", track[variant], controlSize$1[size], disabled ? "border-line" : invalid ? "border-danger" : "border-line-strong focus-within:border-ink", className)
 		})
 	});
 }
@@ -6206,7 +6777,11 @@ function Segment({ value, icon, disabled: disabledProp, "aria-label": ariaLabel,
 		...props,
 		"data-selected": checked ? "" : void 0,
 		"data-disabled": disabled ? "" : void 0,
-		className: cn("relative flex min-w-0 items-center justify-center font-medium whitespace-nowrap select-none", "transition-colors duration-(--duration-fast) ease-standard", "has-focus-visible:z-1 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus", segmentPadding[context.size], disabled ? "cursor-not-allowed" : "cursor-pointer", checked ? disabled ? "bg-disabled text-on-disabled" : "bg-surface-inverse text-ink-inverse" : disabled ? "text-ink-disabled" : "text-ink-secondary hover:bg-ink/5 hover:text-ink", className),
+		className: cn("relative flex min-w-0 items-center justify-center font-medium whitespace-nowrap select-none", "transition-colors duration-(--duration-fast) ease-standard", "has-focus-visible:z-1 has-focus-visible:outline-2 has-focus-visible:outline-offset-2 has-focus-visible:outline-focus", segmentPadding[context.size], disabled ? "cursor-not-allowed" : "cursor-pointer", checked ? [
+			disabled ? "bg-disabled text-on-disabled forced-colors:bg-[GrayText] forced-colors:text-[Canvas]" : "bg-surface-inverse text-ink-inverse forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
+			"in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent",
+			"forced-colors:forced-color-adjust-none forced-colors:has-focus-visible:outline-[Highlight]"
+		] : disabled ? "text-ink-disabled forced-colors:text-[GrayText]" : "text-ink-secondary hover:bg-ink/5 hover:text-ink", className),
 		children: [
 			/* @__PURE__ */ jsx("input", {
 				type: "radio",
@@ -6705,7 +7280,7 @@ function SideRailSubItem({ current = false, end, disabled = false, href, target,
 }
 //#endregion
 //#region src/components/skeleton/Skeleton.tsx
-const fill = "block bg-surface-muted";
+const fill = "block bg-surface-muted forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[GrayText]";
 /**
 * 骨架：只画大块，不画细节。
 * 自身对辅助技术隐藏；"正在加载"由外层区域的 `aria-busy="true"` 表达。
@@ -6744,8 +7319,11 @@ const thumb = [
 	"after:absolute after:inset-y-1 after:left-1/2 after:w-0.5 after:-translate-x-1/2 after:bg-accent-ink-inverse after:opacity-0 after:transition-opacity after:duration-(--duration-fast) after:ease-standard after:content-[''] data-dragging:after:opacity-100",
 	"choice-diamond:size-3.5 choice-diamond:rotate-45 choice-diamond:after:inset-1 choice-diamond:after:w-auto choice-diamond:after:translate-x-0",
 	"data-disabled:bg-ink-disabled",
+	"forced-colors:bg-[ButtonText] forced-colors:data-disabled:bg-[GrayText]",
 	focusRingWithin
 ].join(" ");
+const trackForced = "forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText] forced-colors:data-disabled:outline-[GrayText]";
+const indicatorForced = "forced-colors:bg-[Highlight] forced-colors:data-disabled:bg-[GrayText]";
 /**
 * 滑块：在一个范围里拖着选一个数。要的是确切的数时用 `Stepper`。
 * 每个滑块都要有名称：放进 `Field`，或者自己传 `aria-label`。
@@ -6795,8 +7373,8 @@ function Slider(props) {
 			children: [/* @__PURE__ */ jsx(Slider$1.Control, {
 				className: cn("flex touch-none items-center px-1.5 select-none data-disabled:cursor-not-allowed", controlSize[size]),
 				children: /* @__PURE__ */ jsxs(Slider$1.Track, {
-					className: "h-1 w-full bg-line",
-					children: [/* @__PURE__ */ jsx(Slider$1.Indicator, { className: "bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none" }), (range ? [0, 1] : [0]).map((index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+					className: cn("h-1 w-full bg-line", trackForced),
+					children: [/* @__PURE__ */ jsx(Slider$1.Indicator, { className: cn("bg-ink transition-[inset-inline-start,width] duration-(--duration-fast) ease-standard data-disabled:bg-ink-disabled data-dragging:transition-none", indicatorForced) }), (range ? [0, 1] : [0]).map((index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
 						index,
 						...range ? { "aria-label": thumbLabels[index] } : {
 							"aria-label": ariaLabel,
@@ -6811,13 +7389,13 @@ function Slider(props) {
 				className: "relative h-6 text-xs",
 				children: marks.map((mark) => /* @__PURE__ */ jsx("span", {
 					style: { left: markLeft((mark.value - min) / (max - min)) },
-					className: cn("absolute top-0 flex flex-col gap-0.5 whitespace-nowrap text-ink-secondary before:h-1.5 before:w-px before:bg-line-strong before:content-['']", mark.value <= min ? "items-start" : mark.value >= max ? "-translate-x-full items-end" : "-translate-x-1/2 items-center"),
+					className: cn("absolute top-0 flex flex-col gap-0.5 whitespace-nowrap text-ink-secondary before:h-1.5 before:w-px before:bg-line-strong before:content-[''] forced-colors:before:bg-[ButtonText]", mark.value <= min ? "items-start" : mark.value >= max ? "-translate-x-full items-end" : "-translate-x-1/2 items-center"),
 					children: mark.label
 				}, mark.value))
 			})]
 		}), showValue && /* @__PURE__ */ jsx(Slider$1.Value, {
 			style: { minWidth: valueWidth },
-			className: cn("flex shrink-0 items-center justify-end font-tech text-sm font-bold tabular-nums data-disabled:text-ink-disabled", controlSize[size]),
+			className: cn("flex shrink-0 items-center justify-end font-tech text-sm font-bold tabular-nums data-disabled:text-ink-disabled forced-colors:data-disabled:text-[GrayText]", controlSize[size]),
 			children: (formatted) => formatted.join(" – ")
 		})]
 	});
@@ -7007,7 +7585,7 @@ function Stepper({ value: valueProp, defaultValue, onValueChange, min, max, step
 		onBlur?.(event);
 		commitDraft();
 	};
-	const buttonClass = (inactive) => cn("flex shrink-0 items-center justify-center select-none", "transition-colors duration-(--duration-fast) ease-standard", buttonSize[size], inactive ? "cursor-not-allowed bg-disabled text-on-disabled" : "bg-control text-on-control hover:bg-control-hover active:bg-control-pressed");
+	const buttonClass = (inactive) => cn("flex shrink-0 items-center justify-center select-none", "transition-colors duration-(--duration-fast) ease-standard", "forced-colors:border forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]", buttonSize[size], inactive ? "cursor-not-allowed bg-disabled text-on-disabled" : "bg-control text-on-control hover:bg-control-hover active:bg-control-pressed");
 	return /* @__PURE__ */ jsxs("div", {
 		"data-size": size,
 		"data-invalid": invalid ? "" : void 0,
@@ -7045,7 +7623,7 @@ function Stepper({ value: valueProp, defaultValue, onValueChange, min, max, step
 				onChange: handleChange,
 				onKeyDown: handleKeyDown,
 				onBlur: handleBlur,
-				className: cn("min-w-0 flex-1 border-y-2 border-transparent bg-surface-sunken text-center font-tech font-bold tabular-nums outline-none", "disabled:cursor-not-allowed", fieldSize[size], disabled ? "text-ink-disabled" : "text-ink", invalid && !disabled && "border-b-danger")
+				className: cn("min-w-0 flex-1 border-y-2 border-transparent bg-surface-sunken text-center font-tech font-bold tabular-nums outline-none", "disabled:cursor-not-allowed", "forced-colors:border-y forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]", fieldSize[size], disabled ? "text-ink-disabled" : "text-ink", invalid && !disabled && "border-b-danger")
 			}),
 			/* @__PURE__ */ jsx("button", {
 				type: "button",
@@ -7084,8 +7662,8 @@ const railLayout = {
 	horizontal: "flex-col @md:flex-row"
 };
 const lineLayout = {
-	vertical: "my-2 min-h-4 w-0.5",
-	horizontal: "my-2 min-h-4 w-0.5 @md:mx-2 @md:my-0 @md:h-0.5 @md:min-h-0 @md:w-auto"
+	vertical: "my-2 min-h-4 w-0.5 forced-colors:border-r",
+	horizontal: "my-2 min-h-4 w-0.5 @md:mx-2 @md:my-0 @md:h-0.5 @md:min-h-0 @md:w-auto forced-colors:@max-md:border-r forced-colors:@md:border-b"
 };
 const bodyLayout = {
 	vertical: "pb-4 group-last/step:pb-0",
@@ -7128,8 +7706,8 @@ const nodeSize = {
 	md: "size-6 text-xs [&_svg]:size-3.5"
 };
 const nodeClass$1 = {
-	done: "bg-surface-inverse text-accent-ink-inverse",
-	current: "border border-ink bg-action font-bold text-on-action",
+	done: "bg-surface-inverse text-accent-ink-inverse forced-colors:bg-[CanvasText] forced-colors:text-[Canvas]",
+	current: "border border-ink bg-action font-bold text-on-action forced-colors:forced-color-adjust-none forced-colors:border-[Highlight] forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]",
 	upcoming: "border border-line-strong text-ink-secondary"
 };
 const titleSize = {
@@ -7165,7 +7743,7 @@ function Step({ title, description, invalid = false, href, target, rel, render,
 			children: [/* @__PURE__ */ jsx("span", {
 				className: cn("flex shrink-0 items-center justify-center font-tech leading-none tabular-nums", "transition-colors duration-(--duration-fast) ease-standard", nodeSize[size], invalid ? "border border-danger text-danger" : nodeClass$1[status]),
 				children: invalid ? /* @__PURE__ */ jsx(StatusDanger, {}) : status === "done" ? /* @__PURE__ */ jsx(Check, {}) : String(index + 1).padStart(2, "0")
-			}), /* @__PURE__ */ jsx("span", { className: cn("relative flex-1 overflow-clip bg-line-strong group-last/step:hidden", "before:absolute before:top-0 before:-right-4 before:-bottom-4 before:left-0 before:origin-top-left before:bg-ink before:transition-[scale] before:duration-(--duration-base) before:ease-exit before:content-['']", lineLayout[orientation], status === "done" ? "before:scale-100" : "before:scale-0") })]
+			}), /* @__PURE__ */ jsx("span", { className: cn("relative flex-1 overflow-clip bg-line-strong group-last/step:hidden", "forced-colors:border-[CanvasText] forced-colors:before:bg-[CanvasText]", "before:absolute before:top-0 before:-right-4 before:-bottom-4 before:left-0 before:origin-top-left before:bg-ink before:transition-[scale] before:duration-(--duration-base) before:ease-exit before:content-['']", lineLayout[orientation], status === "done" ? "before:scale-100" : "before:scale-0") })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: cn("min-w-0 flex-1", bodyLayout[orientation]),
 			children: [/* @__PURE__ */ jsx("div", {
@@ -7195,6 +7773,8 @@ function Step({ title, description, invalid = false, href, target, rel, render,
 //#region src/components/switch/Switch.tsx
 const trackTransition = "transition-colors duration-(--duration-fast) ease-standard";
 const dualLabel = "pointer-events-none relative min-w-9 px-3 text-center transition-colors duration-(--duration-fast) ease-standard peer-disabled:text-ink-disabled";
+const dualOffForced = "forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:peer-checked:text-[CanvasText] forced-colors:peer-disabled:text-[Canvas] forced-colors:peer-checked:peer-disabled:text-[GrayText]";
+const dualOnForced = "forced-colors:forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:peer-checked:text-[HighlightText] forced-colors:peer-disabled:text-[GrayText] forced-colors:peer-checked:peer-disabled:text-[Canvas]";
 /**
 * 开关：胶囊轨道 + 圆形旋钮，立即生效的设置用它（需要"保存"才生效的用复选框）。
 * 原生 `<input type="checkbox" role="switch">`，受控用 `checked`、非受控用 `defaultChecked`。
@@ -7216,22 +7796,22 @@ function Switch({ onCheckedChange, onChange, offLabel, onLabel, className, child
 				type: "checkbox",
 				role: "switch",
 				onChange: handleChange,
-				className: cn("peer absolute inset-0 size-full appearance-none rounded-full bg-surface-inverse/80 group-hover:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted", trackTransition, focusRing)
+				className: cn("peer absolute inset-0 size-full appearance-none rounded-full bg-surface-inverse/80 group-hover:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted", "forced-colors:border forced-colors:border-[ButtonText] forced-colors:disabled:border-[GrayText]", trackTransition, focusRing)
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
-				className: cn("pointer-events-none absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-full bg-surface-muted", "transition-[translate] duration-(--duration-fast) ease-standard", "peer-checked:translate-x-full peer-disabled:bg-surface-raised")
+				className: cn("pointer-events-none absolute inset-y-1 left-1 w-[calc(50%-0.25rem)] rounded-full bg-surface-muted", "transition-[translate] duration-(--duration-fast) ease-standard", "peer-checked:translate-x-full peer-disabled:bg-surface-raised", "forced-colors:bg-[Highlight] forced-colors:peer-disabled:bg-[GrayText]")
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				"data-value": "off",
-				className: cn(dualLabel, "text-ink peer-checked:text-ink-inverse/70"),
+				className: cn(dualLabel, "text-ink peer-checked:text-ink-inverse/70", dualOffForced),
 				children: offLabel
 			}),
 			/* @__PURE__ */ jsx("span", {
 				"aria-hidden": "true",
 				"data-value": "on",
-				className: cn(dualLabel, "text-ink-inverse/70 peer-checked:text-ink"),
+				className: cn(dualLabel, "text-ink-inverse/70 peer-checked:text-ink", dualOnForced),
 				children: onLabel
 			})
 		]
@@ -7242,10 +7822,10 @@ function Switch({ onCheckedChange, onChange, offLabel, onLabel, className, child
 			type: "checkbox",
 			role: "switch",
 			onChange: handleChange,
-			className: cn("peer h-7 w-13 appearance-none rounded-full bg-line-strong group-hover:bg-ink-tertiary checked:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted", trackTransition, focusRing)
+			className: cn("peer h-7 w-13 appearance-none rounded-full bg-line-strong group-hover:bg-ink-tertiary checked:bg-surface-inverse disabled:cursor-not-allowed disabled:bg-surface-muted", "forced-colors:border-2 forced-colors:border-[ButtonText] forced-colors:checked:border-[Highlight] forced-colors:checked:bg-[Highlight]", "forced-colors:disabled:border-[GrayText] forced-colors:checked:disabled:bg-[GrayText]", trackTransition, focusRing)
 		}), /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: cn("pointer-events-none absolute top-1 left-1 size-5 rounded-full bg-surface-raised", "transition-[translate,background-color] duration-(--duration-fast) ease-standard", "peer-checked:translate-x-6 peer-checked:bg-accent-ink-inverse peer-disabled:bg-ink-disabled")
+			className: cn("pointer-events-none absolute top-1 left-1 size-5 rounded-full bg-surface-raised", "transition-[translate,background-color] duration-(--duration-fast) ease-standard", "peer-checked:translate-x-6 peer-checked:bg-accent-ink-inverse peer-disabled:bg-ink-disabled", "forced-colors:bg-[ButtonText] forced-colors:peer-checked:bg-[HighlightText] forced-colors:peer-disabled:bg-[GrayText] forced-colors:peer-checked:peer-disabled:bg-[Canvas]")
 		})]
 	});
 	return /* @__PURE__ */ jsxs("label", {
@@ -7336,7 +7916,7 @@ function TableHead(props) {
 		})
 	});
 }
-const ruledLines = ["[&>tr:nth-child(5n_of_:not([data-detail])):not([data-expanded])>*]:border-line-strong", "[&>tr:nth-child(5n_of_:not([data-detail]))+tr[data-detail]>*]:border-line-strong"].join(" ");
+const ruledLines = ["[&>tr:nth-child(5n_of_:not([data-detail])):not(:has(+tr[data-detail]))>*]:border-line-strong", "[&>tr:nth-child(5n_of_:not([data-detail]))+tr[data-detail]>*]:border-line-strong"].join(" ");
 function TableBody({ className, ...props }) {
 	const { ruled } = useContext(TableContext);
 	return /* @__PURE__ */ jsx(SectionContext, {
@@ -7360,6 +7940,7 @@ function TableRow({ selected, detail, expanded: expandedProp, defaultExpanded =
 	});
 	const expandable = detail !== void 0 && detail !== null && detail !== false;
 	const open = expandable && expanded;
+	const detailPresence = usePresence(open);
 	const context = useMemo(() => expandable ? {
 		expanded: open,
 		toggle: () => setExpanded(!open),
@@ -7382,15 +7963,16 @@ function TableRow({ selected, detail, expanded: expandedProp, defaultExpanded =
 		"aria-selected": selected,
 		"data-selected": selected ? "" : void 0,
 		"data-expanded": open ? "" : void 0,
-		className: cn("group/row transition-colors duration-(--duration-fast) ease-standard", selected ? rowSelected : rowIdle, "[&[data-expanded]>*]:border-b-transparent", className),
+		className: cn("group/row transition-colors duration-(--duration-fast) ease-standard", selected ? rowSelected : rowIdle, "[&:has(+tr[data-detail])>*]:border-b-transparent", className),
 		children: /* @__PURE__ */ jsx(RowContext, {
 			value: context,
 			children
 		})
-	}), open && /* @__PURE__ */ jsx(DetailRow, {
+	}), detailPresence.mounted && /* @__PURE__ */ jsx(DetailRow, {
 		id: detailId,
 		rowRef,
 		estimate: countCells(children),
+		presence: detailPresence,
 		children: detail
 	})] });
 }
@@ -7403,7 +7985,7 @@ function countCells(children) {
 	}
 	return Math.max(total, 1);
 }
-function DetailRow({ id, rowRef, estimate, children }) {
+function DetailRow({ id, rowRef, estimate, presence, children }) {
 	const [measured, setMeasured] = useState(null);
 	useLayoutEffect(() => {
 		const row = rowRef.current;
@@ -7415,12 +7997,21 @@ function DetailRow({ id, rowRef, estimate, children }) {
 	return /* @__PURE__ */ jsx("tr", {
 		id,
 		"data-detail": "",
+		inert: presence.leaving,
 		children: /* @__PURE__ */ jsx("td", {
 			colSpan: measured ?? estimate,
 			className: "border-b border-line bg-surface-sunken p-0 [tr:last-child>&]:border-b-0",
 			children: /* @__PURE__ */ jsx("div", {
-				className: "sticky left-0 w-[var(--table-viewport,100%)] px-4 py-3 text-sm whitespace-normal",
-				children
+				ref: presence.ref,
+				"data-leaving": presence.leaving ? "" : void 0,
+				className: cn("sticky left-0 w-[var(--table-viewport,100%)]", collapse, presence.entered && "starting:grid-rows-[0fr]"),
+				children: /* @__PURE__ */ jsx("div", {
+					className: collapseInner,
+					children: /* @__PURE__ */ jsx("div", {
+						className: "px-4 py-3 text-sm whitespace-normal",
+						children
+					})
+				})
 			})
 		})
 	});
@@ -7521,18 +8112,23 @@ function Tabs({ value, defaultValue, onValueChange, variant = "block", size = "m
 		defaultValue: defaultValue ?? "",
 		onChange: onValueChange
 	});
+	const [initial] = useState(current);
+	const [switched, setSwitched] = useState(false);
+	if (!switched && current !== initial) setSwitched(true);
 	const context = useMemo(() => ({
 		value: current,
 		select,
 		baseId,
 		variant,
-		size
+		size,
+		switched
 	}), [
 		current,
 		select,
 		baseId,
 		variant,
-		size
+		size,
+		switched
 	]);
 	return /* @__PURE__ */ jsx(TabsContext, {
 		value: context,
@@ -7542,8 +8138,9 @@ function Tabs({ value, defaultValue, onValueChange, variant = "block", size = "m
 		})
 	});
 }
-function TabList({ className, onKeyDown, ...props }) {
+function TabList({ className, onKeyDown, ref, ...props }) {
 	const { variant } = useTabsContext("TabList");
+	const listRef = useIndicator(variant === "capsule" ? "[role=\"tab\"][aria-selected=\"true\"]" : null);
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
 		if (event.defaultPrevented) return;
@@ -7573,10 +8170,17 @@ function TabList({ className, onKeyDown, ...props }) {
 	};
 	return /* @__PURE__ */ jsx("div", {
 		...props,
+		ref: mergeRefs(listRef, ref),
 		role: "tablist",
 		"aria-orientation": "horizontal",
 		onKeyDown: handleKeyDown,
-		className: cn("flex overflow-x-auto [scrollbar-width:thin]", variant === "capsule" && "gap-2 p-1", variant === "wedge" && "border-b-2 border-ink", className)
+		className: cn("flex overflow-x-auto [scrollbar-width:thin]", variant === "capsule" && [
+			"gap-2 p-1",
+			indicator,
+			indicatorBox,
+			"after:z-0 after:rounded-full after:bg-surface-inverse",
+			"forced-colors:after:bg-[Highlight]"
+		], variant === "wedge" && "border-b-2 border-ink", className)
 	});
 }
 const blockSize = {
@@ -7616,12 +8220,15 @@ function Tab({ value, disabled = false, className, children, onClick, ...props }
 	};
 	if (variant === "capsule") return /* @__PURE__ */ jsx("button", {
 		...shared,
-		className: cn(capsuleBase, focusRing, capsuleSize[size], selected ? capsuleState.selected : disabled ? capsuleState.disabled : capsuleState.rest, className),
-		children
+		className: cn(capsuleBase, focusRing, capsuleSize[size], selected ? [capsuleState.selected, "in-data-indicator:bg-transparent forced-colors:in-data-indicator:bg-transparent"] : disabled ? capsuleState.disabled : capsuleState.rest, className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: "relative z-1 inline-flex items-center gap-[inherit]",
+			children
+		})
 	});
 	if (variant === "wedge") return /* @__PURE__ */ jsx("button", {
 		...shared,
-		className: cn("relative isolate inline-flex shrink-0 items-center justify-center leading-none font-medium whitespace-nowrap", "transition-colors duration-(--duration-fast) ease-standard", "before:absolute before:inset-0 before:-z-10 before:wedge-r before:transition-colors before:duration-(--duration-fast) before:ease-standard before:content-['']", focusRingInset, wedgeSize[size], selected ? "text-on-action before:bg-action" : disabled ? "cursor-not-allowed text-ink-disabled" : "text-ink hover:before:bg-ink/5", className),
+		className: cn("relative isolate inline-flex shrink-0 items-center justify-center leading-none font-medium whitespace-nowrap", "transition-colors duration-(--duration-fast) ease-standard", "before:absolute before:inset-0 before:-z-10 before:wedge-r before:transition-colors before:duration-(--duration-fast) before:ease-standard before:content-['']", focusRingInset, wedgeSize[size], selected ? "text-on-action before:bg-action focus-visible:-outline-offset-4 focus-visible:outline-on-action forced-colors:forced-color-adjust-none forced-colors:text-[HighlightText] forced-colors:before:bg-[Highlight] forced-colors:focus-visible:-outline-offset-4 forced-colors:focus-visible:outline-[HighlightText]" : disabled ? "cursor-not-allowed text-ink-disabled" : "text-ink hover:before:bg-ink/5", className),
 		children
 	});
 	return /* @__PURE__ */ jsxs("button", {
@@ -7637,7 +8244,10 @@ function Tab({ value, disabled = false, className, children, onClick, ...props }
 		})]
 	});
 }
-/** 未选中的面板保留一个隐藏的空容器，让页签的 `aria-controls` 始终有所指。 */
+/**
+* 未选中的面板保留一个隐藏的空容器，让页签的 `aria-controls` 始终有所指。
+* 切过来的面板淡入；一开始就选中的那一块不动。
+*/
 function TabPanel({ value, className, children, ...props }) {
 	const context = useTabsContext("TabPanel");
 	const selected = context.value === value;
@@ -7648,7 +8258,7 @@ function TabPanel({ value, className, children, ...props }) {
 		"aria-labelledby": toId(context.baseId, "tab", value),
 		hidden: !selected,
 		tabIndex: 0,
-		className: cn(focusRing, className),
+		className: cn(focusRing, selected && context.switched && "animate-fade-in [animation-duration:var(--duration-fast)]", className),
 		children: selected ? children : null
 	});
 }
@@ -7671,6 +8281,170 @@ function TagPair({ name, value, emphasis = false, size = "md", className, ...pro
 	});
 }
 //#endregion
+//#region src/lib/inline-style.ts
+/**
+* 往元素上临时写过内联样式、又都撤掉之后调：原来没有 `style` 属性的，
+* 不留一个空的在上面。
+*
+* 先问一句"有没有这个属性"不是多余的：浏览器是懒着把内联样式同步成属性的，
+* 不问就去删，删的那一下落空，回头它又冒出来一个空的 `style=""`。
+*/
+function dropEmptyStyle(node) {
+	if (node.style.length === 0 && node.hasAttribute("style")) node.removeAttribute("style");
+}
+const px = (value) => `${Math.round(value * 100) / 100}px`;
+/** 这个元素眼下挂着的位移：补位滑到一半时不是 0 */
+function flight(node) {
+	const value = getComputedStyle(node).translate;
+	if (!value || value === "none") return [0, 0];
+	const [x = 0, y = 0] = value.split(" ").map((part) => Number.parseFloat(part) || 0);
+	return [x, y];
+}
+/** 把写上去的内联样式撤干净：原来没有 style 属性的，不留一个空的在上面 */
+function unset(node, names) {
+	for (const name of names) node.style.removeProperty(name);
+	dropEmptyStyle(node);
+}
+const PIN = [
+	"left",
+	"top",
+	"width",
+	"height"
+];
+/** 往走的那一项上写过的全部：钉它的那四样，钉不住时的藏 */
+const HELD = [...PIN, "display"];
+/**
+* 量一遍、记下来。这一次有一项刚走，就补位：走的钉在原处，
+* 其余挪了地方的先摆回旧位置（不过渡），再撤掉——撤的那一下滑回原位；
+* 容器因此变矮了的话，高度也从原来的收到新的。
+*/
+function arrange(node, memory) {
+	const { seen, pinned } = memory;
+	const items = [...node.children];
+	const leaving = (item) => item.hasAttribute("data-leaving");
+	for (const item of items) {
+		if (leaving(item) || !pinned.has(item)) continue;
+		pinned.delete(item);
+		unset(item, HELD);
+	}
+	const box = node.getBoundingClientRect();
+	if (box.width === 0 || box.height === 0 || items.filter((item) => !leaving(item)).length > 50) {
+		seen.clear();
+		memory.height = 0;
+		for (const item of items) {
+			if (!leaving(item) || pinned.has(item)) continue;
+			pinned.add(item);
+			item.style.setProperty("display", "none");
+		}
+		return;
+	}
+	const laid = Number.parseFloat(getComputedStyle(node).width);
+	const scale = laid > 0 ? box.width / laid : 1;
+	const gone = [];
+	const moved = [];
+	const next = [];
+	for (const item of items) {
+		const before = seen.get(item);
+		if (leaving(item)) {
+			if (!pinned.has(item)) gone.push([item, before]);
+			continue;
+		}
+		const rect = item.getBoundingClientRect();
+		const [x, y] = flight(item);
+		const place = {
+			left: (rect.left - box.left) / scale - node.clientLeft + node.scrollLeft - x,
+			top: (rect.top - box.top) / scale - node.clientTop + node.scrollTop - y,
+			width: rect.width / scale,
+			height: rect.height / scale
+		};
+		next.push([item, place]);
+		if (!before) continue;
+		const dx = before.left + x - place.left;
+		const dy = before.top + y - place.top;
+		if (Math.abs(dx) >= .5 || Math.abs(dy) >= .5) moved.push([
+			item,
+			dx,
+			dy
+		]);
+	}
+	seen.clear();
+	for (const [item, place] of next) seen.set(item, place);
+	const tall = box.height / scale;
+	const shrinking = memory.settle !== null;
+	const from = shrinking ? tall : memory.height;
+	if (!shrinking) memory.height = tall;
+	if (gone.length === 0) return;
+	for (const [item, place] of gone) {
+		pinned.add(item);
+		if (place) PIN.forEach((name) => item.style.setProperty(name, px(place[name])));
+		else item.style.setProperty("display", "none");
+	}
+	memory.settle?.();
+	memory.settle = null;
+	node.style.setProperty("transition", "none");
+	node.style.removeProperty("min-height");
+	const to = node.getBoundingClientRect().height / scale;
+	memory.height = to;
+	const shrink = from - to >= .5;
+	if (shrink) node.style.setProperty("min-height", px(from));
+	for (const [item, dx, dy] of moved) {
+		item.style.setProperty("transition", "none");
+		item.style.setProperty("translate", `${px(dx)} ${px(dy)}`);
+	}
+	node.getBoundingClientRect();
+	for (const [item] of moved) unset(item, ["transition", "translate"]);
+	node.style.removeProperty("transition");
+	if (shrink) {
+		node.style.setProperty("min-height", px(to));
+		memory.settle = afterMotion(node, () => {
+			memory.settle = null;
+			unset(node, ["min-height"]);
+		});
+	} else dropEmptyStyle(node);
+}
+/**
+* 补位：容器里有一项走了，其余的直接子元素从旧位置滑到新位置，不是瞬移过去。
+* 返回的 `ref` 给容器。
+*
+* - 走的那一项要带 `data-leaving`、并且脱离排版（`lib/motion.ts` 的 `flipLeaving`）：
+*   钩子把它钉在原来的位置上，它在那里把退场走完；容器要是定位的参照（`flipBox`）。
+* - 其余各项要给 `translate` 加上过渡：钩子只负责把它们摆回旧位置再放手，
+*   滑回来靠的是 CSS——所以系统开了"减少动态效果"时是直接到位的。
+* - 容器因此变矮了（少了一行），它的高度也从原来的收到新的（量着收，过渡同样在
+*   `flipBox` 里）；收完撤掉，不留在容器上。
+* - 各项只动 `translate`。正滑到一半又少一项，从眼前的位置接着走。
+* - 只有"少了一项"才补位；加一项、容器尺寸变了，各项直接到位。
+* - 超过 `FLIP_LIMIT` 项、量不到位置时不做：走的那一项也不留，照旧直接消失。
+*/
+function useFlip() {
+	const ref = useRef(null);
+	const memory = useRef({
+		seen: /* @__PURE__ */ new Map(),
+		height: 0,
+		pinned: /* @__PURE__ */ new WeakSet(),
+		settle: null
+	});
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (node) arrange(node, memory.current);
+	});
+	useLayoutEffect(() => {
+		const node = ref.current;
+		if (!node || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => arrange(node, memory.current));
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		const held = memory.current;
+		return () => {
+			held.settle?.();
+			held.settle = null;
+		};
+	}, []);
+	return ref;
+}
+//#endregion
 //#region src/components/tag-input/TagInput.tsx
 const defaultLabels = {
 	summary: (tags) => tags.length === 0 ? "还没有标签" : `已有 ${tags.length} 个标签：${tags.join("、")}`,
@@ -7718,6 +8492,9 @@ function TagInput({ value, defaultValue, onValueChange, name, max, validate, sep
 	const [flash, setFlash] = useState(null);
 	const [message, setMessage] = useState("");
 	const full = max !== void 0 && tags.length >= max;
+	const added = useAddedKeys(tags);
+	const rowRef = useFlip();
+	const lingering = useLingering(tags, tags.length < 50);
 	useEffect(() => {
 		if (flash === null) return;
 		const timer = setTimeout(() => setFlash(null), FLASH_MS);
@@ -7875,24 +8652,31 @@ function TagInput({ value, defaultValue, onValueChange, name, max, validate, sep
 		}), "items-center", multiValueBox[size], className),
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2",
-				children: [tags.map((tag, index) => /* @__PURE__ */ jsxs("span", {
-					"data-tag": "",
-					"data-flash": flash === tag ? "" : void 0,
-					className: cn(valueChip, valueChipSize[size], "transition-colors duration-(--duration-fast) ease-standard", "data-flash:bg-surface-inverse data-flash:text-ink-inverse", disabled && "text-ink-disabled", !editable && "pr-2"),
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "min-w-0 truncate",
-						children: tag
-					}), editable && /* @__PURE__ */ jsx("button", {
-						type: "button",
-						tabIndex: -1,
-						"aria-label": removeLabel(tag),
-						onClick: (event) => remove(index, event.detail === 0 && tags.length > 1 ? index : "input"),
-						onKeyDown: (event) => handleChipKeyDown(event, index),
-						className: cn("flex aspect-square h-full shrink-0 items-center justify-center text-ink-secondary hover:bg-line hover:text-ink", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", flash === tag && "text-ink-inverse"),
-						children: /* @__PURE__ */ jsx(Close, { size: 12 })
-					})]
-				}, tag)), /* @__PURE__ */ jsx("input", {
+				ref: mergeRefs(rowRef, lingering.ref),
+				className: cn("flex min-w-0 flex-1 flex-wrap items-center gap-1 py-1 pl-2", flipBox),
+				children: [lingering.entries.map(({ key: tag, leaving }) => {
+					const index = tags.indexOf(tag);
+					return /* @__PURE__ */ jsxs("span", {
+						"data-tag": leaving ? void 0 : "",
+						"data-leaving": leaving ? "" : void 0,
+						"data-flash": flash === tag && !leaving ? "" : void 0,
+						inert: leaving,
+						"aria-hidden": leaving || void 0,
+						className: cn(valueChip, valueChipSize[size], "transition-[color,background-color,translate,opacity] duration-(--duration-fast) ease-standard", "data-flash:bg-surface-inverse data-flash:text-ink-inverse", "forced-colors:data-flash:outline-2 forced-colors:data-flash:outline-[Highlight]", flipLeaving, added.has(tag) && "animate-fade-in [animation-duration:var(--duration-fast)]", disabled && "text-ink-disabled forced-colors:border-[GrayText] forced-colors:text-[GrayText]", !editable && "pr-2"),
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "min-w-0 truncate",
+							children: tag
+						}), editable && /* @__PURE__ */ jsx("button", {
+							type: "button",
+							tabIndex: -1,
+							"aria-label": removeLabel(tag),
+							onClick: (event) => remove(index, event.detail === 0 && tags.length > 1 ? index : "input"),
+							onKeyDown: (event) => handleChipKeyDown(event, index),
+							className: cn("flex aspect-square h-full shrink-0 items-center justify-center text-ink-secondary hover:bg-line hover:text-ink forced-colors:in-data-disabled:text-[GrayText]", "focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-focus", flash === tag && "text-ink-inverse"),
+							children: /* @__PURE__ */ jsx(Close, { size: 12 })
+						})]
+					}, tag);
+				}), /* @__PURE__ */ jsx("input", {
 					...props,
 					ref: mergeRefs(inputRef, ref),
 					id,
@@ -7917,7 +8701,7 @@ function TagInput({ value, defaultValue, onValueChange, name, max, validate, sep
 						onBlur?.(event);
 						if (commitOnBlur && editable && text.trim() !== "") setText(commit([text]));
 					},
-					className: cn(controlElement, "min-w-12 px-1", valueInputHeight[size])
+					className: cn(controlElement, "min-w-12 px-1", valueInputHeight[size], "transition-[translate] duration-(--duration-fast) ease-standard")
 				})]
 			}),
 			(invalid || max !== void 0) && /* @__PURE__ */ jsxs("span", {
@@ -7928,7 +8712,7 @@ function TagInput({ value, defaultValue, onValueChange, name, max, validate, sep
 				}), max !== void 0 && /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
 					"data-count": "",
-					className: cn("font-tech text-xs tabular-nums", disabled ? "text-ink-disabled" : full ? "text-ink" : "text-ink-secondary"),
+					className: cn("font-tech text-xs tabular-nums", disabled ? "text-ink-disabled forced-colors:text-[GrayText]" : full ? "text-ink" : "text-ink-secondary"),
 					children: `${tags.length} / ${max}`
 				})]
 			}),
@@ -8020,7 +8804,7 @@ function Textarea({ variant = "sunken", invalid: invalidProp, showCount = false,
 			className: cn(controlElement, "block min-h-[calc(3lh+1rem)] w-full resize-y px-3 py-2")
 		}), showCount && /* @__PURE__ */ jsx("span", {
 			"data-count": "",
-			className: cn("pointer-events-none self-end px-3 pb-1.5 font-tech text-xs tabular-nums", disabled ? "text-ink-disabled" : "text-ink-secondary"),
+			className: cn("pointer-events-none self-end px-3 pb-1.5 font-tech text-xs tabular-nums", disabled ? "text-ink-disabled forced-colors:text-[GrayText]" : "text-ink-secondary"),
 			children: maxLength !== void 0 ? `${length} / ${maxLength}` : length
 		})]
 	});
@@ -8089,8 +8873,8 @@ function Timeline({ className, ...props }) {
 	});
 }
 const nodeClass = {
-	past: "bg-ink",
-	current: "border border-ink bg-action",
+	past: "bg-ink forced-colors:bg-[CanvasText]",
+	current: "border border-ink bg-action forced-colors:bg-[Highlight]",
 	upcoming: "border-2 border-ink-tertiary"
 };
 const titleClass = {
@@ -8111,7 +8895,7 @@ function TimelineItem({ status = "past", date, title, className, children, ...pr
 			children: [/* @__PURE__ */ jsx("span", {
 				className: "flex h-[1lh] min-h-4 w-4 items-center justify-center",
 				children: /* @__PURE__ */ jsx("span", { className: cn("size-[11px] rotate-45", nodeClass[status]) })
-			}), /* @__PURE__ */ jsx("span", { className: "w-0.5 flex-1 bg-line-strong group-last/item:hidden" })]
+			}), /* @__PURE__ */ jsx("span", { className: "w-0.5 flex-1 bg-line-strong group-last/item:hidden forced-colors:bg-[CanvasText]" })]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "min-w-0 flex-1 pb-6 group-last/item:pb-0",
 			children: [
@@ -8257,13 +9041,42 @@ const TocContext = createContext({
 /** 点了一项之后，多久没有滚动事件算这一次滚动停下了 */
 const SETTLE_MS = 150;
 /**
+* 让接下来的这一次滚动是平滑的：给这几个滚动容器写上内联的 `scroll-behavior`，
+* 滚动停下（`SETTLE_MS` 里没有再滚）就还原成原来的内联值。返回的函数提前还原。
+*
+* 滚动本身不归它管——跳过去的仍然是浏览器（锚点跳转）。
+*/
+function smoothOnce(scrollers) {
+	const before = scrollers.map((scroller) => scroller.style.getPropertyValue("scroll-behavior"));
+	for (const scroller of scrollers) scroller.style.setProperty("scroll-behavior", "smooth");
+	const sources = scrollers.map((scroller) => scroller === document.documentElement ? window : scroller);
+	let timer;
+	const restore = () => {
+		clearTimeout(timer);
+		for (const source of sources) source.removeEventListener("scroll", wait);
+		scrollers.forEach((scroller, index) => {
+			scroller.style.setProperty("scroll-behavior", before[index]);
+			dropEmptyStyle(scroller);
+		});
+	};
+	function wait() {
+		clearTimeout(timer);
+		timer = setTimeout(restore, SETTLE_MS);
+	}
+	for (const source of sources) source.addEventListener("scroll", wait, { passive: true });
+	wait();
+	return restore;
+}
+/**
 * 页内目录：这一页有哪几节、现在看到了哪一节。里面放 `TocItem`。
 *
-* 位置由使用方给，通常是 `className="sticky top-6"`。点一项就是点一个锚点链接：
-* 滚不滚、平不平滑是浏览器和页面 CSS 的事，它不接管滚动。
+* 位置由使用方给，通常是 `className="sticky top-6"`。点一项仍然是点一个锚点链接——
+* 地址、后退、`scroll-mt` 都是浏览器原生的那一套；它只让这一次跳转滚得平滑
+* （系统开了"减少动态效果"时照旧直接跳）。
 */
 function Toc({ title, offset = 0, target, onActiveChange, "aria-label": ariaLabel, className, ref, children, ...props }) {
 	const navRef = useRef(null);
+	const listRef = useIndicator("[aria-current]");
 	const titleId = useId();
 	const count = Children.count(children);
 	const spied = useScrollPosition(target, useCallback(({ scrolled, room }) => {
@@ -8312,6 +9125,17 @@ function Toc({ title, offset = 0, target, onActiveChange, "aria-label": ariaLabe
 		};
 	}, [pinned, target]);
 	const active = pinned ?? spied;
+	const restoreScroll = useRef(null);
+	useEffect(() => () => restoreScroll.current?.(), []);
+	const pick = useCallback((section) => {
+		setPinned(section);
+		restoreScroll.current?.();
+		restoreScroll.current = null;
+		if (!document.getElementById(section)) return;
+		if (typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+		const container = target?.current;
+		restoreScroll.current = smoothOnce(container ? [container, document.documentElement] : [document.documentElement]);
+	}, [target]);
 	const report = useRef(onActiveChange);
 	report.current = onActiveChange;
 	const reported = useRef(null);
@@ -8333,8 +9157,8 @@ function Toc({ title, offset = 0, target, onActiveChange, "aria-label": ariaLabe
 	}, [active]);
 	const context = useMemo(() => ({
 		active,
-		pick: setPinned
-	}), [active]);
+		pick
+	}), [active, pick]);
 	const hasTitle = title !== void 0 && title !== null && title !== false;
 	return /* @__PURE__ */ jsxs("nav", {
 		...props,
@@ -8347,7 +9171,8 @@ function Toc({ title, offset = 0, target, onActiveChange, "aria-label": ariaLabe
 			className: "mb-2 pl-4 font-tech text-xs text-ink-secondary",
 			children: title
 		}), /* @__PURE__ */ jsx("ul", {
-			className: "relative before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-line before:content-['']",
+			ref: listRef,
+			className: cn("before:absolute before:inset-y-0 before:left-0 before:-z-1 before:w-px before:bg-line before:content-['']", indicator, "after:top-1 after:h-[calc(var(--indicator-h)-0.5rem)] after:w-[3px] after:translate-y-(--indicator-y) after:bg-ink", "forced-colors:after:bg-[Highlight]"),
 			children: /* @__PURE__ */ jsx(TocContext, {
 				value: context,
 				children
@@ -8385,7 +9210,7 @@ function TocItem({ href, section = sectionOf(href), level = 1, render, onClick,
 				onClick?.(event);
 				if (!event.defaultPrevented && section !== void 0) pick(section);
 			},
-			className: cn("relative block py-2 pr-2 leading-snug wrap-anywhere", "transition-colors duration-(--duration-fast) ease-standard", focusRingInset, levelPadding[level], current ? "text-ink before:absolute before:inset-y-1 before:left-0 before:w-[3px] before:bg-ink before:content-['']" : "text-ink-secondary hover:text-ink"),
+			className: cn("relative block py-2 pr-2 leading-snug wrap-anywhere", "transition-colors duration-(--duration-fast) ease-standard", focusRingInset, levelPadding[level], current ? "text-ink before:absolute before:inset-y-1 before:left-0 before:w-[3px] before:bg-ink before:content-[''] in-data-indicator:before:hidden forced-colors:before:bg-[Highlight]" : "text-ink-secondary hover:text-ink"),
 			children
 		})
 	});
@@ -8400,6 +9225,10 @@ const barVariant = {
 	sunken: "bg-surface-sunken p-0.5",
 	outline: "border border-line-strong bg-surface p-px"
 };
+const barForced = {
+	sunken: "forced-colors:outline forced-colors:-outline-offset-1 forced-colors:outline-[ButtonText] forced-colors:data-disabled:outline-[GrayText]",
+	outline: "forced-colors:border-[ButtonText] forced-colors:data-disabled:border-[GrayText]"
+};
 /**
 * 工具栏：一排作用于同一个对象的小工具，收在一条带子里。整条只占一个 Tab 停靠点，
 * 方向键在各项之间走。里面放 `ToolbarButton`、`ToolbarToggle`、`ToolbarToggleGroup`、
@@ -8432,7 +9261,7 @@ function Toolbar({ size = "md", variant = "sunken", orientation = "horizontal",
 			onKeyDown: handleKeyDown,
 			"data-size": size,
 			"data-variant": variant,
-			className: cn("inline-flex max-w-full gap-0.5 text-ink", orientation === "vertical" ? "flex-col" : "flex-wrap items-center", barVariant[variant], className)
+			className: cn("inline-flex max-w-full gap-0.5 text-ink", orientation === "vertical" ? "flex-col" : "flex-wrap items-center", barVariant[variant], barForced[variant], className)
 		})
 	});
 }
@@ -8457,6 +9286,10 @@ const itemBase = [
 	"data-popup-open:bg-surface-inverse data-popup-open:text-ink-inverse",
 	"data-disabled:cursor-not-allowed data-disabled:bg-transparent data-disabled:text-ink-disabled",
 	"data-disabled:data-pressed:bg-disabled data-disabled:data-pressed:text-on-disabled",
+	"forced-colors:data-pressed:forced-color-adjust-none forced-colors:data-pressed:outline-[Highlight]",
+	"forced-colors:data-pressed:bg-[Highlight] forced-colors:data-pressed:text-[HighlightText]",
+	"forced-colors:data-disabled:data-pressed:bg-[GrayText] forced-colors:data-disabled:data-pressed:text-[Canvas]",
+	"forced-colors:data-disabled:text-[GrayText]",
 	"focus-visible:z-1",
 	focusRing
 ].join(" ");
@@ -8464,7 +9297,9 @@ const itemIcon = [
 	"flex shrink-0",
 	"group-data-pressed/item:text-accent-ink-inverse",
 	"group-data-popup-open/item:text-accent-ink-inverse",
-	"group-data-disabled/item:group-data-pressed/item:text-on-disabled"
+	"group-data-disabled/item:group-data-pressed/item:text-on-disabled",
+	"forced-colors:group-data-pressed/item:text-[HighlightText]",
+	"forced-colors:group-data-disabled/item:group-data-pressed/item:text-[Canvas]"
 ].join(" ");
 function useItemClass(iconOnly, className) {
 	const { size } = useContext(ToolbarContext);
@@ -8555,7 +9390,7 @@ function ToolbarGroup({ className, ...props }) {
 function ToolbarSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar$1.Separator, {
 		...props,
-		className: cn("shrink-0 self-center bg-line-strong", "data-[orientation=vertical]:mx-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px", "data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-4", className)
+		className: cn("shrink-0 self-center bg-line-strong", "forced-colors:bg-[ButtonText] forced-colors:in-data-disabled:bg-[GrayText]", "data-[orientation=vertical]:mx-1 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px", "data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-4", className)
 	});
 }
 //#endregion
@@ -8671,6 +9506,7 @@ function TopBar({ brand, tools, action, menu, className, children, ...props }) {
 //#region src/hooks/useTheme.ts
 const STORAGE_KEY = "ef-theme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
+const REDUCE_QUERY = "(prefers-reduced-motion: reduce)";
 const serverSnapshot = {
 	theme: "light",
 	resolvedTheme: "light"
@@ -8678,6 +9514,8 @@ const serverSnapshot = {
 const listeners = /* @__PURE__ */ new Set();
 let snapshot = null;
 let stopWatchingSystem = null;
+/** 正在走的那一次切换（视图过渡）：它走完才撤掉 <html> 上的标记 */
+let switching = null;
 function isPreference(value) {
 	return value === "light" || value === "dark" || value === "system";
 }
@@ -8703,13 +9541,39 @@ function getSnapshot() {
 	}
 	return snapshot;
 }
+/**
+* 换主题。亮暗真的变了、浏览器有视图过渡、系统没开"减少动态效果"时，放在视图过渡里换：
+* 整页交叉淡化一次，而不是带换色过渡的慢慢过去、别的硬切，参差不齐。否则当场换。
+*
+* 走视图过渡的时候是晚一帧才换的——浏览器要先把旧的样子拍下来。
+* 期间 <html> 上标着 data-theme-switching：淡化的时长挂在它下面（theme.css），
+* 使用方自己的视图过渡不受影响。局部主题那几块新旧一个样，看不出变化。
+*/
 function commit(theme) {
-	snapshot = {
+	const next = {
 		theme,
 		resolvedTheme: resolve(theme)
 	};
-	document.documentElement.dataset.theme = snapshot.resolvedTheme;
-	for (const listener of listeners) listener();
+	const element = document.documentElement;
+	const apply = () => {
+		snapshot = next;
+		element.dataset.theme = next.resolvedTheme;
+		for (const listener of listeners) listener();
+	};
+	if (element.dataset.theme === next.resolvedTheme || typeof document.startViewTransition !== "function" || window.matchMedia?.(REDUCE_QUERY).matches) {
+		apply();
+		return;
+	}
+	element.dataset.themeSwitching = "";
+	const transition = document.startViewTransition(apply);
+	switching = transition;
+	const done = () => {
+		if (switching !== transition) return;
+		switching = null;
+		delete element.dataset.themeSwitching;
+	};
+	transition.finished.then(done, done);
+	transition.ready.catch(() => {});
 }
 function subscribe(listener) {
 	listeners.add(listener);
@@ -8740,7 +9604,8 @@ function setTheme(theme) {
 *
 * - `theme`：用户的选择，可以是 `"system"`；
 * - `resolvedTheme`：实际生效的 `"light"` 或 `"dark"`；
-* - `setTheme`：切换并记到 `localStorage`。
+* - `setTheme`：切换并记到 `localStorage`。亮暗变了的时候整页交叉淡化一次
+*   （浏览器支持视图过渡、系统没开"减少动态效果"时；否则直接切）。
 */
 function useTheme() {
 	const { theme, resolvedTheme } = useSyncExternalStore(subscribe, getSnapshot, () => serverSnapshot);
@@ -8758,4 +9623,4 @@ function useTheme() {
 /** 三条横线：打开菜单 */
 const Menu = createIcon("Menu", /* @__PURE__ */ jsx("path", { d: "M3 6h18M3 12h18M3 18h18" }));
 //#endregion
-export { Accordion, AccordionItem, Alert, ArrowCorner, ArrowLeft, ArrowRight, Avatar, AvatarSwitcher, AvatarSwitcherItem, BackToTop, Badge, BracketTitle, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, CalendarIcon, Carousel, CarouselSlide, Check, Checkbox, ChevronDown, ChevronLeft, ChevronRight, Close, Combobox, CompletionBanner, ContextMenu, CornerBrackets, Countdown, Crosshair, DashIndicator, DataRow, DataRowList, DatePicker, DateRangePicker, Dialog, DialogClose, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, EmptyState, Field, FileItem, FileUpload, FilterChip, FlyoutBar, FlyoutBarItem, GhostText, Hatch, HazardStripe, HoverCard, IconButton, ImageViewer, ImageViewerItem, Input, ItemGrid, ItemSlot, Kbd, List, ListRow, Loader, Lock, Marquee, MediaCard, Menu, Minus, NavAction, NavMenu, NavMenuItem, Navigator, OtpInput, PageHeader, PageHeaderBack, Pagination, Panel, PanelBody, PanelHeader, PanelRow, PanelRows, PlayButton, PlayMark, Plus, Popover, PopoverClose, Progress, ProgressRing, Radio, RadioGroup, RecIndicator, RegistrationStrip, ResourceChip, Schedule, ScheduleItem, ScheduleTrack, ScrollArea, ScrollHint, SectionTitle, Segment, SegmentedControl, Select, SelectGroup, SelectItem, SelectSeparator, SideRail, SideRailGroup, SideRailItem, SideRailSub, SideRailSubItem, Skeleton, Slider, Sparkline, Spinner, Stat, StatusDanger, StatusInfo, StatusSuccess, StatusWarning, Step, Stepper, Steps, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableExpander, TableHead, TableHeaderCell, TableRow, Tabs, Tag, TagInput, TagPair, Term, Textarea, Texture, TickRing, Timeline, TimelineItem, ToastProvider, Toc, TocItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggle, ToolbarToggleGroup, Tooltip, TooltipProvider, TopBar, TriangleRight, Upload, Viewfinder, cn, createIcon, useControllableState, useFieldContext, useFieldControl, useInView, usePortalScope, useTheme, useToast };
+export { Accordion, AccordionItem, Alert, ArrowCorner, ArrowLeft, ArrowRight, Avatar, AvatarSwitcher, AvatarSwitcherItem, BackToTop, Badge, BracketTitle, Breadcrumb, BreadcrumbItem, Button, ButtonGroup, Calendar, CalendarIcon, Carousel, CarouselSlide, Check, Checkbox, ChevronDown, ChevronLeft, ChevronRight, Close, Combobox, CompletionBanner, ContextMenu, CornerBrackets, Countdown, Crosshair, DashIndicator, DataRow, DataRowList, DatePicker, DateRangePicker, Dialog, DialogClose, Drawer, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuGroup, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, EmptyState, Field, FileItem, FileUpload, FilterChip, FlyoutBar, FlyoutBarItem, GhostText, Hatch, HazardStripe, HoverCard, IconButton, ImageViewer, ImageViewerItem, Input, ItemGrid, ItemSlot, Kbd, List, ListRow, Loader, Lock, Marquee, MediaCard, Menu, Minus, NavAction, NavMenu, NavMenuItem, Navigator, OtpInput, PageHeader, PageHeaderBack, Pagination, Panel, PanelBody, PanelHeader, PanelRow, PanelRows, PlayButton, PlayMark, Plus, Popover, PopoverClose, Progress, ProgressRing, Radio, RadioGroup, RecIndicator, RegistrationStrip, ResourceChip, RollingNumber, Schedule, ScheduleItem, ScheduleTrack, ScrollArea, ScrollHint, SectionTitle, Segment, SegmentedControl, Select, SelectGroup, SelectItem, SelectSeparator, SideRail, SideRailGroup, SideRailItem, SideRailSub, SideRailSubItem, Skeleton, Slider, Sparkline, Spinner, Stat, StatusDanger, StatusInfo, StatusSuccess, StatusWarning, Step, Stepper, Steps, Switch, Tab, TabList, TabPanel, Table, TableBody, TableCell, TableExpander, TableHead, TableHeaderCell, TableRow, Tabs, Tag, TagInput, TagPair, Term, Textarea, Texture, TickRing, Timeline, TimelineItem, ToastProvider, Toc, TocItem, Toolbar, ToolbarButton, ToolbarGroup, ToolbarSeparator, ToolbarToggle, ToolbarToggleGroup, Tooltip, TooltipProvider, TopBar, TriangleRight, Upload, Viewfinder, cn, createIcon, useControllableState, useFieldContext, useFieldControl, useInView, usePortalScope, useReducedMotion, useTheme, useToast };