@endfield-ui/react 0.1.0 → 0.3.0

package/dist/index.js

@@ -13,6 +13,9 @@ import { AlertDialog } from "@base-ui/react/alert-dialog";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
 import { Drawer as Drawer$1 } from "@base-ui/react/drawer";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
+import { PreviewCard } from "@base-ui/react/preview-card";
+import { OTPField } from "@base-ui/react/otp-field";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 import { Select as Select$1 } from "@base-ui/react/select";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Collapsible } from "@base-ui/react/collapsible";
@@ -73,7 +76,9 @@ const twMerge = extendTailwindMerge({ extend: { theme: {
 		"slide-in",
 		"turn-in",
 		"fade-in",
-		"indeterminate"
+		"indeterminate",
+		"bracket-in",
+		"shift-in"
 	]
 } } });
 function cn(...inputs) {
@@ -959,7 +964,7 @@ const alignClass$1 = {
 	end: "justify-end",
 	between: "justify-between"
 };
-const gapClass = {
+const gapClass$1 = {
 	sm: "gap-2",
 	md: "gap-3"
 };
@@ -973,7 +978,7 @@ function ButtonGroup({ align = "end", orientation = "horizontal", gap = "md", cl
 		role: "group",
 		...props,
 		"data-orientation": orientation,
-		className: cn("flex", gapClass[gap], orientation === "vertical" ? "flex-col items-stretch" : ["flex-wrap items-center", alignClass$1[align]], className)
+		className: cn("flex", gapClass$1[gap], orientation === "vertical" ? "flex-col items-stretch" : ["flex-wrap items-center", alignClass$1[align]], className)
 	});
 }
 //#endregion
@@ -1309,48 +1314,32 @@ function DashIndicator({ count, index, className, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/carousel/Carousel.tsx
-const ratioClass$2 = {
-	"16/9": "aspect-video",
-	"4/3": "aspect-4/3",
-	"1/1": "aspect-square",
-	"3/4": "aspect-3/4",
-	"21/9": "aspect-21/9"
-};
-const SlideContext = createContext(null);
+//#region src/components/carousel/snap-track.ts
 /** 滚动停下之后多久算"停稳了"。没有 scrollend 事件的浏览器靠它 */
 const SETTLE_MS$1 = 120;
 /**
-* 媒体轮播：一次看一张的大幅媒体，前后翻。不自动播放。
-* 轨道是原生的横向滚动加滚动吸附，触屏滑动是浏览器自带的。
+* 一条横向滚动加滚动吸附的轨道，每一张和轨道一样宽。下标和滚动位置互相跟：
+* 下标变了轨道滚过去；用户自己滑的时候反过来，等滚动停稳，由停下的位置定下标。
+* 手势、惯性都是浏览器的。媒体轮播和图片查看共用，不对外导出。
+*
+* 把 `trackRef` 和 `onScroll` 交给那个滚动容器。
 */
-function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = false, ratio = "16/9", indicator = false, previousLabel = "上一张", nextLabel = "下一张", className, children, ...props }) {
-	const slides = Children.toArray(children).filter((child) => isValidElement(child));
-	const count = slides.length;
-	const last = Math.max(0, count - 1);
-	const [rawIndex, setIndex] = useControllableState({
-		value: indexProp,
-		defaultValue: defaultIndex,
-		onChange: onIndexChange
-	});
-	const index = Math.min(Math.max(rawIndex, 0), last);
+function useSnapTrack({ index, count, onSettle }) {
 	const trackRef = useRef(null);
 	const settleTimer = useRef(void 0);
+	const last = Math.max(0, count - 1);
 	const indexRef = useRef(index);
 	indexRef.current = index;
-	const go = (next) => {
-		if (count === 0) return;
-		const target = loop ? (next + count) % count : Math.min(Math.max(next, 0), last);
-		setIndex(target);
-		if (!loop && (target === 0 || target === last) && document.activeElement instanceof HTMLButtonElement && trackRef.current?.parentElement?.contains(document.activeElement)) trackRef.current.focus({ preventScroll: true });
-	};
+	const placed = useRef(false);
 	useEffect(() => {
+		const first = !placed.current;
+		placed.current = true;
 		const track = trackRef.current;
 		if (!track || track.clientWidth === 0) return;
 		if (Math.round(track.scrollLeft / track.clientWidth) === index) return;
 		track.scrollTo?.({
 			left: index * track.clientWidth,
-			behavior: "smooth"
+			behavior: first ? "instant" : "smooth"
 		});
 	}, [index]);
 	useEffect(() => {
@@ -1366,15 +1355,54 @@ function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = fa
 		return () => observer.disconnect();
 	}, []);
 	useEffect(() => () => clearTimeout(settleTimer.current), []);
-	const onScroll = useCallback(() => {
-		clearTimeout(settleTimer.current);
-		settleTimer.current = setTimeout(() => {
-			const track = trackRef.current;
-			if (!track || track.clientWidth === 0) return;
-			const stopped = Math.round(track.scrollLeft / track.clientWidth);
-			setIndex(Math.min(Math.max(stopped, 0), last));
-		}, SETTLE_MS$1);
-	}, [setIndex, last]);
+	return {
+		trackRef,
+		onScroll: useCallback(() => {
+			clearTimeout(settleTimer.current);
+			settleTimer.current = setTimeout(() => {
+				const track = trackRef.current;
+				if (!track || track.clientWidth === 0) return;
+				const stopped = Math.round(track.scrollLeft / track.clientWidth);
+				onSettle(Math.min(Math.max(stopped, 0), last));
+			}, SETTLE_MS$1);
+		}, [onSettle, last])
+	};
+}
+//#endregion
+//#region src/components/carousel/Carousel.tsx
+const ratioClass$3 = {
+	"16/9": "aspect-video",
+	"4/3": "aspect-4/3",
+	"1/1": "aspect-square",
+	"3/4": "aspect-3/4",
+	"21/9": "aspect-21/9"
+};
+const SlideContext = createContext(null);
+/**
+* 媒体轮播：一次看一张的大幅媒体，前后翻。不自动播放。
+* 轨道是原生的横向滚动加滚动吸附，触屏滑动是浏览器自带的。
+*/
+function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = false, ratio = "16/9", indicator = false, previousLabel = "上一张", nextLabel = "下一张", className, children, ...props }) {
+	const slides = Children.toArray(children).filter((child) => isValidElement(child));
+	const count = slides.length;
+	const last = Math.max(0, count - 1);
+	const [rawIndex, setIndex] = useControllableState({
+		value: indexProp,
+		defaultValue: defaultIndex,
+		onChange: onIndexChange
+	});
+	const index = Math.min(Math.max(rawIndex, 0), last);
+	const { trackRef, onScroll } = useSnapTrack({
+		index,
+		count,
+		onSettle: setIndex
+	});
+	const go = (next) => {
+		if (count === 0) return;
+		const target = loop ? (next + count) % count : Math.min(Math.max(next, 0), last);
+		setIndex(target);
+		if (!loop && (target === 0 || target === last) && document.activeElement instanceof HTMLButtonElement && trackRef.current?.parentElement?.contains(document.activeElement)) trackRef.current.focus({ preventScroll: true });
+	};
 	const onKeyDown = (event) => {
 		const next = {
 			ArrowLeft: index - 1,
@@ -1403,7 +1431,7 @@ function Carousel({ index: indexProp, defaultIndex = 0, onIndexChange, loop = fa
 				onKeyDown: (event) => {
 					if (event.target === event.currentTarget) onKeyDown(event);
 				},
-				className: cn("flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain bg-surface-muted [scrollbar-width:none]", focusRing, ratioClass$2[ratio]),
+				className: cn("flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain bg-surface-muted [scrollbar-width:none]", focusRing, ratioClass$3[ratio]),
 				children: slides.map((slide, position) => /* @__PURE__ */ jsx(SlideContext, {
 					value: {
 						position,
@@ -1498,8 +1526,11 @@ 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 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 peer-disabled:text-ink-disabled";
+/**
+* 压在方格 / 圆正中的记号，默认透明，由 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";
 //#endregion
 //#region src/components/checkbox/Checkbox.tsx
 /**
@@ -1691,14 +1722,37 @@ function MenuCheck({ checked, disabled = false }) {
 	});
 }
 //#endregion
+//#region src/lib/motion.ts
+/**
+* 浮层从触发它的那一侧来：进场的起点往触发处偏 `--motion-shift`，走完归位。
+* 用在基元的浮层面板上——它们带着 `data-side`（面板在触发元素的哪一侧）。
+*
+* 位移只写在 `data-starting-style` 上：退场不走位移，只淡出。
+* 用的地方自己给 `translate` 加过渡。`inline-start` / `inline-end` 按从左往右的排版算。
+*/
+const enterFromSide = [
+	"data-starting-style:data-[side=bottom]:-translate-y-(--motion-shift)",
+	"data-starting-style:data-[side=top]:translate-y-(--motion-shift)",
+	"data-starting-style:data-[side=right]:-translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=left]:translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=inline-end]:-translate-x-(--motion-shift)",
+	"data-starting-style:data-[side=inline-start]:translate-x-(--motion-shift)"
+].join(" ");
+//#endregion
 //#region src/components/dropdown-menu/menu-style.ts
 /** 选项要知道自己在哪种面板里，才知道"当前项"怎么画 */
 const MenuVariantContext = createContext("plain");
-/** 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽 */
+/**
+* 面板：直角、1px 线、环境阴影；顶部一条半宽的行动色细条，展开时从 0 伸到一半宽。
+*
+* 进场：淡入（200ms），同时从触发处那一侧挪过来 4px（300ms，和细条同一拍）。
+* 退场只淡出——位移只写在起点上。两个时长、两条缓动按属性一一对应
+*/
 const menuPanel = [
 	"relative min-w-40 border border-line bg-surface-raised py-1 text-ink shadow-sm outline-none",
-	"origin-(--transform-origin) transition-opacity duration-(--duration-fast) ease-standard",
+	"origin-(--transform-origin) transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]",
 	"data-ending-style:opacity-0 data-starting-style:opacity-0",
+	enterFromSide,
 	"before:pointer-events-none before:absolute before:-top-px before:-left-px before:h-[3px] before:w-1/2 before:origin-left before:bg-action before:content-['']",
 	"before:transition-transform before:duration-(--duration-base) before:ease-exit data-starting-style:before:scale-x-0",
 	"forced-colors:before:hidden"
@@ -2179,13 +2233,14 @@ const sizeClass$7 = {
 * 用于矩阵里的单选（物品格、名册卡、图鉴）；列表行用左缘色条，页签用底色，都不用它。
 *
 * 括号画在盒子之外 4px：它所在的容器不能贴着盒子裁切。
+* 出现时八段短线从角的顶点伸到满长（200ms），消失是直接消失。
 * 括号只是给眼睛看的，选中态另外要有 `aria-selected` / `aria-pressed`。
 */
 function CornerBrackets({ visible = true, size = "sm", className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		"data-visible": visible ? "" : void 0,
-		className: cn("relative", visible && "corner-brackets", sizeClass$7[size], className)
+		className: cn("relative", visible && "corner-brackets after:animate-bracket-in", sizeClass$7[size], className)
 	});
 }
 //#endregion
@@ -2842,7 +2897,7 @@ function Dialog({ trigger, open, defaultOpen, onOpenChange, title, description,
 					initialFocus: initialFocus ?? firstFocusableIn(contentRef),
 					finalFocus,
 					"data-size": size,
-					className: cn(overlaySurface, "relative flex max-h-full min-h-0 w-full flex-col", "transition-[scale,opacity] duration-(--duration-base) ease-exit", "data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0", sizeClass$5[size], className),
+					className: cn(overlaySurface, "relative flex max-h-full min-h-0 w-full flex-col", "transition-[opacity,translate] duration-[var(--duration-fast),var(--duration-base)] ease-[var(--ease-standard),var(--ease-exit)]", "data-ending-style:opacity-0 data-starting-style:translate-y-(--motion-shift-lg) data-starting-style:opacity-0", sizeClass$5[size], className),
 					children: [/* @__PURE__ */ jsxs("div", {
 						"data-theme": "dark",
 						className: cn(overlayHeader, "min-h-16 justify-center px-12"),
@@ -3594,7 +3649,7 @@ function FileUpload({ value, defaultValue, onValueChange, multiple = false, acce
 					dragging && /* @__PURE__ */ jsx("span", {
 						"aria-hidden": "true",
 						"data-brackets": "",
-						className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "corner-brackets absolute inset-1.5 [--bracket-offset:0px]")
+						className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "corner-brackets absolute inset-1.5 [--bracket-offset:0px] after:animate-bracket-in")
 					}),
 					/* @__PURE__ */ jsx("input", {
 						ref: mergeRefs(inputRef, ref),
@@ -3753,6 +3808,346 @@ function HazardStripe({ size = "md", className, ...props }) {
 	});
 }
 //#endregion
+//#region src/components/popover/panel-style.ts
+/**
+* 气泡卡片与悬浮卡共用的面板：下拉菜单的那一块，只把上下 4px 的内边距换成四周 16px。
+* 宽度跟着内容走，最宽 320px，也不超过视口里剩下的地方。
+* 要经过 `cn()`：后面的 `p-4` 要盖掉菜单面板自带的上下内边距
+*/
+const popoverPanel = [menuPanel, "flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere"];
+//#endregion
+//#region src/components/hover-card/HoverCard.tsx
+/**
+* 悬浮卡：指针停在一个链接上时，在旁边预览它的去处。面板和气泡卡片是同一块。
+*
+* 触屏上不出现，读屏也不会读到它：里面只放"点进去也看得到"的内容，
+* 不放只有这里才有的信息和操作。要操作的用 `Popover`，一句说明用 `Tooltip`。
+*/
+function HoverCard({ trigger, title, description, side = "bottom", align = "start", delay = 600, closeDelay = 300, open, defaultOpen, onOpenChange, className, children, ...props }) {
+	const { anchorRef, portalRef } = usePortalScope();
+	return /* @__PURE__ */ jsxs(PreviewCard.Root, {
+		open,
+		defaultOpen,
+		onOpenChange: onOpenChange && ((next) => onOpenChange(next)),
+		children: [/* @__PURE__ */ jsx(PreviewCard.Trigger, {
+			ref: anchorRef,
+			render: trigger,
+			delay,
+			closeDelay
+		}), /* @__PURE__ */ jsx(PreviewCard.Portal, {
+			ref: portalRef,
+			children: /* @__PURE__ */ jsx(PreviewCard.Positioner, {
+				side,
+				align,
+				sideOffset: 4,
+				className: "z-(--z-overlay) outline-none",
+				children: /* @__PURE__ */ jsxs(PreviewCard.Popup, {
+					...props,
+					"data-hover-card": "",
+					className: cn(popoverPanel, className),
+					children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-1",
+						children: [title && /* @__PURE__ */ jsx("p", {
+							className: "text-base font-bold",
+							children: title
+						}), description && /* @__PURE__ */ jsx("p", {
+							className: "text-ink-secondary",
+							children: description
+						})]
+					}), children]
+				})
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/components/viewfinder/Viewfinder.tsx
+const armClass = {
+	sm: "[--bracket-arm:16px]",
+	md: "[--bracket-arm:24px]"
+};
+const readoutPosition = {
+	topLeft: "top-5 left-5",
+	topRight: "top-5 right-5 text-right",
+	bottomLeft: "bottom-5 left-5",
+	bottomRight: "right-5 bottom-5 text-right"
+};
+/**
+* 取景角：框住一张图、一片地图区域、一个焦点，标的是"范围"，不是选中。
+* 里面放被框住的内容；压在深色画面上时给它加 `data-theme="dark"`。
+*
+* 只用在展示性的画面上，一屏一处。取景角与准星是装饰，读数是真实信息、读屏读得到。
+*/
+function Viewfinder({ size = "sm", crosshair = false, animate = false, readouts, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cn("relative text-ink", className),
+		children: [
+			children,
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: cn(decor, "corner-brackets absolute inset-3 [--bracket-color:currentColor] [--bracket-offset:0px] [--bracket-width:1.5px]", armClass[size], animate && "after:animate-bracket-in after:[animation-delay:var(--bracket-delay,0s)]")
+			}),
+			crosshair && /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				focusable: "false",
+				viewBox: "0 0 12 12",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: 1.5,
+				className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "absolute top-1/2 left-1/2 size-3 -translate-1/2 text-accent-ink"),
+				children: /* @__PURE__ */ jsx("path", { d: "M6 0v12M0 6h12" })
+			}),
+			readouts && Object.keys(readoutPosition).map((corner) => readouts[corner] !== void 0 && /* @__PURE__ */ jsx("span", {
+				"data-corner": corner,
+				className: cn("pointer-events-none absolute font-tech text-xs leading-none text-ink-secondary tabular-nums", readoutPosition[corner]),
+				children: readouts[corner]
+			}, corner))
+		]
+	});
+}
+//#endregion
+//#region src/components/image-viewer/ImageViewer.tsx
+const ratioClass$2 = {
+	"16/9": "aspect-video",
+	"4/3": "aspect-4/3",
+	"1/1": "aspect-square",
+	"3/4": "aspect-3/4"
+};
+const ItemContext = createContext(null);
+/**
+* 图片查看：一组缩略图，点一张放大到整屏看，前后翻。
+* 大图那一层在亮暗两个主题下都是深色；翻页用的是媒体轮播的那条轨道，触屏可以左右滑。
+*
+* `className` 和其余属性给缩略图的列表。
+*/
+function ImageViewer({ "aria-label": label, open: openProp, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, loop = false, ratio = "4/3", viewLabel = "查看大图", previousLabel = "上一张", nextLabel = "下一张", closeLabel = "关闭", className, children, ...props }) {
+	const items = Children.toArray(children).filter((child) => isValidElement(child));
+	const count = items.length;
+	const last = Math.max(0, count - 1);
+	const [open, setOpen] = useControllableState({
+		value: openProp,
+		defaultValue: false,
+		onChange: onOpenChange
+	});
+	const [rawIndex, setIndex] = useControllableState({
+		value: indexProp,
+		defaultValue: defaultIndex,
+		onChange: onIndexChange
+	});
+	const index = Math.min(Math.max(rawIndex, 0), last);
+	const thumbs = useRef([]);
+	const openAt = (position) => {
+		setIndex(position);
+		setOpen(true);
+	};
+	const register = (position, node) => {
+		thumbs.current[position] = node;
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("ul", {
+		...props,
+		"aria-label": label,
+		"data-ratio": ratio,
+		className: cn("grid grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-2 text-ink", className),
+		children: items.map((item, position) => /* @__PURE__ */ jsx(ItemContext, {
+			value: {
+				position,
+				count,
+				ratio,
+				viewLabel,
+				open: openAt,
+				register
+			},
+			children: item
+		}, position))
+	}), /* @__PURE__ */ jsx(Dialog$1.Root, {
+		open,
+		onOpenChange: (next) => setOpen(next),
+		children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(Dialog$1.Viewport, {
+			className: "fixed inset-0 z-(--z-overlay)",
+			children: /* @__PURE__ */ jsx(Stage, {
+				label,
+				items,
+				index,
+				setIndex,
+				loop,
+				previousLabel,
+				nextLabel,
+				closeLabel,
+				thumbs,
+				onClose: () => setOpen(false)
+			})
+		}) })
+	})] });
+}
+/** 大图层。只在打开的时候挂着：轨道一挂上就直接对到被点的那一张 */
+function Stage({ label, items, index, setIndex, loop, previousLabel, nextLabel, closeLabel, thumbs, onClose }) {
+	const count = items.length;
+	const last = Math.max(0, count - 1);
+	const { trackRef, onScroll } = useSnapTrack({
+		index,
+		count,
+		onSettle: setIndex
+	});
+	const popupRef = useRef(null);
+	const indexRef = useRef(index);
+	indexRef.current = index;
+	const go = (next) => {
+		if (count === 0) return;
+		const target = loop ? (next + count) % count : Math.min(Math.max(next, 0), last);
+		setIndex(target);
+		if (!loop && (target === 0 || target === last) && document.activeElement instanceof HTMLButtonElement && document.activeElement.hasAttribute("data-image-viewer-nav")) popupRef.current?.focus({ preventScroll: true });
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented) return;
+		if (event.target.closest("video, audio, input, textarea")) return;
+		const next = {
+			ArrowLeft: index - 1,
+			ArrowRight: index + 1,
+			Home: 0,
+			End: last
+		}[event.key];
+		if (next === void 0) return;
+		event.preventDefault();
+		go(next);
+	};
+	const current = items[index]?.props;
+	const many = count > 1;
+	const captioned = Boolean(current?.title || current?.description);
+	return /* @__PURE__ */ jsxs(Dialog$1.Popup, {
+		"data-theme": "dark",
+		"data-image-viewer": "",
+		ref: popupRef,
+		initialFocus: popupRef,
+		finalFocus: () => thumbs.current[indexRef.current] ?? true,
+		onKeyDown,
+		className: cn("flex size-full flex-col bg-surface text-ink outline-none", "transition-opacity duration-(--duration-fast) ease-standard", "data-ending-style:opacity-0 data-starting-style:opacity-0"),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cn(overlayHeader, "h-14 px-4"),
+				children: [
+					/* @__PURE__ */ jsx(Dialog$1.Title, {
+						className: "sr-only",
+						children: label
+					}),
+					many && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						"data-count": "",
+						className: "font-tech text-sm text-ink-secondary tabular-nums",
+						children: `${index + 1} / ${count}`
+					}),
+					/* @__PURE__ */ jsx(Dialog$1.Close, {
+						"aria-label": closeLabel,
+						className: overlayClose,
+						children: /* @__PURE__ */ jsx(Close, { size: 24 })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx(Viewfinder, {
+				size: "md",
+				animate: true,
+				className: "min-h-0 flex-1 [--bracket-delay:var(--duration-fast)]",
+				children: /* @__PURE__ */ jsx("div", {
+					ref: trackRef,
+					"data-image-viewer-track": "",
+					onScroll,
+					className: "absolute inset-0 flex snap-x snap-mandatory overflow-x-auto overscroll-x-contain [scrollbar-width:none]",
+					children: items.map((item, position) => /* @__PURE__ */ jsx(Slide, {
+						label: `第 ${position + 1} 张，共 ${count} 张`,
+						current: position === index,
+						onClose,
+						children: Math.abs(position - index) <= 1 ? item.props.children : null
+					}, position))
+				})
+			}),
+			(many || captioned) && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 flex-wrap items-start gap-x-6 gap-y-3 border-t border-line px-4 py-4",
+				children: [many && /* @__PURE__ */ jsxs("div", {
+					className: "flex shrink-0 gap-2",
+					children: [/* @__PURE__ */ jsx(IconButton, {
+						variant: "floating",
+						"aria-label": previousLabel,
+						"data-image-viewer-nav": "",
+						disabled: !loop && index <= 0,
+						onClick: () => go(index - 1),
+						children: /* @__PURE__ */ jsx(ChevronLeft, {})
+					}), /* @__PURE__ */ jsx(IconButton, {
+						variant: "floating",
+						"aria-label": nextLabel,
+						"data-image-viewer-nav": "",
+						disabled: !loop && index >= last,
+						onClick: () => go(index + 1),
+						children: /* @__PURE__ */ jsx(ChevronRight, {})
+					})]
+				}), /* @__PURE__ */ jsxs("div", {
+					"aria-live": "polite",
+					className: "flex min-w-0 flex-1 basis-48 flex-col gap-1",
+					children: [
+						many && /* @__PURE__ */ jsx("span", {
+							className: "sr-only",
+							children: `第 ${index + 1} 张，共 ${count} 张`
+						}),
+						current?.title && /* @__PURE__ */ jsx("p", {
+							className: "text-base font-bold wrap-anywhere",
+							children: current.title
+						}),
+						current?.description && /* @__PURE__ */ jsx("p", {
+							className: "max-h-24 overflow-y-auto text-sm wrap-anywhere text-ink-secondary",
+							children: current.description
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+/**
+* 轨道上的一张。图是使用方给的元素，这里不碰它，只在外面听它的 `load`：
+* 还没取到的图是透明的，取到了淡入——不是"啪"地一下出现。
+* 只管直接放进来的 `<img>`；视频、别的内容不等，和原来一样直接在
+*/
+function Slide({ label, current, onClose, children }) {
+	const [loaded, setLoaded] = useState(false);
+	const settle = () => setLoaded(true);
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"aria-roledescription": "幻灯片",
+		"aria-label": label,
+		inert: !current,
+		"data-current": current ? "" : void 0,
+		"data-loaded": loaded ? "" : void 0,
+		onLoadCapture: settle,
+		onErrorCapture: settle,
+		onClick: (event) => {
+			if (event.target === event.currentTarget) onClose();
+		},
+		className: cn("flex size-full shrink-0 snap-start items-center justify-center p-6 sm:p-10", "*:max-h-full *:max-w-full [&>img]:object-contain [&>video]:object-contain", "[&>img]:transition-opacity [&>img]:duration-(--duration-fast) [&>img]:ease-standard not-data-loaded:[&>img]:opacity-0"),
+		children
+	});
+}
+/** 图片查看里的一张。直接放在 `ImageViewer` 里。 */
+function ImageViewerItem({ title, description: _description, thumbnail, "aria-label": ariaLabel, className, children, ...props }) {
+	const item = useContext(ItemContext);
+	if (!item) throw new Error("ImageViewerItem 要直接放在 ImageViewer 里面");
+	const name = ariaLabel ?? `${item.viewLabel}：${typeof title === "string" ? title : `第 ${item.position + 1} 张，共 ${item.count} 张`}`;
+	return /* @__PURE__ */ jsx("li", {
+		...props,
+		className: cn("min-w-0", className),
+		children: /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			ref: (node) => item.register(item.position, node),
+			"aria-label": name,
+			"aria-haspopup": "dialog",
+			onClick: () => item.open(item.position),
+			className: cn("group/thumb relative block w-full overflow-clip rounded-md bg-surface-muted", "[&>img]:size-full [&>img]:object-cover [&>svg]:size-full [&>video]:size-full [&>video]:object-cover", focusRing, ratioClass$2[item.ratio]),
+			children: [thumbnail ?? children, /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "pointer-events-none absolute inset-x-0 bottom-0 h-1 origin-left scale-x-0 bg-action transition-transform duration-(--duration-base) ease-standard group-hover/thumb:scale-x-100 group-focus-visible/thumb:scale-x-100"
+			})]
+		})
+	});
+}
+//#endregion
 //#region src/components/input/Input.tsx
 /**
 * 单行输入框。`className` 给外框，其余属性与 `ref` 给里面的 `<input>`。
@@ -4050,7 +4445,7 @@ function ItemSlot({ name, label, count, rarity, ratio = "1/1", selected = false,
 		...props,
 		"data-selected": selected ? "" : void 0,
 		"data-rarity": rarity,
-		className: cn("relative", ratioClass$1[ratio], selected && "corner-brackets", className),
+		className: cn("relative", ratioClass$1[ratio], selected && "corner-brackets after:animate-bracket-in", className),
 		children: node
 	});
 }
@@ -4548,8 +4943,13 @@ function NavMenu({ trigger, open, defaultOpen = false, onOpenChange, title, bran
 		})]
 	});
 }
+const itemEnter = [
+	"animate-shift-in [--shift-x:calc(var(--motion-shift-lg)*-1)]",
+	"[animation-delay:100ms] nth-2:[animation-delay:150ms] nth-3:[animation-delay:200ms]",
+	"nth-4:[animation-delay:250ms] nth-5:[animation-delay:300ms] nth-[n+6]:[animation-delay:350ms]"
+].join(" ");
 /** 全屏菜单里的一个栏目。 */
-function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = true, href, target, rel, render, onClick, children, ...props }) {
+function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = true, href, target, rel, render, onClick, className, children, ...props }) {
 	const close = useContext(NavMenuContext);
 	const isLink = href !== void 0 || render !== void 0;
 	const handleClick = (event) => {
@@ -4586,6 +4986,7 @@ function NavMenuItem({ icon, current = false, disabled = false, closeOnClick = t
 	] });
 	return /* @__PURE__ */ jsx("li", {
 		...props,
+		className: cn(itemEnter, className),
 		children: isLink ? /* @__PURE__ */ jsx(LinkElement, {
 			render,
 			href: disabled ? void 0 : href,
@@ -4683,6 +5084,174 @@ function Navigator({ items, index, defaultIndex = 0, onIndexChange, loop = false
 	});
 }
 //#endregion
+//#region src/components/otp-input/OtpInput.tsx
+const slotSize = {
+	sm: "h-8 w-8 text-base",
+	md: "h-10 w-10 text-lg",
+	lg: "h-14 w-14 text-2xl"
+};
+const slotFrame = {
+	sunken: "border-b-2",
+	outline: "border"
+};
+const slotFill = {
+	sunken: "bg-surface-sunken",
+	outline: "bg-surface"
+};
+const gapClass = {
+	sm: "gap-1.5",
+	md: "gap-2",
+	lg: "gap-2"
+};
+const defaultSlotLabel = (position, length) => `第 ${position} 位，共 ${length} 位`;
+const toUpperCase = (value) => value.toUpperCase();
+/**
+* 验证码输入：一格一位的短码。每一格是一个真的输入框——打一位跳一格，
+* 粘贴一整串会分到各格，整组在 Tab 顺序里只停一次。
+*
+* 每个都要有标签：放进 `Field`，或者自己传 `aria-label`。
+* `className` 与 `ref` 给外面那一排。
+*/
+function OtpInput({ length = 6, value, defaultValue, onValueChange, onComplete, type = "numeric", uppercase = false, mask = false, groupSize, size = "md", variant = "sunken", invalid: invalidProp, id: idProp, disabled: disabledProp, required: requiredProp, readOnly = false, name, form, autoSubmit = false, autoFocus = false, slotLabel = defaultSlotLabel, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": describedByProp, className, ...props }) {
+	const fieldContext = useFieldContext();
+	const { id, disabled, required, invalid, ...field } = useFieldControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		invalid: invalidProp,
+		"aria-describedby": describedByProp
+	});
+	const describedBy = field["aria-describedby"];
+	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 group = groupSize !== void 0 && groupSize > 0 ? groupSize : 0;
+	return /* @__PURE__ */ jsxs(OTPField.Root, {
+		...props,
+		id,
+		length,
+		value,
+		defaultValue,
+		onValueChange: onValueChange && ((next) => onValueChange(next)),
+		onValueComplete: onComplete && ((next) => onComplete(next)),
+		validationType: type,
+		normalizeValue: uppercase ? toUpperCase : void 0,
+		mask,
+		disabled,
+		readOnly,
+		required,
+		name,
+		form,
+		autoSubmit,
+		"aria-labelledby": groupLabel,
+		"aria-describedby": describedBy,
+		"data-size": size,
+		"data-variant": variant,
+		"data-invalid": invalid ? "" : void 0,
+		className: cn("flex max-w-full min-w-0 items-center", gapClass[size], className),
+		children: [ariaLabel && !ariaLabelledBy && /* @__PURE__ */ jsx("span", {
+			id: labelId,
+			hidden: true,
+			children: ariaLabel
+		}), 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"
+		}), /* @__PURE__ */ jsx(OTPField.Input, {
+			...index === 0 ? {
+				"aria-labelledby": ownLabel,
+				"aria-describedby": describedBy
+			} : { "aria-label": slotLabel(index + 1, length) },
+			"aria-invalid": invalid || void 0,
+			autoFocus: autoFocus && index === 0,
+			autoCapitalize: uppercase ? "characters" : "none",
+			className: slotClass
+		})] }, index))]
+	});
+}
+//#endregion
+//#region src/icons/ArrowLeft.tsx
+const ArrowLeft = createIcon("ArrowLeft", /* @__PURE__ */ jsx("path", { d: "M20 12H5M11 5l-7 7 7 7" }));
+//#endregion
+//#region src/components/page-header/PageHeader.tsx
+/**
+* 页头：这是哪一页、怎么回去、在这一页能做什么。一页一个。
+* 按自身的宽度响应：行动区放不下时折到标题下面。
+*/
+function PageHeader({ title, level = 1, meta, description, breadcrumb, back, actions, divider = false, sticky = false, className, children, ...props }) {
+	const Heading = `h${level}`;
+	return /* @__PURE__ */ jsxs("header", {
+		...props,
+		"data-sticky": sticky ? "" : void 0,
+		className: cn("@container flex flex-col gap-4 text-ink", divider && !sticky && "border-b border-line pb-6", sticky && "sticky top-0 z-(--z-float) border-b border-line bg-surface py-4", className),
+		children: [
+			breadcrumb,
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1",
+				children: [meta && /* @__PURE__ */ jsx("p", {
+					className: "font-tech text-xs text-ink-secondary",
+					children: meta
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-start justify-between gap-x-6 gap-y-4",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex min-w-0 flex-1 basis-64 items-start gap-4",
+						children: [back && /* @__PURE__ */ jsx("div", {
+							className: "flex h-10 shrink-0 items-center @md:h-12",
+							children: back
+						}), /* @__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",
+								children: title
+							}), description && /* @__PURE__ */ jsx("p", {
+								className: "max-w-prose text-sm text-ink-secondary",
+								children: description
+							})]
+						})]
+					}), actions && /* @__PURE__ */ jsx("div", {
+						"data-actions": "",
+						className: "flex min-h-10 flex-wrap items-center gap-2 @md:min-h-12",
+						children: actions
+					})]
+				})]
+			}),
+			children
+		]
+	});
+}
+/**
+* 页头里的返回：40px 的深灰斜纹方块加一个左箭头，`back` 按钮收成的图标形态。
+* 放进 `PageHeader` 的 `back`。
+*/
+function PageHeaderBack({ "aria-label": label = "返回", href, target, rel, render, onClick, disabled = false, className, ...props }) {
+	const classes = cn("relative inline-flex size-10 shrink-0 items-center justify-center", "transition-colors duration-(--duration-fast) ease-standard", focusRing, disabled ? "cursor-not-allowed bg-disabled text-on-disabled" : "hatch hatch-mid bg-control text-white shadow-xs hover:bg-neutral-600 active:bg-control-pressed", className);
+	const icon = /* @__PURE__ */ jsx(ArrowLeft, { size: 20 });
+	if (href !== void 0 || render !== void 0) return /* @__PURE__ */ jsx(LinkElement, {
+		render,
+		href: disabled ? void 0 : href,
+		role: disabled ? "link" : void 0,
+		"aria-disabled": disabled || void 0,
+		"aria-label": label,
+		target,
+		rel,
+		onClick: disabled ? (event) => event.preventDefault() : onClick,
+		"data-page-header-back": "",
+		className: classes,
+		children: icon
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...props,
+		type: "button",
+		"aria-label": label,
+		disabled,
+		onClick,
+		"data-page-header-back": "",
+		className: classes,
+		children: icon
+	});
+}
+//#endregion
 //#region src/components/pagination/Pagination.tsx
 const barSize = {
 	md: "h-12",
@@ -4867,7 +5436,7 @@ function Popover({ trigger, title, description, side = "bottom", align = "start"
 				className: "z-(--z-overlay) outline-none",
 				children: /* @__PURE__ */ jsxs(Popover$1.Popup, {
 					...props,
-					className: cn(menuPanel, "flex w-max max-w-[min(20rem,var(--available-width))] flex-col gap-3 p-4 text-sm wrap-anywhere", className),
+					className: cn(popoverPanel, className),
 					children: [(title || description) && /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-1",
 						children: [title && /* @__PURE__ */ jsx(Popover$1.Title, {
@@ -5343,6 +5912,64 @@ function ScheduleItem({ start, end, title, type, variant = "banner", media, href
 	});
 }
 //#endregion
+//#region src/components/scroll-area/ScrollArea.tsx
+const barClass = {
+	vertical: "w-3 before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-line",
+	horizontal: "h-3 before:absolute before:inset-x-0 before:top-1/2 before:h-px before:-translate-y-1/2 before:bg-line"
+};
+const thumbClass = {
+	vertical: "w-full before:inset-y-0 before:left-1/2 before:w-[3px] before:-translate-x-1/2",
+	horizontal: "h-full before:inset-x-0 before:top-1/2 before:h-[3px] before:-translate-y-1/2"
+};
+function Scrollbar({ orientation }) {
+	return /* @__PURE__ */ jsx(ScrollArea$1.Scrollbar, {
+		orientation,
+		className: cn("group/bar flex", barClass[orientation]),
+		children: /* @__PURE__ */ jsx(ScrollArea$1.Thumb, { className: cn("relative before:absolute before:bg-ink-secondary before:content-['']", "before:transition-colors before:duration-(--duration-fast) before:ease-standard", "group-hover/bar:before:bg-ink active:before:bg-ink", "forced-colors:before:bg-[CanvasText]", thumbClass[orientation]) })
+	});
+}
+/**
+* 滚动区：一块自己能滚的区域，滚动条是画出来的。高度（或高度上限）由 `className` 给。
+* 只有真的溢出时才有滚动条，也才是一个能聚焦的区域。
+*
+* 整页的滚动留给浏览器，不要把页面主体包进来。
+* `className` 与 `ref` 给外框，其余属性（`onScroll` 等）给真正在滚的可视区。
+*/
+function ScrollArea({ "aria-label": label, orientation = "vertical", viewportRef, className, style, ref, children, ...props }) {
+	const vertical = orientation !== "horizontal";
+	const horizontal = orientation !== "vertical";
+	return /* @__PURE__ */ jsxs(ScrollArea$1.Root, {
+		ref,
+		style,
+		"data-scroll-area": "",
+		"data-orientation": orientation,
+		className: cn("flex min-h-0 min-w-0 flex-col text-ink", className),
+		children: [
+			/* @__PURE__ */ jsx(ScrollArea$1.Viewport, {
+				...props,
+				ref: viewportRef,
+				style: orientation === "vertical" ? { overflowX: "hidden" } : orientation === "horizontal" ? { overflowY: "hidden" } : void 0,
+				className: cn("min-h-0 flex-auto", focusRingInset, vertical && "data-has-overflow-y:mr-3", horizontal && "data-has-overflow-x:mb-3"),
+				render: (viewportProps, state) => {
+					const scrollable = vertical && state.hasOverflowY || horizontal && state.hasOverflowX;
+					return /* @__PURE__ */ jsx("div", {
+						...viewportProps,
+						...scrollable && {
+							role: "region",
+							"aria-label": label
+						},
+						tabIndex: scrollable ? 0 : -1
+					});
+				},
+				children: /* @__PURE__ */ jsx(ScrollArea$1.Content, { children })
+			}),
+			vertical && /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical" }),
+			horizontal && /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal" }),
+			orientation === "both" && /* @__PURE__ */ jsx(ScrollArea$1.Corner, {})
+		]
+	});
+}
+//#endregion
 //#region src/components/scroll-hint/ScrollHint.tsx
 /**
 * 滚动提示：只在确实还能往下滚、并且还没开始滚的时候出现，滚动开始后淡出。
@@ -6112,8 +6739,9 @@ const THUMB_HALF = 6;
 const markLeft = (ratio) => `calc(${THUMB_HALF}px + (100% - 12px) * ${ratio})`;
 const thumb = [
 	"relative h-5 w-3 bg-surface-inverse shadow-[0_0_0_2px_var(--ef-surface)]",
+	"transition-[inset-inline-start] duration-(--duration-fast) ease-standard data-dragging:transition-none",
 	"before:absolute before:-inset-x-3.5 before:-inset-y-2.5 before:content-['']",
-	"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:content-[''] data-dragging:after:opacity-100",
+	"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",
 	focusRingWithin
@@ -6168,7 +6796,7 @@ function Slider(props) {
 				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 data-disabled:bg-ink-disabled" }), (range ? [0, 1] : [0]).map((index) => /* @__PURE__ */ jsx(Slider$1.Thumb, {
+					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, {
 						index,
 						...range ? { "aria-label": thumbLabels[index] } : {
 							"aria-label": ariaLabel,
@@ -6535,9 +7163,9 @@ function Step({ title, description, invalid = false, href, target, rel, render,
 			"aria-hidden": "true",
 			className: cn("flex shrink-0 items-center", railLayout[orientation]),
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("flex shrink-0 items-center justify-center font-tech leading-none tabular-nums", nodeSize[size], invalid ? "border border-danger text-danger" : nodeClass$1[status]),
+				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("flex-1 group-last/step:hidden", lineLayout[orientation], status === "done" ? "bg-ink" : "bg-line-strong") })]
+			}), /* @__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__ */ jsxs("div", {
 			className: cn("min-w-0 flex-1", bodyLayout[orientation]),
 			children: [/* @__PURE__ */ jsx("div", {
@@ -7528,11 +8156,11 @@ const toneText = {
 const placementClass = {
 	bottom: {
 		viewport: "bottom-6",
-		root: "bottom-0 translate-y-[var(--toast-swipe-movement-y,0px)]"
+		root: "bottom-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),var(--toast-swipe-movement-y,0px))] data-starting-style:translate-y-(--motion-shift-lg)"
 	},
 	center: {
 		viewport: "top-1/2",
-		root: "top-0 translate-y-[calc(-50%+var(--toast-swipe-movement-y,0px))]"
+		root: "top-0 transform-[translate(calc(-50%+var(--toast-swipe-movement-x,0px)),calc(-50%+var(--toast-swipe-movement-y,0px)))]"
 	}
 };
 function isOptions(input) {
@@ -7579,7 +8207,7 @@ function ToastHost({ placement, label, closeLabel, children }) {
 				return /* @__PURE__ */ jsx(Toast.Root, {
 					toast,
 					"data-theme": "dark",
-					className: cn("pointer-events-auto absolute left-1/2 w-max max-w-full translate-x-[calc(-50%+var(--toast-swipe-movement-x,0px))]", "border border-line bg-black/80 text-base leading-[1.4] text-white", "transition-opacity duration-(--duration-fast) ease-standard data-ending-style:opacity-0 data-starting-style:opacity-0", focusRingInset, placementClass[placement].root),
+					className: cn("pointer-events-auto absolute left-1/2 w-max max-w-full", "border border-line bg-black/80 text-base leading-[1.4] text-white", "transition-[opacity,translate,transform] duration-[var(--duration-fast),var(--duration-base),var(--duration-fast)] ease-[var(--ease-standard),var(--ease-exit),var(--ease-standard)]", "data-ending-style:opacity-0 data-starting-style:opacity-0", "data-swiping:select-none", focusRingInset, placementClass[placement].root),
 					children: /* @__PURE__ */ jsxs(Toast.Content, {
 						className: cn("flex items-center gap-3 py-2.5 pl-5", toast.data?.dismissible ? "pr-2" : "pr-5"),
 						children: [
@@ -7995,7 +8623,7 @@ function Tooltip({ content, children, side = "top", align = "center", delay, arr
 					sideOffset: arrow ? 8 : 2,
 					className: "z-(--z-overlay)",
 					children: /* @__PURE__ */ jsxs(Tooltip$1.Popup, {
-						className: cn("relative max-w-64 border border-transparent bg-surface-raised px-2.5 py-1.5 text-sm wrap-anywhere text-ink", "origin-(--transform-origin) transition-opacity duration-(--duration-fast) ease-standard", "data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0", className),
+						className: cn("relative max-w-64 border border-transparent bg-surface-raised px-2.5 py-1.5 text-sm wrap-anywhere text-ink", "origin-(--transform-origin) transition-[opacity,translate] duration-(--duration-fast) ease-standard", "data-ending-style:opacity-0 data-instant:transition-none data-starting-style:opacity-0", enterFromSide, className),
 						children: [arrow && /* @__PURE__ */ jsx(Tooltip$1.Arrow, {
 							"aria-hidden": "true",
 							className: cn("size-2 rotate-45 bg-surface-raised forced-colors:hidden", "data-[side=bottom]:-top-1 data-[side=left]:-right-1 data-[side=right]:-left-1 data-[side=top]:-bottom-1")
@@ -8040,52 +8668,6 @@ function TopBar({ brand, tools, action, menu, className, children, ...props }) {
 	});
 }
 //#endregion
-//#region src/components/viewfinder/Viewfinder.tsx
-const armClass = {
-	sm: "[--bracket-arm:16px]",
-	md: "[--bracket-arm:24px]"
-};
-const readoutPosition = {
-	topLeft: "top-5 left-5",
-	topRight: "top-5 right-5 text-right",
-	bottomLeft: "bottom-5 left-5",
-	bottomRight: "right-5 bottom-5 text-right"
-};
-/**
-* 取景角：框住一张图、一片地图区域、一个焦点，标的是"范围"，不是选中。
-* 里面放被框住的内容；压在深色画面上时给它加 `data-theme="dark"`。
-*
-* 只用在展示性的画面上，一屏一处。取景角与准星是装饰，读数是真实信息、读屏读得到。
-*/
-function Viewfinder({ size = "sm", crosshair = false, readouts, className, children, ...props }) {
-	return /* @__PURE__ */ jsxs("div", {
-		...props,
-		className: cn("relative text-ink", className),
-		children: [
-			children,
-			/* @__PURE__ */ jsx("span", {
-				"aria-hidden": "true",
-				className: cn(decor, "corner-brackets absolute inset-3 [--bracket-color:currentColor] [--bracket-offset:0px] [--bracket-width:1.5px]", armClass[size])
-			}),
-			crosshair && /* @__PURE__ */ jsx("svg", {
-				"aria-hidden": "true",
-				focusable: "false",
-				viewBox: "0 0 12 12",
-				fill: "none",
-				stroke: "currentColor",
-				strokeWidth: 1.5,
-				className: cn("pointer-events-none select-none forced-colors:hidden print:hidden", "absolute top-1/2 left-1/2 size-3 -translate-1/2 text-accent-ink"),
-				children: /* @__PURE__ */ jsx("path", { d: "M6 0v12M0 6h12" })
-			}),
-			readouts && Object.keys(readoutPosition).map((corner) => readouts[corner] !== void 0 && /* @__PURE__ */ jsx("span", {
-				"data-corner": corner,
-				className: cn("pointer-events-none absolute font-tech text-xs leading-none text-ink-secondary tabular-nums", readoutPosition[corner]),
-				children: readouts[corner]
-			}, corner))
-		]
-	});
-}
-//#endregion
 //#region src/hooks/useTheme.ts
 const STORAGE_KEY = "ef-theme";
 const DARK_QUERY = "(prefers-color-scheme: dark)";
@@ -8172,11 +8754,8 @@ function useTheme() {
 	};
 }
 //#endregion
-//#region src/icons/ArrowLeft.tsx
-const ArrowLeft = createIcon("ArrowLeft", /* @__PURE__ */ jsx("path", { d: "M20 12H5M11 5l-7 7 7 7" }));
-//#endregion
 //#region src/icons/Menu.tsx
 /** 三条横线：打开菜单 */
 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, IconButton, Input, ItemGrid, ItemSlot, Kbd, List, ListRow, Loader, Lock, Marquee, MediaCard, Menu, Minus, NavAction, NavMenu, NavMenuItem, Navigator, Pagination, Panel, PanelBody, PanelHeader, PanelRow, PanelRows, PlayButton, PlayMark, Plus, Popover, PopoverClose, Progress, ProgressRing, Radio, RadioGroup, RecIndicator, RegistrationStrip, ResourceChip, Schedule, ScheduleItem, ScheduleTrack, 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, 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 };