@endfield-ui/react 0.1.0 → 0.2.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";
@@ -959,7 +962,7 @@ const alignClass$1 = {
 	end: "justify-end",
 	between: "justify-between"
 };
-const gapClass = {
+const gapClass$1 = {
 	sm: "gap-2",
 	md: "gap-3"
 };
@@ -973,7 +976,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 +1312,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 +1353,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 +1429,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,
@@ -3753,6 +3779,327 @@ 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, 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/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",
+				className: "min-h-0 flex-1",
+				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("div", {
+						role: "group",
+						"aria-roledescription": "幻灯片",
+						"aria-label": `第 ${position + 1} 张，共 ${count} 张`,
+						inert: position !== index,
+						"data-current": position === index ? "" : void 0,
+						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"),
+						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
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+/** 图片查看里的一张。直接放在 `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>`。
@@ -4683,6 +5030,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-ink caret-ink", "transition-colors duration-(--duration-fast) ease-standard", focusRing, slotSize[size], slotFrame[variant], readOnly ? "border-transparent bg-transparent" : slotFill[variant], disabled ? "cursor-not-allowed border-line text-ink-disabled" : 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 +5382,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 +5858,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
 /**
 * 滚动提示：只在确实还能往下滚、并且还没开始滚的时候出现，滚动开始后淡出。
@@ -8040,52 +8613,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 +8699,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 };