@zerodep-dev/vue-tsx-pro-ui 0.2.0 → 0.3.0

package/dist/patterns/SlideCaptcha.js

@@ -0,0 +1,354 @@
+import { mergeAttrs } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { VisuallyHidden } from "../base/VisuallyHidden.js";
+import { Spinner } from "../base/Spinner.js";
+import { IconButton } from "../base/IconButton.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { Fragment, createVNode, ref, shallowRef, watch } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { Check, ChevronsRight, RefreshCw, X } from "@lucide/icons";
+//#region src/patterns/SlideCaptcha.tsx
+/**
+* 拼图滑块验证：画面是服务端生成的背景图（有一个缺口）和一块拼图，拖动下面的滑块让拼图对准缺口，松手后把位置和拖动轨迹
+* 交给服务端判定。组件只负责交互，不判对错：答案在服务端，每次给一张新图。
+*
+*   <SlideCaptcha
+*     challenge={challenge}      // 服务端给的图；还没拿到时为 null
+*     status={status}            // idle / verifying / success / error，由父级按判定结果设置
+*     onRelease={(result) => verify(challenge.id, result)}
+*     onRefresh={loadChallenge}
+*   />
+*
+* - `challenge`：background、piece 是图片地址（data URL 或普通地址），width、height 是背景图的像素尺寸，pieceWidth 是拼图图片的宽度；
+*   拼图图片和背景一样高，左边缘就是缺口的左边缘，所以位置换算成像素直接就是答案。
+* - `onRelease` 交出 { x, track, duration }：x 是拼图左边缘在背景图里的像素位置，track 是（毫秒，位置）序列，
+*   真人拖动有加减速和抖动，服务端据此区分脚本。
+* - `status` 由父级控制：verifying 时不能拖，success 时锁定，error 时滑块晃一下；父级换了新的 challenge 或设回 idle 时滑块回到起点。
+* - 键盘：聚焦滑块后 ←/→ 微调、Home/End、Enter 或空格松手。这类验证对读屏和运动障碍的用户不友好，应用应当另外提供别的方式。
+*/
+/** 服务端给的一张拼图 */
+/** 松手时交给服务端的内容 */
+/** 验证码的状态：idle 可以拖，verifying 等服务端判定，success 通过，error 没对准 */
+/** 未声明的属性落到外层 div 上 */
+/** 键盘每次移动的距离（px） */
+var KEY_STEP = 2;
+/** 轨迹最多记多少个点，太长的拖动只留一部分 */
+var MAX_POINTS = 240;
+/** 滑块的宽度，也是滑块条的高度 */
+var HANDLE = "2.75rem";
+/** 松手回到起点时的过渡：带一点回弹 */
+var SETTLE = "0.28s cubic-bezier(0.34, 1.4, 0.64, 1)";
+/** SlideCaptcha 的样式：root、picture、image、piece、banner、track、fill、handle 等 */
+var slideCaptchaStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_sm",
+		width: "_full",
+		userSelect: "none"
+	},
+	picture: {
+		position: "relative",
+		boxSizing: "border-box",
+		width: "_full",
+		overflow: "hidden",
+		borderRadius: "_md",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		backgroundColor: "_fill"
+	},
+	image: {
+		display: "block",
+		width: "_full",
+		height: "_full",
+		objectFit: "cover",
+		pointerEvents: "none",
+		userSelect: "none"
+	},
+	piece: {
+		position: "absolute",
+		top: 0,
+		height: "_full",
+		pointerEvents: "none",
+		filter: "drop-shadow(0 2px 6px rgb(0 0 0 / 0.45))"
+	},
+	pieceSettle: { transition: `left ${SETTLE}` },
+	refresh: {
+		position: "absolute",
+		top: "_xs",
+		insetInlineEnd: "_xs"
+	},
+	banner: {
+		position: "absolute",
+		insetInline: 0,
+		bottom: 0,
+		paddingBlock: "_xs",
+		paddingInline: "_md",
+		fontSize: "_sm",
+		textAlign: "center",
+		color: "white"
+	},
+	bannerSuccess: { backgroundColor: "rgb(22 163 74 / 0.88)" },
+	bannerError: { backgroundColor: "rgb(220 38 38 / 0.88)" },
+	loading: {
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		gap: "_sm",
+		height: "_full",
+		color: "_textMuted",
+		fontSize: "_sm"
+	},
+	track: {
+		position: "relative",
+		boxSizing: "border-box",
+		height: HANDLE,
+		overflow: "hidden",
+		borderRadius: "_md",
+		borderWidth: "_xs",
+		borderStyle: "solid",
+		borderColor: "_border",
+		backgroundColor: "_fill"
+	},
+	fill: {
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: 0,
+		backgroundColor: "_accentSoft"
+	},
+	fillSuccess: { backgroundColor: "_successSoft" },
+	fillError: { backgroundColor: "_dangerSoft" },
+	hint: {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		paddingInline: HANDLE,
+		color: "_textMuted",
+		fontSize: "_sm",
+		pointerEvents: "none"
+	},
+	handle: {
+		position: "absolute",
+		insetBlock: 0,
+		boxSizing: "border-box",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "center",
+		width: HANDLE,
+		borderRadius: "_md",
+		backgroundColor: "_surface",
+		boxShadow: "_sm",
+		color: "_accentText",
+		cursor: "grab",
+		touchAction: "none",
+		outlineOffset: "-2px"
+	},
+	handleActive: {
+		cursor: "grabbing",
+		boxShadow: "_md"
+	},
+	handleSuccess: { color: "_successText" },
+	handleError: { color: "_dangerText" },
+	locked: { cursor: "default" },
+	settle: { transition: `left ${SETTLE}, width ${SETTLE}` }
+});
+/** SlideCaptcha 的动态样式：位置用百分比，画面和滑块条按容器宽度缩放 */
+var slideCaptchaDynamicStyles = css.create({
+	at: (percent) => ({ left: `${percent}%` }),
+	pieceWidth: (percent) => ({ width: `${percent}%` }),
+	ratio: (aspect) => ({ aspectRatio: String(aspect) }),
+	handleAt: (position) => ({ left: `calc(${position} * (100% - ${HANDLE}))` }),
+	fillTo: (position) => ({ width: `calc(${position} * (100% - ${HANDLE}) + ${HANDLE})` })
+});
+var clamp01 = (value) => Math.min(1, Math.max(0, value));
+/** 拼图滑块验证：拖动滑块让拼图对准缺口，松手把位置与轨迹交给服务端判定 */
+var SlideCaptcha = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const challenge = readonlyProp(_props, "challenge");
+	const status = readonlyProp(_props, "status", "idle");
+	const hint = readonlyProp(_props, "hint");
+	const errorText = readonlyProp(_props, "errorText");
+	const onRelease = readonlyProp(_props, "onRelease");
+	const onRefresh = readonlyProp(_props, "onRefresh");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	let trackElement = shallowRef(null);
+	let handleElement = shallowRef(null);
+	let position = ref(0);
+	let dragging = ref(false);
+	let track = [];
+	let startedAt = 0;
+	const travel = () => challenge.value ? challenge.value.width - challenge.value.pieceWidth : 0;
+	const pixels = () => Math.round(position.value * travel());
+	const interactive = () => challenge.value !== null && status.value === "idle";
+	function record() {
+		if (!track.length) startedAt = performance.now();
+		if (track.length < MAX_POINTS) track.push({
+			t: Math.round(performance.now() - startedAt),
+			x: pixels()
+		});
+	}
+	function release() {
+		if (!track.length) return;
+		const result = {
+			x: pixels(),
+			track,
+			duration: Math.round(performance.now() - startedAt)
+		};
+		track = [];
+		onRelease.value?.(result);
+	}
+	function grab(event) {
+		if (!interactive() || !trackElement.value || !handleElement.value) return;
+		event.preventDefault();
+		handleElement.value.focus();
+		handleElement.value.setPointerCapture(event.pointerId);
+		const room = trackElement.value.clientWidth - handleElement.value.offsetWidth;
+		const startX = event.clientX;
+		const startPosition = position.value;
+		track = [];
+		record();
+		dragging.value = true;
+		const move = (next) => {
+			position.value = clamp01(startPosition + (next.clientX - startX) / Math.max(room, 1));
+			record();
+		};
+		const end = (next) => {
+			handleElement.value?.removeEventListener("pointermove", move);
+			handleElement.value?.removeEventListener("pointerup", end);
+			handleElement.value?.removeEventListener("pointercancel", end);
+			handleElement.value?.releasePointerCapture(next.pointerId);
+			dragging.value = false;
+			if (next.type === "pointercancel") {
+				position.value = 0;
+				track = [];
+			} else release();
+		};
+		handleElement.value.addEventListener("pointermove", move);
+		handleElement.value.addEventListener("pointerup", end);
+		handleElement.value.addEventListener("pointercancel", end);
+	}
+	function onKeydown(event) {
+		if (!interactive()) return;
+		const step = KEY_STEP / Math.max(travel(), 1);
+		const isRtl = !!trackElement.value && getComputedStyle(trackElement.value).direction === "rtl";
+		const forward = isRtl ? "ArrowLeft" : "ArrowRight";
+		const backward = isRtl ? "ArrowRight" : "ArrowLeft";
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			release();
+			return;
+		}
+		const next = event.key === forward ? clamp01(position.value + step) : event.key === backward ? clamp01(position.value - step) : event.key === "Home" ? 0 : event.key === "End" ? 1 : null;
+		if (next === null) return;
+		event.preventDefault();
+		position.value = next;
+		record();
+	}
+	watch(() => challenge.value?.id, () => {
+		position.value = 0;
+		track = [];
+	});
+	watch(() => status.value, (next, previous) => {
+		if (next === "idle" && previous !== "idle") {
+			position.value = 0;
+			track = [];
+		}
+		if (next === "error" && handleElement.value && !matchMedia("(prefers-reduced-motion: reduce)").matches) handleElement.value.animate([
+			{ translate: "0" },
+			{ translate: "-6px" },
+			{ translate: "6px" },
+			{ translate: "-4px" },
+			{ translate: "4px" },
+			{ translate: "0" }
+		], { duration: 360 });
+	});
+	return () => {
+		const locked = !interactive();
+		const settling = !dragging.value;
+		const text = status.value === "verifying" ? messages.slideVerifying : status.value === "success" ? messages.slideSuccess : status.value === "error" ? errorText.value ?? messages.slideError : hint.value ?? messages.slideHint;
+		const icon = status.value === "success" ? Check : status.value === "error" ? X : ChevronsRight;
+		const piecePercent = challenge.value ? position.value * travel() / challenge.value.width * 100 : 0;
+		const pieceWidthPercent = challenge.value ? challenge.value.pieceWidth / challenge.value.width * 100 : 0;
+		const aspect = challenge.value ? challenge.value.width / challenge.value.height : 2;
+		return createVNode("div", mergeJsxProps(mergeAttrs({ sx: slideCaptchaStyles.root }, rest), { "aria-busy": status.value === "verifying" || void 0 }), [
+			createVNode("div", mergeAttrs({ sx: [slideCaptchaStyles.picture, css.bind(slideCaptchaDynamicStyles.ratio, () => [aspect])] }), [
+				challenge.value ? createVNode(Fragment, null, [createVNode("img", mergeJsxProps(mergeAttrs({ sx: slideCaptchaStyles.image }), {
+					"src": challenge.value.background,
+					"alt": "",
+					"draggable": false
+				}), null), createVNode("img", mergeJsxProps(mergeAttrs({ sx: [
+					slideCaptchaStyles.piece,
+					css.bind(slideCaptchaDynamicStyles.pieceWidth, () => [pieceWidthPercent]),
+					css.bind(slideCaptchaDynamicStyles.at, () => [piecePercent]),
+					settling && slideCaptchaStyles.pieceSettle
+				] }), {
+					"src": challenge.value.piece,
+					"alt": "",
+					"draggable": false
+				}), null)]) : createVNode("div", mergeAttrs({ sx: slideCaptchaStyles.loading }), [createVNode(Spinner, null, null), messages.slideLoading]),
+				createVNode(IconButton, {
+					"sx": slideCaptchaStyles.refresh,
+					"icon": RefreshCw,
+					"size": "sm",
+					"variant": "ghost",
+					"tone": "neutral",
+					"aria-label": messages.slideRefresh,
+					"disabled": status.value === "verifying",
+					"onClick": _cache[0] || (_cache[0] = () => onRefresh.value?.())
+				}, null),
+				(status.value === "success" || status.value === "error") && createVNode("div", mergeAttrs({ sx: [slideCaptchaStyles.banner, status.value === "success" ? slideCaptchaStyles.bannerSuccess : slideCaptchaStyles.bannerError] }), [text])
+			]),
+			createVNode("div", mergeAttrs({ sx: slideCaptchaStyles.track }, void 0, { ref: trackElement }), [
+				createVNode("div", mergeAttrs({ sx: [
+					slideCaptchaStyles.fill,
+					status.value === "success" && slideCaptchaStyles.fillSuccess,
+					status.value === "error" && slideCaptchaStyles.fillError,
+					settling && slideCaptchaStyles.settle,
+					css.bind(slideCaptchaDynamicStyles.fillTo, () => [position.value], true)
+				] }), null),
+				createVNode("span", mergeJsxProps(mergeAttrs({ sx: slideCaptchaStyles.hint }), { "aria-hidden": "true" }), [position.value === 0 || status.value !== "idle" ? text : null]),
+				createVNode("div", mergeJsxProps(mergeAttrs({ sx: [
+					slideCaptchaStyles.handle,
+					dragging.value && slideCaptchaStyles.handleActive,
+					status.value === "success" && slideCaptchaStyles.handleSuccess,
+					status.value === "error" && slideCaptchaStyles.handleError,
+					locked && slideCaptchaStyles.locked,
+					settling && slideCaptchaStyles.settle,
+					css.bind(slideCaptchaDynamicStyles.handleAt, () => [position.value], true)
+				] }, void 0, { ref: handleElement }), {
+					"role": "slider",
+					"aria-label": messages.slideLabel,
+					"aria-valuemin": 0,
+					"aria-valuemax": travel(),
+					"aria-valuenow": pixels(),
+					"aria-valuetext": messages.slidePosition(pixels()),
+					"aria-disabled": locked || void 0,
+					"tabindex": locked ? -1 : 0,
+					"onPointerdown": grab,
+					"onKeydown": onKeydown
+				}), [createVNode(Icon, { "icon": icon }, null)])
+			]),
+			createVNode(VisuallyHidden, { "aria-live": "polite" }, { default: () => [status.value === "idle" ? "" : text] })
+		]);
+	};
+}, {
+	name: "SlideCaptcha",
+	props: [
+		"challenge",
+		"status",
+		"hint",
+		"errorText",
+		"onRelease",
+		"onRefresh"
+	]
+});
+//#endregion
+export { SlideCaptcha, slideCaptchaDynamicStyles, slideCaptchaStyles };
+
+//# sourceMappingURL=SlideCaptcha.js.map

package/dist/patterns/SlideCaptcha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlideCaptcha.js","names":["_vtp_readonlyProp","_vtp_restProps","_vue_shallowRef","_vue_ref","_createVNode","_mergeProps","_Fragment"],"sources":["../../src/patterns/SlideCaptcha.tsx"],"sourcesContent":["/**\n * 拼图滑块验证：画面是服务端生成的背景图（有一个缺口）和一块拼图，拖动下面的滑块让拼图对准缺口，松手后把位置和拖动轨迹\n * 交给服务端判定。组件只负责交互，不判对错：答案在服务端，每次给一张新图。\n *\n *   <SlideCaptcha\n *     challenge={challenge}      // 服务端给的图；还没拿到时为 null\n *     status={status}            // idle / verifying / success / error，由父级按判定结果设置\n *     onRelease={(result) => verify(challenge.id, result)}\n *     onRefresh={loadChallenge}\n *   />\n *\n * - `challenge`：background、piece 是图片地址（data URL 或普通地址），width、height 是背景图的像素尺寸，pieceWidth 是拼图图片的宽度；\n *   拼图图片和背景一样高，左边缘就是缺口的左边缘，所以位置换算成像素直接就是答案。\n * - `onRelease` 交出 { x, track, duration }：x 是拼图左边缘在背景图里的像素位置，track 是（毫秒，位置）序列，\n *   真人拖动有加减速和抖动，服务端据此区分脚本。\n * - `status` 由父级控制：verifying 时不能拖，success 时锁定，error 时滑块晃一下；父级换了新的 challenge 或设回 idle 时滑块回到起点。\n * - 键盘：聚焦滑块后 ←/→ 微调、Home/End、Enter 或空格松手。这类验证对读屏和运动障碍的用户不友好，应用应当另外提供别的方式。\n */\nimport { Check, ChevronsRight, RefreshCw, X } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { Icon } from '../base/Icon';\nimport { IconButton } from '../base/IconButton';\nimport { Spinner } from '../base/Spinner';\nimport { VisuallyHidden } from '../base/VisuallyHidden';\nimport { useMessages } from '../config/lang/messages';\nimport { mergeAttrs, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 服务端给的一张拼图 */\nexport interface SlideChallenge {\n  /** 这一张的标识，换图时变；松手后连同结果一起交给服务端 */\n  id: string;\n  /** 背景图（带缺口） */\n  background: string;\n  /** 拼图图片：和背景一样高，左边缘对着缺口的左边缘 */\n  piece: string;\n  /** 背景图的宽（px） */\n  width: number;\n  /** 背景图的高（px） */\n  height: number;\n  /** 拼图图片的宽度（px） */\n  pieceWidth: number;\n}\n\n/** 松手时交给服务端的内容 */\nexport interface SlideResult {\n  /** 拼图左边缘在背景图里的位置（px，整数） */\n  x: number;\n  /** 拖动轨迹：距按下的毫秒数，和当时的位置（px） */\n  track: { t: number; x: number }[];\n  /** 从按下到松手的毫秒数 */\n  duration: number;\n}\n\n/** 验证码的状态：idle 可以拖，verifying 等服务端判定，success 通过，error 没对准 */\nexport type SlideStatus = 'idle' | 'verifying' | 'success' | 'error';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface SlideCaptchaProps extends PartProps<'div'> {\n  /** 当前的拼图；还没拿到时为 null，显示加载中 */\n  challenge: SlideChallenge | null;\n  /** 状态，默认 idle */\n  status?: SlideStatus;\n  /** 滑块条上的提示，默认“向右拖动滑块，让拼图对准缺口” */\n  hint?: string;\n  /** 没对准时的提示（图片底部和滑块条上），默认“没对准，请再试一次”；服务端给了具体原因时用它 */\n  errorText?: string;\n  /** 松手：把结果发给服务端判定 */\n  onRelease?: (result: SlideResult) => void;\n  /** 点了“换一张” */\n  onRefresh?: () => void;\n}\n\n/** 键盘每次移动的距离（px） */\nconst KEY_STEP = 2;\n/** 轨迹最多记多少个点，太长的拖动只留一部分 */\nconst MAX_POINTS = 240;\n/** 滑块的宽度，也是滑块条的高度 */\nconst HANDLE = '2.75rem';\n/** 松手回到起点时的过渡：带一点回弹 */\nconst SETTLE = '0.28s cubic-bezier(0.34, 1.4, 0.64, 1)';\n\n/** SlideCaptcha 的样式：root、picture、image、piece、banner、track、fill、handle 等 */\nexport const slideCaptchaStyles = css.create({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_sm',\n    width: '_full',\n    userSelect: 'none',\n  },\n  picture: {\n    position: 'relative',\n    boxSizing: 'border-box',\n    width: '_full',\n    overflow: 'hidden',\n    borderRadius: '_md',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_fill',\n  },\n  image: {\n    display: 'block',\n    width: '_full',\n    height: '_full',\n    objectFit: 'cover',\n    pointerEvents: 'none',\n    userSelect: 'none',\n  },\n  piece: {\n    position: 'absolute',\n    top: 0,\n    height: '_full',\n    pointerEvents: 'none',\n    filter: 'drop-shadow(0 2px 6px rgb(0 0 0 / 0.45))',\n  },\n  pieceSettle: { transition: `left ${SETTLE}` },\n  refresh: { position: 'absolute', top: '_xs', insetInlineEnd: '_xs' },\n  // 盖在图上的结果条：底色固定为深色半透明，白字在任何背景图上都读得清\n  banner: {\n    position: 'absolute',\n    insetInline: 0,\n    bottom: 0,\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    fontSize: '_sm',\n    textAlign: 'center',\n    color: 'white',\n  },\n  bannerSuccess: { backgroundColor: 'rgb(22 163 74 / 0.88)' },\n  bannerError: { backgroundColor: 'rgb(220 38 38 / 0.88)' },\n  loading: {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '_sm',\n    height: '_full',\n    color: '_textMuted',\n    fontSize: '_sm',\n  },\n  track: {\n    position: 'relative',\n    boxSizing: 'border-box',\n    height: HANDLE,\n    overflow: 'hidden',\n    borderRadius: '_md',\n    borderWidth: '_xs',\n    borderStyle: 'solid',\n    borderColor: '_border',\n    backgroundColor: '_fill',\n  },\n  fill: {\n    position: 'absolute',\n    insetBlock: 0,\n    insetInlineStart: 0,\n    backgroundColor: '_accentSoft',\n  },\n  fillSuccess: { backgroundColor: '_successSoft' },\n  fillError: { backgroundColor: '_dangerSoft' },\n  hint: {\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    paddingInline: HANDLE,\n    color: '_textMuted',\n    fontSize: '_sm',\n    pointerEvents: 'none',\n  },\n  handle: {\n    position: 'absolute',\n    insetBlock: 0,\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: HANDLE,\n    borderRadius: '_md',\n    backgroundColor: '_surface',\n    boxShadow: '_sm',\n    color: '_accentText',\n    cursor: 'grab',\n    touchAction: 'none',\n    outlineOffset: '-2px',\n  },\n  handleActive: { cursor: 'grabbing', boxShadow: '_md' },\n  handleSuccess: { color: '_successText' },\n  handleError: { color: '_dangerText' },\n  locked: { cursor: 'default' },\n  // 松手后回到起点、或键盘微调时有过渡；拖动中跟手，不加过渡\n  settle: { transition: `left ${SETTLE}, width ${SETTLE}` },\n});\n\n/** SlideCaptcha 的动态样式：位置用百分比，画面和滑块条按容器宽度缩放 */\nexport const slideCaptchaDynamicStyles = css.create({\n  at: (percent: number) => ({ left: `${percent}%` }),\n  pieceWidth: (percent: number) => ({ width: `${percent}%` }),\n  ratio: (aspect: number) => ({ aspectRatio: String(aspect) }),\n  // 滑块在条里的位置：条宽减去滑块宽的部分按比例走\n  handleAt: (position: number) => ({ left: `calc(${position} * (100% - ${HANDLE}))` }),\n  fillTo: (position: number) => ({ width: `calc(${position} * (100% - ${HANDLE}) + ${HANDLE})` }),\n});\n\nconst clamp01 = (value: number) => Math.min(1, Math.max(0, value));\n\n/** 拼图滑块验证：拖动滑块让拼图对准缺口，松手把位置与轨迹交给服务端判定 */\nexport const SlideCaptcha = _component(\n  ({\n    challenge,\n    status = 'idle',\n    hint,\n    errorText,\n    onRelease,\n    onRefresh,\n    ...rest\n  }: SlideCaptchaProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    let trackElement = _state.raw<HTMLElement | null>(null);\n    let handleElement = _state.raw<HTMLElement | null>(null);\n    // 拼图左边缘的位置占“可移动距离”的比例（0 到 1）\n    let position = _state(0);\n    let dragging = _state(false);\n    let track: SlideResult['track'] = [];\n    let startedAt = 0;\n\n    const travel = () => (challenge ? challenge.width - challenge.pieceWidth : 0);\n    const pixels = () => Math.round(position * travel());\n    const interactive = () => challenge !== null && status === 'idle';\n\n    function record() {\n      if (!track.length) startedAt = performance.now();\n      if (track.length < MAX_POINTS) {\n        track.push({ t: Math.round(performance.now() - startedAt), x: pixels() });\n      }\n    }\n\n    function release() {\n      if (!track.length) return;\n      const result: SlideResult = {\n        x: pixels(),\n        track,\n        duration: Math.round(performance.now() - startedAt),\n      };\n      track = [];\n      onRelease?.(result);\n    }\n\n    function grab(event: PointerEvent) {\n      if (!interactive() || !trackElement || !handleElement) return;\n      event.preventDefault();\n      handleElement.focus();\n      handleElement.setPointerCapture(event.pointerId);\n      const room = trackElement.clientWidth - handleElement.offsetWidth;\n      const startX = event.clientX;\n      const startPosition = position;\n      track = [];\n      record();\n      dragging = true;\n      const move = (next: PointerEvent) => {\n        position = clamp01(startPosition + (next.clientX - startX) / Math.max(room, 1));\n        record();\n      };\n      const end = (next: PointerEvent) => {\n        handleElement?.removeEventListener('pointermove', move);\n        handleElement?.removeEventListener('pointerup', end);\n        handleElement?.removeEventListener('pointercancel', end);\n        handleElement?.releasePointerCapture(next.pointerId);\n        dragging = false;\n        if (next.type === 'pointercancel') {\n          position = 0;\n          track = [];\n        } else {\n          release();\n        }\n      };\n      handleElement.addEventListener('pointermove', move);\n      handleElement.addEventListener('pointerup', end);\n      handleElement.addEventListener('pointercancel', end);\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (!interactive()) return;\n      const step = KEY_STEP / Math.max(travel(), 1);\n      const isRtl = !!trackElement && getComputedStyle(trackElement).direction === 'rtl';\n      const forward = isRtl ? 'ArrowLeft' : 'ArrowRight';\n      const backward = isRtl ? 'ArrowRight' : 'ArrowLeft';\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        release();\n        return;\n      }\n      const next =\n        event.key === forward\n          ? clamp01(position + step)\n          : event.key === backward\n            ? clamp01(position - step)\n            : event.key === 'Home'\n              ? 0\n              : event.key === 'End'\n                ? 1\n                : null;\n      if (next === null) return;\n      event.preventDefault();\n      position = next;\n      record();\n    }\n\n    // 换了新图、或父级设回 idle（重试）：滑块回到起点；没对准时滑块晃一下\n    watch(\n      () => challenge?.id,\n      () => {\n        position = 0;\n        track = [];\n      },\n    );\n    watch(\n      () => status,\n      (next, previous) => {\n        if (next === 'idle' && previous !== 'idle') {\n          position = 0;\n          track = [];\n        }\n        if (\n          next === 'error' &&\n          handleElement &&\n          !matchMedia('(prefers-reduced-motion: reduce)').matches\n        ) {\n          handleElement.animate(\n            [\n              { translate: '0' },\n              { translate: '-6px' },\n              { translate: '6px' },\n              { translate: '-4px' },\n              { translate: '4px' },\n              { translate: '0' },\n            ],\n            { duration: 360 },\n          );\n        }\n      },\n    );\n\n    return () => {\n      const locked = !interactive();\n      const settling = !dragging;\n      const text =\n        status === 'verifying'\n          ? messages.slideVerifying\n          : status === 'success'\n            ? messages.slideSuccess\n            : status === 'error'\n              ? (errorText ?? messages.slideError)\n              : (hint ?? messages.slideHint);\n      const icon = status === 'success' ? Check : status === 'error' ? X : ChevronsRight;\n      const piecePercent = challenge ? ((position * travel()) / challenge.width) * 100 : 0;\n      const pieceWidthPercent = challenge ? (challenge.pieceWidth / challenge.width) * 100 : 0;\n      const aspect = challenge ? challenge.width / challenge.height : 2;\n      return (\n        <div\n          {...mergeAttrs<'div'>({ sx: slideCaptchaStyles.root }, rest)}\n          aria-busy={status === 'verifying' || undefined}\n        >\n          <div\n            {...mergeAttrs<'div'>({\n              sx: [slideCaptchaStyles.picture, slideCaptchaDynamicStyles.ratio(aspect)],\n            })}\n          >\n            {challenge ? (\n              <>\n                <img\n                  {...mergeAttrs<'img'>({ sx: slideCaptchaStyles.image })}\n                  src={challenge.background}\n                  alt=\"\"\n                  draggable={false}\n                />\n                <img\n                  {...mergeAttrs<'img'>({\n                    sx: [\n                      slideCaptchaStyles.piece,\n                      slideCaptchaDynamicStyles.pieceWidth(pieceWidthPercent),\n                      slideCaptchaDynamicStyles.at(piecePercent),\n                      settling && slideCaptchaStyles.pieceSettle,\n                    ],\n                  })}\n                  src={challenge.piece}\n                  alt=\"\"\n                  draggable={false}\n                />\n              </>\n            ) : (\n              <div {...mergeAttrs<'div'>({ sx: slideCaptchaStyles.loading })}>\n                <Spinner />\n                {messages.slideLoading}\n              </div>\n            )}\n            <IconButton\n              sx={slideCaptchaStyles.refresh}\n              icon={RefreshCw}\n              size=\"sm\"\n              variant=\"ghost\"\n              tone=\"neutral\"\n              aria-label={messages.slideRefresh}\n              disabled={status === 'verifying'}\n              onClick={() => onRefresh?.()}\n            />\n            {(status === 'success' || status === 'error') && (\n              <div\n                {...mergeAttrs<'div'>({\n                  sx: [\n                    slideCaptchaStyles.banner,\n                    status === 'success'\n                      ? slideCaptchaStyles.bannerSuccess\n                      : slideCaptchaStyles.bannerError,\n                  ],\n                })}\n              >\n                {text}\n              </div>\n            )}\n          </div>\n          <div\n            {...mergeAttrs<'div'>({ sx: slideCaptchaStyles.track }, undefined, {\n              ref: _toRef(trackElement),\n            })}\n          >\n            <div\n              {...mergeAttrs<'div'>({\n                sx: [\n                  slideCaptchaStyles.fill,\n                  status === 'success' && slideCaptchaStyles.fillSuccess,\n                  status === 'error' && slideCaptchaStyles.fillError,\n                  settling && slideCaptchaStyles.settle,\n                  slideCaptchaDynamicStyles.fillTo(position),\n                ],\n              })}\n            />\n            <span {...mergeAttrs<'span'>({ sx: slideCaptchaStyles.hint })} aria-hidden=\"true\">\n              {position === 0 || status !== 'idle' ? text : null}\n            </span>\n            <div\n              {...mergeAttrs<'div'>(\n                {\n                  sx: [\n                    slideCaptchaStyles.handle,\n                    dragging && slideCaptchaStyles.handleActive,\n                    status === 'success' && slideCaptchaStyles.handleSuccess,\n                    status === 'error' && slideCaptchaStyles.handleError,\n                    locked && slideCaptchaStyles.locked,\n                    settling && slideCaptchaStyles.settle,\n                    slideCaptchaDynamicStyles.handleAt(position),\n                  ],\n                },\n                undefined,\n                { ref: _toRef(handleElement) },\n              )}\n              role=\"slider\"\n              aria-label={messages.slideLabel}\n              aria-valuemin={0}\n              aria-valuemax={travel()}\n              aria-valuenow={pixels()}\n              aria-valuetext={messages.slidePosition(pixels())}\n              aria-disabled={locked || undefined}\n              tabindex={locked ? -1 : 0}\n              onPointerdown={grab}\n              onKeydown={onKeydown}\n            >\n              <Icon icon={icon} />\n            </div>\n          </div>\n          <VisuallyHidden aria-live=\"polite\">{status === 'idle' ? '' : text}</VisuallyHidden>\n        </div>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4EA,IAAM,WAAW;;AAEjB,IAAM,aAAa;;AAEnB,IAAM,SAAS;;AAEf,IAAM,SAAS;;AAGf,IAAa,qBAAqB,IAAI,OAAO;CAC3C,MAAM;EACJ,SAAS;EACT,eAAe;EACf,KAAK;EACL,OAAO;EACP,YAAY;CACd;CACA,SAAS;EACP,UAAU;EACV,WAAW;EACX,OAAO;EACP,UAAU;EACV,cAAc;EACd,aAAa;EACb,aAAa;EACb,aAAa;EACb,iBAAiB;CACnB;CACA,OAAO;EACL,SAAS;EACT,OAAO;EACP,QAAQ;EACR,WAAW;EACX,eAAe;EACf,YAAY;CACd;CACA,OAAO;EACL,UAAU;EACV,KAAK;EACL,QAAQ;EACR,eAAe;EACf,QAAQ;CACV;CACA,aAAa,EAAE,YAAY,QAAQ,SAAS;CAC5C,SAAS;EAAE,UAAU;EAAY,KAAK;EAAO,gBAAgB;CAAM;CAEnE,QAAQ;EACN,UAAU;EACV,aAAa;EACb,QAAQ;EACR,cAAc;EACd,eAAe;EACf,UAAU;EACV,WAAW;EACX,OAAO;CACT;CACA,eAAe,EAAE,iBAAiB,wBAAwB;CAC1D,aAAa,EAAE,iBAAiB,wBAAwB;CACxD,SAAS;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,KAAK;EACL,QAAQ;EACR,OAAO;EACP,UAAU;CACZ;CACA,OAAO;EACL,UAAU;EACV,WAAW;EACX,QAAQ;EACR,UAAU;EACV,cAAc;EACd,aAAa;EACb,aAAa;EACb,aAAa;EACb,iBAAiB;CACnB;CACA,MAAM;EACJ,UAAU;EACV,YAAY;EACZ,kBAAkB;EAClB,iBAAiB;CACnB;CACA,aAAa,EAAE,iBAAiB,eAAe;CAC/C,WAAW,EAAE,iBAAiB,cAAc;CAC5C,MAAM;EACJ,UAAU;EACV,OAAO;EACP,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,OAAO;EACP,UAAU;EACV,eAAe;CACjB;CACA,QAAQ;EACN,UAAU;EACV,YAAY;EACZ,WAAW;EACX,SAAS;EACT,YAAY;EACZ,gBAAgB;EAChB,OAAO;EACP,cAAc;EACd,iBAAiB;EACjB,WAAW;EACX,OAAO;EACP,QAAQ;EACR,aAAa;EACb,eAAe;CACjB;CACA,cAAc;EAAE,QAAQ;EAAY,WAAW;CAAM;CACrD,eAAe,EAAE,OAAO,eAAe;CACvC,aAAa,EAAE,OAAO,cAAc;CACpC,QAAQ,EAAE,QAAQ,UAAU;CAE5B,QAAQ,EAAE,YAAY,QAAQ,OAAM,UAAW,SAAS;AAC1D,CAAC;;AAGD,IAAa,4BAA4B,IAAI,OAAO;CAClD,KAAK,aAAqB,EAAE,MAAM,GAAG,QAAO,GAAI;CAChD,aAAa,aAAqB,EAAE,OAAO,GAAG,QAAO,GAAI;CACzD,QAAQ,YAAoB,EAAE,aAAa,OAAO,MAAM,EAAE;CAE1D,WAAW,cAAsB,EAAE,MAAM,QAAQ,SAAQ,aAAc,OAAM,IAAK;CAClF,SAAS,cAAsB,EAAE,OAAO,QAAQ,SAAQ,aAAc,OAAM,MAAO,OAAM,GAAI;AAC/F,CAAC;AAED,IAAM,WAAW,UAAkB,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC;;AAGjE,IAAa,eAAe,0BAC1B,QAAA,SAQyB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UANd,MAAM;CAAA,MAAA,OAAAA,aAAA,QAAA,MAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAAA,YAAAA,aAAA,QAAA,WAAA;CAAA,MAKZ,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,IAAI,eAAYC,WAAkC,IAAI;CACtD,IAAI,gBAAaA,WAAkC,IAAI;CAEvD,IAAI,WAAQC,IAAU,CAAC;CACvB,IAAI,WAAQA,IAAU,KAAK;CAC3B,IAAI,QAA8B,CAAA;CAClC,IAAI,YAAY;CAEhB,MAAM,eAAgB,UAAA,QAAY,UAAA,MAAU,QAAQ,UAAA,MAAU,aAAa;CAC3E,MAAM,eAAe,KAAK,MAAM,SAAA,QAAW,OAAO,CAAC;CACnD,MAAM,oBAAoB,UAAA,UAAc,QAAQ,OAAA,UAAW;CAE3D,SAAS,SAAS;EAChB,IAAI,CAAC,MAAM,QAAQ,YAAY,YAAY,IAAI;EAC/C,IAAI,MAAM,SAAS,YACjB,MAAM,KAAK;GAAE,GAAG,KAAK,MAAM,YAAY,IAAI,IAAI,SAAS;GAAG,GAAG,OAAO;EAAE,CAAC;CAE5E;CAEA,SAAS,UAAU;EACjB,IAAI,CAAC,MAAM,QAAQ;EACnB,MAAM,SAAsB;GAC1B,GAAG,OAAO;GACV;GACA,UAAU,KAAK,MAAM,YAAY,IAAI,IAAI,SAAS;EACpD;EACA,QAAQ,CAAA;EACR,UAAA,QAAY,MAAM;CACpB;CAEA,SAAS,KAAK,OAAqB;EACjC,IAAI,CAAC,YAAY,KAAK,CAAA,aAAA,SAAiB,CAAA,cAAA,OAAgB;EACvD,MAAM,eAAe;EACrB,cAAA,MAAc,MAAM;EACpB,cAAA,MAAc,kBAAkB,MAAM,SAAS;EAC/C,MAAM,OAAO,aAAA,MAAa,cAAc,cAAA,MAAc;EACtD,MAAM,SAAS,MAAM;EACrB,MAAM,gBAAa,SAAA;EACnB,QAAQ,CAAA;EACR,OAAO;EACP,SAAA,QAAW;EACX,MAAM,QAAQ,SAAuB;GACnC,SAAA,QAAW,QAAQ,iBAAiB,KAAK,UAAU,UAAU,KAAK,IAAI,MAAM,CAAC,CAAC;GAC9E,OAAO;EACT;EACA,MAAM,OAAO,SAAuB;GAClC,cAAA,OAAe,oBAAoB,eAAe,IAAI;GACtD,cAAA,OAAe,oBAAoB,aAAa,GAAG;GACnD,cAAA,OAAe,oBAAoB,iBAAiB,GAAG;GACvD,cAAA,OAAe,sBAAsB,KAAK,SAAS;GACnD,SAAA,QAAW;GACX,IAAI,KAAK,SAAS,iBAAiB;IACjC,SAAA,QAAW;IACX,QAAQ,CAAA;GACV,OACE,QAAQ;EAEZ;EACA,cAAA,MAAc,iBAAiB,eAAe,IAAI;EAClD,cAAA,MAAc,iBAAiB,aAAa,GAAG;EAC/C,cAAA,MAAc,iBAAiB,iBAAiB,GAAG;CACrD;CAEA,SAAS,UAAU,OAAsB;EACvC,IAAI,CAAC,YAAY,GAAG;EACpB,MAAM,OAAO,WAAW,KAAK,IAAI,OAAO,GAAG,CAAC;EAC5C,MAAM,QAAQ,CAAC,CAAA,aAAA,SAAiB,iBAAgB,aAAA,KAAa,CAAC,CAAC,cAAc;EAC7E,MAAM,UAAU,QAAQ,cAAc;EACtC,MAAM,WAAW,QAAQ,eAAe;EACxC,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;GAC9C,MAAM,eAAe;GACrB,QAAQ;GACR;EACF;EACA,MAAM,OACJ,MAAM,QAAQ,UACV,QAAQ,SAAA,QAAW,IAAI,IACvB,MAAM,QAAQ,WACZ,QAAQ,SAAA,QAAW,IAAI,IACvB,MAAM,QAAQ,SACZ,IACA,MAAM,QAAQ,QACZ,IACA;EACZ,IAAI,SAAS,MAAM;EACnB,MAAM,eAAe;EACrB,SAAA,QAAW;EACX,OAAO;CACT;CAGA,YACQ,UAAA,OAAW,UACX;EACJ,SAAA,QAAW;EACX,QAAQ,CAAA;CACV,CACF;CACA,YACE,OAAA,QACC,MAAM,aAAa;EAClB,IAAI,SAAS,UAAU,aAAa,QAAQ;GAC1C,SAAA,QAAW;GACX,QAAQ,CAAA;EACV;EACA,IACE,SAAS,WAAO,cAAA,SAEhB,CAAC,WAAW,kCAAkC,CAAC,CAAC,SAEhD,cAAA,MAAc,QACZ;GACE,EAAE,WAAW,IAAI;GACjB,EAAE,WAAW,OAAO;GACpB,EAAE,WAAW,MAAM;GACnB,EAAE,WAAW,OAAO;GACpB,EAAE,WAAW,MAAM;GACnB,EAAE,WAAW,IAAI;EAAC,GAEpB,EAAE,UAAU,IAAI,CAClB;CAEJ,CACF;CAEA,aAAa;EACX,MAAM,SAAS,CAAC,YAAY;EAC5B,MAAM,WAAW,CAAA,SAAA;EACjB,MAAM,OACJ,OAAA,UAAW,cACP,SAAS,iBACT,OAAA,UAAW,YACT,SAAS,eACT,OAAA,UAAW,UACR,UAAA,SAAa,SAAS,aACtB,KAAA,SAAQ,SAAS;EAC5B,MAAM,OAAO,OAAA,UAAW,YAAY,QAAQ,OAAA,UAAW,UAAU,IAAI;EACrE,MAAM,eAAe,UAAA,QAAc,SAAA,QAAW,OAAO,IAAK,UAAA,MAAU,QAAS,MAAM;EACnF,MAAM,oBAAoB,UAAA,QAAa,UAAA,MAAU,aAAa,UAAA,MAAU,QAAS,MAAM;EACvF,MAAM,SAAS,UAAA,QAAY,UAAA,MAAU,QAAQ,UAAA,MAAU,SAAS;EAChE,OAAAC,YAAA,OAAAC,cAEQ,WAAkB,EAAE,IAAI,mBAAmB,KAAK,GAAG,IAAI,GAAC,EAAA,aACjD,OAAA,UAAW,eAAe,KAAA,EAAS,CAAA,GAAA;GAAAD,YAAA,OAGxC,WAAkB,EACpB,IAAI,CAAC,mBAAmB,SAAO,IAAA,KAAE,0BAA0B,aAAK,CAAC,MAAM,CAAA,CAAA,EACzE,CAAC,GAAC;IAED,UAAA,QAAAA,YAAAE,UAAA,MAAA,CAAAF,YAAA,OAAAC,cAGS,WAAkB,EAAE,IAAI,mBAAmB,MAAM,CAAC,GAAC;KAAA,OAClD,UAAA,MAAU;KAAU,OAAA;KAAA,aAEd;IAAK,CAAA,GAAA,IAAA,GAAAD,YAAA,OAAAC,cAGZ,WAAkB,EACpB,IAAI;KACF,mBAAmB;KAAK,IAAA,KACxB,0BAA0B,kBAAU,CAAC,iBAAiB,CAAA;KAAA,IAAA,KACtD,0BAA0B,UAAE,CAAC,YAAY,CAAA;KACzC,YAAY,mBAAmB;IAAW,EAE9C,CAAC,GAAC;KAAA,OACG,UAAA,MAAU;KAAK,OAAA;KAAA,aAET;IAAK,CAAA,GAAA,IAAA,CAAA,CAAA,IAAAD,YAAA,OAIX,WAAkB,EAAE,IAAI,mBAAmB,QAAQ,CAAC,GAAC,CAAAA,YAAA,SAAA,MAAA,IAAA,GAE3D,SAAS,YAAY,CAAA;IAEzBA,YAAA,YAAA;KAAA,MAEK,mBAAmB;KAAO,QACxB;KAAS,QAAA;KAAA,WAAA;KAAA,QAAA;KAAA,cAIH,SAAS;KAAY,YACvB,OAAA,UAAW;KAAW,WAAA,OAAA,OAAA,OAAA,WACjB,UAAA,QAAY;IAAC,GAAA,IAAA;KAE5B,OAAA,UAAW,aAAa,OAAA,UAAW,YAAOA,YAAA,OAEpC,WAAkB,EACpB,IAAI,CACF,mBAAmB,QACnB,OAAA,UAAW,YACP,mBAAmB,gBACnB,mBAAmB,WAAW,EAEtC,CAAC,GAAC,CAED,IAAI,CAAA;GAER,CAAA;GAAAA,YAAA,OAGG,WAAkB,EAAE,IAAI,mBAAmB,MAAM,GAAG,KAAA,GAAW,EACjE,KAAG,aACL,CAAC,GAAC;IAAAA,YAAA,OAGI,WAAkB,EACpB,IAAI;KACF,mBAAmB;KACnB,OAAA,UAAW,aAAa,mBAAmB;KAC3C,OAAA,UAAW,WAAW,mBAAmB;KACzC,YAAY,mBAAmB;KAAM,IAAA,KACrC,0BAA0B,cAAM,CAAA,SAAA,KAAA,GAAA,IAAA;IAAA,EAEpC,CAAC,GAAC,IAAA;IAAAA,YAAA,QAAAC,cAEM,WAAmB,EAAE,IAAI,mBAAmB,KAAK,CAAC,GAAC,EAAA,eAAA,OAAA,CAAA,GAAA,CAC1D,SAAA,UAAa,KAAK,OAAA,UAAW,SAAS,OAAO,IAAI,CAAA;IAAAD,YAAA,OAAAC,cAG9C,WACF,EACE,IAAI;KACF,mBAAmB;KACnB,SAAA,SAAY,mBAAmB;KAC/B,OAAA,UAAW,aAAa,mBAAmB;KAC3C,OAAA,UAAW,WAAW,mBAAmB;KACzC,UAAU,mBAAmB;KAC7B,YAAY,mBAAmB;KAAM,IAAA,KACrC,0BAA0B,gBAAQ,CAAA,SAAA,KAAA,GAAA,IAAA;IAAA,EAEtC,GACA,KAAA,GACA,EAAE,KAAG,cAAwB,CAC/B,GAAC;KAAA,QAAA;KAAA,cAEW,SAAS;KAAU,iBAChB;KAAC,iBACD,OAAO;KAAC,iBACR,OAAO;KAAC,kBACP,SAAS,cAAc,OAAO,CAAC;KAAC,iBACjC,UAAU,KAAA;KAAS,YACxB,SAAS,KAAK;KAAC,iBACV;KAAI,aACR;IAAS,CAAA,GAAA,CAAAD,YAAA,MAAA,EAAA,QAER,KAAI,GAAA,IAAA,CAAA,CAAA;GAAA,CAAA;GAAAA,YAAA,gBAAA,EAAA,aAAA,SAAA,GAAA,EAAA,eAAA,CAGgB,OAAA,UAAW,SAAS,KAAK,IAAI,EAAA,CAAA;EAAA,CAAA;CAGvE;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/StepsForm.js

@@ -5,8 +5,8 @@ import { Form } from "../form/Form.js";
 import { Steps } from "../navigation/Steps.js";
 import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
-import { createVNode, mergeProps, nextTick, shallowRef, useId } from "vue";
-import { _component, bindable, effect, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, nextTick, shallowRef, useId } from "vue";
+import { _component, bindable, effect, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/patterns/StepsForm.tsx
 /** 一步 */
@@ -69,8 +69,8 @@ var StepsForm = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => {
 		const step = steps.value[current.value];
 		const last = current.value >= steps.value.length - 1;
-		return createVNode(Form, mergeProps(rest, { "controller": form.value }), { default: () => [createVNode("div", css.attrs(stepsFormStyles.root), [
-			createVNode(Steps, mergeProps(mergePartProps({ items: items() }, propsSteps.value, {
+		return createVNode(Form, mergeJsxProps(rest, { "controller": form.value }), { default: () => [createVNode("div", css.attrs(stepsFormStyles.root), [
+			createVNode(Steps, mergeJsxProps(mergePartProps({ items: items() }, propsSteps.value, {
 				items: items(),
 				navigable: true
 			}), {
@@ -87,19 +87,19 @@ var StepsForm = /*#__PURE__*/ _component((_props, _ctx) => {
 			createVNode(Flex, mergePartProps({
 				justify: "end",
 				gap: "sm"
-			}, propsActions.value), { default: () => [current.value > 0 && createVNode(Button, mergeProps(mergePartProps({
+			}, propsActions.value), { default: () => [current.value > 0 && createVNode(Button, mergeJsxProps(mergePartProps({
 				variant: "ghost",
 				tone: "neutral"
 			}, propsPrevious.value, { onClick: () => go(current.value - 1) }), { "key": "__site0" }), {
 				default: () => [messages.stepsFormPrevious],
 				$stable: true
-			}), last ? createVNode(Button, mergeProps(mergePartProps({}, propsSubmit.value, {
+			}), last ? createVNode(Button, mergeJsxProps(mergePartProps({}, propsSubmit.value, {
 				type: "submit",
 				loading: form.value.submitting
 			}), { "key": "__site1" }), {
 				default: () => [submitText.value ?? messages.stepsFormSubmit],
 				$stable: true
-			}) : createVNode(Button, mergeProps(mergePartProps({}, propsNext.value, {
+			}) : createVNode(Button, mergeJsxProps(mergePartProps({}, propsNext.value, {
 				loading: form.value.validating(),
 				onClick: () => void next()
 			}), { "key": "__site2" }), {

package/dist/patterns/StepsForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepsForm.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/StepsForm.tsx"],"sourcesContent":["/**\n * 分步表单：一份 useForm 的表单分成几步填（开户、准入申请、配置向导），上方是步骤条，下方是这一步的字段与“上一步 / 下一步 / 提交”。\n * 同 Ant Design ProComponents 的 StepsForm。\n *\n *   <StepsForm\n *     form={form}\n *     _current={step}\n *     steps={[\n *       { title: '企业信息', fields: ['company', 'contact'], content: () => <>…form.Field…</> },\n *       { title: '账号', fields: ['password', 'confirm'], content: () => <>…</> },\n *     ]}\n *   />\n *\n * - “下一步”只校验这一步的字段（form.validate(fields)），通过才往后走，没通过的错误立即显示；走过的步骤可以点回去。\n * - 最后一步是“提交”（表单的原生提交）：整份校验没通过时跳到第一个有错的步骤，那一步在步骤条上标成出错。\n * - 换了一步焦点移到这一步的内容上（读屏念出第几步、标题），键盘接着往下填。\n *\n * 部件：Root（Form）、Steps、Panel（这一步的内容，div）、Actions（Flex）、Previous、Next、Submit（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { Form, type FormProps } from '../form/Form';\nimport type { FormControllerBase } from '../form/useForm';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { Steps, type StepItem, type StepsProps } from '../navigation/Steps';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 一步 */\nexport interface FormStep {\n  /** 步骤条上的标题 */\n  title: VNodeChild;\n  /** 步骤条上的说明 */\n  description?: VNodeChild;\n  /** 这一步的字段路径（含子路径）：“下一步”只校验它们，出错时这一步标成出错 */\n  fields: readonly string[];\n  /** 这一步的内容：form.Field 们 */\n  content: () => VNodeChild;\n}\n\n/** 未声明的属性落到 Form（form 元素）上；标签布局、只读、不可用同 Form */\nexport interface StepsFormProps extends Omit<FormProps, 'controller' | 'children'> {\n  /** useForm 的控制器 */\n  form: FormControllerBase;\n  /** 各步 */\n  steps: readonly FormStep[];\n  /** 当前第几步，从 0 开始：父级可以写 _current={x} */\n  _current?: number;\n  /** 提交按钮的文字，默认取文案（提交） */\n  submitText?: VNodeChild;\n  /** 步骤条（Steps）的部件属性 */\n  propsSteps?: Partial<StepsProps>;\n  /** 这一步内容外层的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsActions?: Partial<FlexProps>;\n  /** 上一步按钮的部件属性 */\n  propsPrevious?: Partial<ButtonProps>;\n  /** 下一步按钮的部件属性 */\n  propsNext?: Partial<ButtonProps>;\n  /** 提交按钮的部件属性 */\n  propsSubmit?: Partial<ButtonProps>;\n}\n\n/** StepsForm 的样式：root、panel */\nexport const stepsFormStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_lg' },\n  // 换步后焦点在这里：不画焦点环（内容本身不是控件），读屏念出它的名称\n  panel: { display: 'flex', flexDirection: 'column', gap: '_md', outline: 'none' },\n});\n\n/** 字段 path 在这一步里：就是它，或是它的子路径（`address.city` 属于 `address`） */\nconst inStep = (step: FormStep, path: string) =>\n  step.fields.some((field) => path === field || path.startsWith(`${field}.`));\n\n/** 分步表单：步骤条 + 这一步的字段 + 上一步、下一步、提交 */\nexport const StepsForm = _component(\n  ({\n    form,\n    steps,\n    _current: current = _bindable(0),\n    submitText,\n    propsSteps,\n    propsPanel,\n    propsActions,\n    propsPrevious,\n    propsNext,\n    propsSubmit,\n    ...rest\n  }: StepsFormProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    let panel = _state.raw<HTMLElement | null>(null);\n\n    /** 这一步有显示着的错误 */\n    const hasError = (step: FormStep) =>\n      Object.keys(form.errors).some((path) => inStep(step, path) && form.visibleError(path));\n\n    /** 换到第 index 步，焦点移到这一步的内容上 */\n    function go(index: number) {\n      current = index;\n      void nextTick(() => panel?.focus());\n    }\n\n    async function next() {\n      const step = steps[current];\n      if (step && (await form.validate(step.fields))) go(current + 1);\n    }\n\n    // 整份提交没通过：跳到第一个有错的步骤\n    _effect(() => {\n      if (form.submitCount === 0 || form.submitting) return;\n      const first = steps.findIndex(hasError);\n      if (first >= 0 && first !== current && !hasError(steps[current]!)) go(first);\n    });\n\n    const items = (): StepItem[] =>\n      steps.map((step, index) => ({\n        title: step.title,\n        description: step.description,\n        status: hasError(step) ? 'error' : undefined,\n        // 只能点回走过的步骤\n        disabled: index > current,\n      }));\n\n    return () => {\n      const step = steps[current];\n      const last = current >= steps.length - 1;\n      return (\n        <Form {...rest} controller={form}>\n          <div {...css.attrs(stepsFormStyles.root)}>\n            <Steps\n              {...mergePartProps<StepsProps>({ items: items() }, propsSteps, {\n                items: items(),\n                navigable: true,\n              })}\n              _current={current}\n              onUpdate:_current={(index: number) => go(index)}\n            />\n            <div\n              {...mergeAttrs<'div'>({ sx: stepsFormStyles.panel }, propsPanel, {\n                ref: _toRef(panel),\n                id: `${id}-panel`,\n                tabindex: -1,\n                role: 'group',\n                'aria-label': messages.stepsFormStep(current + 1, steps.length),\n              })}\n            >\n              {step?.content()}\n            </div>\n            <Flex {...mergePartProps<FlexProps>({ justify: 'end', gap: 'sm' }, propsActions)}>\n              {current > 0 && (\n                <Button\n                  {...mergePartProps<ButtonProps>(\n                    { variant: 'ghost', tone: 'neutral' },\n                    propsPrevious,\n                    { onClick: () => go(current - 1) },\n                  )}\n                >\n                  {messages.stepsFormPrevious}\n                </Button>\n              )}\n              {last ? (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsSubmit, {\n                    type: 'submit',\n                    loading: form.submitting,\n                  })}\n                >\n                  {submitText ?? messages.stepsFormSubmit}\n                </Button>\n              ) : (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsNext, {\n                    loading: form.validating(),\n                    onClick: () => void next(),\n                  })}\n                >\n                  {messages.stepsFormNext}\n                </Button>\n              )}\n            </Flex>\n          </div>\n        </Form>\n      );\n    };\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"StepsForm.js","names":["_vtp_readonlyProp","_vtp_bindable","_vtp_restProps","_vue_shallowRef","_createVNode","_mergeProps"],"sources":["../../src/patterns/StepsForm.tsx"],"sourcesContent":["/**\n * 分步表单：一份 useForm 的表单分成几步填（开户、准入申请、配置向导），上方是步骤条，下方是这一步的字段与“上一步 / 下一步 / 提交”。\n * 同 Ant Design ProComponents 的 StepsForm。\n *\n *   <StepsForm\n *     form={form}\n *     _current={step}\n *     steps={[\n *       { title: '企业信息', fields: ['company', 'contact'], content: () => <>…form.Field…</> },\n *       { title: '账号', fields: ['password', 'confirm'], content: () => <>…</> },\n *     ]}\n *   />\n *\n * - “下一步”只校验这一步的字段（form.validate(fields)），通过才往后走，没通过的错误立即显示；走过的步骤可以点回去。\n * - 最后一步是“提交”（表单的原生提交）：整份校验没通过时跳到第一个有错的步骤，那一步在步骤条上标成出错。\n * - 换了一步焦点移到这一步的内容上（读屏念出第几步、标题），键盘接着往下填。\n *\n * 部件：Root（Form）、Steps、Panel（这一步的内容，div）、Actions（Flex）、Previous、Next、Submit（Button）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { nextTick, useId, type VNodeChild } from 'vue';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { useMessages } from '../config/lang/messages';\nimport { Form, type FormProps } from '../form/Form';\nimport type { FormControllerBase } from '../form/useForm';\nimport { Flex, type FlexProps } from '../layout/Flex';\nimport { Steps, type StepItem, type StepsProps } from '../navigation/Steps';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 一步 */\nexport interface FormStep {\n  /** 步骤条上的标题 */\n  title: VNodeChild;\n  /** 步骤条上的说明 */\n  description?: VNodeChild;\n  /** 这一步的字段路径（含子路径）：“下一步”只校验它们，出错时这一步标成出错 */\n  fields: readonly string[];\n  /** 这一步的内容：form.Field 们 */\n  content: () => VNodeChild;\n}\n\n/** 未声明的属性落到 Form（form 元素）上；标签布局、只读、不可用同 Form */\nexport interface StepsFormProps extends Omit<FormProps, 'controller' | 'children'> {\n  /** useForm 的控制器 */\n  form: FormControllerBase;\n  /** 各步 */\n  steps: readonly FormStep[];\n  /** 当前第几步，从 0 开始：父级可以写 _current={x} */\n  _current?: number;\n  /** 提交按钮的文字，默认取文案（提交） */\n  submitText?: VNodeChild;\n  /** 步骤条（Steps）的部件属性 */\n  propsSteps?: Partial<StepsProps>;\n  /** 这一步内容外层的部件属性 */\n  propsPanel?: PartProps<'div'>;\n  /** 按钮行的部件属性 */\n  propsActions?: Partial<FlexProps>;\n  /** 上一步按钮的部件属性 */\n  propsPrevious?: Partial<ButtonProps>;\n  /** 下一步按钮的部件属性 */\n  propsNext?: Partial<ButtonProps>;\n  /** 提交按钮的部件属性 */\n  propsSubmit?: Partial<ButtonProps>;\n}\n\n/** StepsForm 的样式：root、panel */\nexport const stepsFormStyles = css.create({\n  root: { display: 'flex', flexDirection: 'column', gap: '_lg' },\n  // 换步后焦点在这里：不画焦点环（内容本身不是控件），读屏念出它的名称\n  panel: { display: 'flex', flexDirection: 'column', gap: '_md', outline: 'none' },\n});\n\n/** 字段 path 在这一步里：就是它，或是它的子路径（`address.city` 属于 `address`） */\nconst inStep = (step: FormStep, path: string) =>\n  step.fields.some((field) => path === field || path.startsWith(`${field}.`));\n\n/** 分步表单：步骤条 + 这一步的字段 + 上一步、下一步、提交 */\nexport const StepsForm = _component(\n  ({\n    form,\n    steps,\n    _current: current = _bindable(0),\n    submitText,\n    propsSteps,\n    propsPanel,\n    propsActions,\n    propsPrevious,\n    propsNext,\n    propsSubmit,\n    ...rest\n  }: StepsFormProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const id = useId();\n    let panel = _state.raw<HTMLElement | null>(null);\n\n    /** 这一步有显示着的错误 */\n    const hasError = (step: FormStep) =>\n      Object.keys(form.errors).some((path) => inStep(step, path) && form.visibleError(path));\n\n    /** 换到第 index 步，焦点移到这一步的内容上 */\n    function go(index: number) {\n      current = index;\n      void nextTick(() => panel?.focus());\n    }\n\n    async function next() {\n      const step = steps[current];\n      if (step && (await form.validate(step.fields))) go(current + 1);\n    }\n\n    // 整份提交没通过：跳到第一个有错的步骤\n    _effect(() => {\n      if (form.submitCount === 0 || form.submitting) return;\n      const first = steps.findIndex(hasError);\n      if (first >= 0 && first !== current && !hasError(steps[current]!)) go(first);\n    });\n\n    const items = (): StepItem[] =>\n      steps.map((step, index) => ({\n        title: step.title,\n        description: step.description,\n        status: hasError(step) ? 'error' : undefined,\n        // 只能点回走过的步骤\n        disabled: index > current,\n      }));\n\n    return () => {\n      const step = steps[current];\n      const last = current >= steps.length - 1;\n      return (\n        <Form {...rest} controller={form}>\n          <div {...css.attrs(stepsFormStyles.root)}>\n            <Steps\n              {...mergePartProps<StepsProps>({ items: items() }, propsSteps, {\n                items: items(),\n                navigable: true,\n              })}\n              _current={current}\n              onUpdate:_current={(index: number) => go(index)}\n            />\n            <div\n              {...mergeAttrs<'div'>({ sx: stepsFormStyles.panel }, propsPanel, {\n                ref: _toRef(panel),\n                id: `${id}-panel`,\n                tabindex: -1,\n                role: 'group',\n                'aria-label': messages.stepsFormStep(current + 1, steps.length),\n              })}\n            >\n              {step?.content()}\n            </div>\n            <Flex {...mergePartProps<FlexProps>({ justify: 'end', gap: 'sm' }, propsActions)}>\n              {current > 0 && (\n                <Button\n                  {...mergePartProps<ButtonProps>(\n                    { variant: 'ghost', tone: 'neutral' },\n                    propsPrevious,\n                    { onClick: () => go(current - 1) },\n                  )}\n                >\n                  {messages.stepsFormPrevious}\n                </Button>\n              )}\n              {last ? (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsSubmit, {\n                    type: 'submit',\n                    loading: form.submitting,\n                  })}\n                >\n                  {submitText ?? messages.stepsFormSubmit}\n                </Button>\n              ) : (\n                <Button\n                  {...mergePartProps<ButtonProps>({}, propsNext, {\n                    loading: form.validating(),\n                    onClick: () => void next(),\n                  })}\n                >\n                  {messages.stepsFormNext}\n                </Button>\n              )}\n            </Flex>\n          </div>\n        </Form>\n      );\n    };\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/ThemeSwitcher.js

@@ -7,8 +7,8 @@ import { SYSTEM_THEME } from "../config/theme/boot.js";
 import { builtinThemeLabel, builtinThemes } from "../config/theme/builtin.js";
 import { useMessages } from "../config/lang/messages.js";
 import { patternsMessages } from "./messages.js";
-import { createVNode, isVNode, mergeProps } from "vue";
-import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import { Citrus, Coffee, Contrast, Flower2, Monitor, Moon, MoonStar, Palette, PartyPopper, ScrollText, Sun, Trees, Waves, Zap } from "@lucide/icons";
 //#region src/patterns/ThemeSwitcher.tsx
 /**
@@ -64,7 +64,7 @@ var ThemeSwitcher = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => {
 		let _slot2;
 		const choices = system.value ? [SYSTEM_THEME, ...preference.value.names] : [...preference.value.names];
-		return createVNode(Menu$1, mergeProps(rest, { "trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergePartProps({
+		return createVNode(Menu$1, mergeJsxProps(rest, { "trigger": _cache[0] || (_cache[0] = (props) => createVNode(IconButton, mergePartProps({
 			icon: iconOf(preference.value.preference),
 			"aria-label": messages.themeLabel
 		}, propsTrigger.value, {

package/dist/patterns/ThemeSwitcher.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeSwitcher.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","Menu","_mergeProps"],"sources":["../../src/patterns/ThemeSwitcher.tsx"],"sourcesContent":["/**\n * 主题切换：图标按钮弹出菜单，列出“跟随系统”与各套主题，配合 createThemePreference 使用。\n *\n *   const preference = createThemePreference({ themes: { light: lightTheme, dark: darkTheme, paper: paperTheme } });\n *   <ThemeSwitcher preference={preference} />\n *\n * 选中后新主题从按钮处圆形展开（revealTransition；不支持 View Transitions 或减少动态效果时直接切换）。\n * 按钮的图标表示当前的选择；内置主题（builtinThemes）与跟随系统有默认的文字和图标，其他主题用 labels、icons 补上。\n */\nimport {\n  Citrus,\n  Coffee,\n  Contrast,\n  Flower2,\n  Monitor,\n  Moon,\n  MoonStar,\n  Palette,\n  PartyPopper,\n  ScrollText,\n  Sun,\n  Trees,\n  Waves,\n  Zap,\n} from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport type { IconData } from '../base/Icon';\nimport { Menu, MenuRadioGroup, MenuRadioItem, type MenuProps } from '../overlay/Menu';\nimport { toElement } from '../utils/dom/element';\nimport { mergePartProps } from '../utils/props';\nimport { SYSTEM_THEME } from '../config/theme/boot';\nimport { builtinThemeLabel, builtinThemes, type BuiltinThemeName } from '../config/theme/builtin';\nimport type { ThemePreference } from '../config/theme/preference';\n\n/** 未声明的属性落到菜单（role=\"menu\" 的 div）上 */\nexport interface ThemeSwitcherProps<Name extends string> extends Omit<\n  MenuProps,\n  'trigger' | 'children'\n> {\n  /** createThemePreference 的结果 */\n  preference: ThemePreference<Name>;\n  /** 各选项的文字（键是主题名或 'system'）；内置主题与跟随系统默认取语言包，其他默认是主题名 */\n  labels?: Partial<Record<Name | typeof SYSTEM_THEME, string>>;\n  /** 各选项的图标；内置主题与跟随系统有默认图标，其他默认是调色板 */\n  icons?: Partial<Record<Name | typeof SYSTEM_THEME, IconData>>;\n  /** 列出“跟随系统”，默认 true */\n  system?: boolean;\n  /** 触发按钮的部件属性 */\n  propsTrigger?: Partial<IconButtonProps>;\n}\n\n// 每套内置主题都要有图标：加主题时漏了这里类型检查会报错\nconst DEFAULT_ICONS: Record<BuiltinThemeName | typeof SYSTEM_THEME, IconData> = {\n  [SYSTEM_THEME]: Monitor,\n  light: Sun,\n  dark: Moon,\n  paper: ScrollText,\n  midnight: MoonStar,\n  'high-contrast': Contrast,\n  ocean: Waves,\n  forest: Trees,\n  lemon: Citrus,\n  sakura: Flower2,\n  festive: PartyPopper,\n  cyberpunk: Zap,\n  coffee: Coffee,\n};\n\n/** 主题切换（图标按钮 + 单选菜单）：选中后从按钮处圆形展开新主题 */\nexport const ThemeSwitcher = _component(\n  <Name extends string>({\n    preference,\n    labels,\n    icons,\n    system = true,\n    propsTrigger,\n    ...rest\n  }: ThemeSwitcherProps<Name>) => {\n    const lang = useLang();\n    const messages = useMessages('patterns', patternsMessages);\n    let button: HTMLElement | null = null;\n\n    const labelOf = (name: string) =>\n      (labels as Record<string, string | undefined> | undefined)?.[name] ??\n      (name === SYSTEM_THEME\n        ? lang.themeSystem\n        : name in builtinThemes\n          ? builtinThemeLabel(lang, name as BuiltinThemeName)\n          : name);\n    const iconOf = (name: string) =>\n      (icons as Record<string, IconData | undefined> | undefined)?.[name] ??\n      (DEFAULT_ICONS as Record<string, IconData | undefined>)[name] ??\n      Palette;\n\n    function choose(next: string) {\n      const rect = button?.getBoundingClientRect();\n      const origin = rect && { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\n      void preference.set(next as Name, { origin });\n    }\n\n    return () => {\n      const choices: string[] = system\n        ? [SYSTEM_THEME, ...preference.names]\n        : [...preference.names];\n      return (\n        <Menu\n          {...rest}\n          trigger={(props) => (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: iconOf(preference.preference), 'aria-label': messages.themeLabel },\n                propsTrigger,\n                {\n                  ...props,\n                  ref: (value: unknown) => {\n                    props.ref(value);\n                    button = toElement(value);\n                  },\n                },\n              )}\n            />\n          )}\n        >\n          <MenuRadioGroup\n            _value={preference.preference}\n            onUpdate:_value={choose}\n            aria-label={messages.themeLabel}\n          >\n            {choices.map((name) => (\n              <MenuRadioItem key={name} value={name} icon={iconOf(name)}>\n                {labelOf(name)}\n              </MenuRadioItem>\n            ))}\n          </MenuRadioGroup>\n        </Menu>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;AAkBA,IAAM,gBAA0E;EAC7E,eAAe;CAChB,OAAO;CACP,MAAM;CACN,OAAO;CACP,UAAU;CACV,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;AACV;;AAGA,IAAa,gBAAgB,0BAC3B,QAAA,SAOgC;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,aAAAC,aAAA,QAAA,YAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAHrB,IAAI;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAEV,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,IAAI,SAA6B;CAEjC,MAAM,WAAW,SACf,OAAA,QAA6D,UAC5D,SAAA,WACG,KAAK,cACL,QAAQ,gBACN,kBAAkB,MAAM,IAAwB,IAChD;CACR,MAAM,UAAU,SACd,MAAA,QAA8D,SAC7D,cAAuD,SACxD;CAEF,SAAS,OAAO,MAAc;EAC5B,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,MAAM,SAAS,QAAQ;GAAE,GAAG,KAAK,OAAO,KAAK,QAAQ;GAAG,GAAG,KAAK,MAAM,KAAK,SAAS;EAAE;EACtF,WAAK,MAAW,IAAI,MAAc,EAAE,OAAO,CAAC;CAC9C;CAEA,aAAa;EAAA,IAAA;EACX,MAAM,UAAoB,OAAA,QACtB,CAAC,cAAc,GAAG,WAAA,MAAW,KAAK,IAClC,CAAC,GAAG,WAAA,MAAW,KAAK;EACxB,OAAAC,YAAAC,QAAAC,WAEQ,MAAI,EAAA,WAAA,OAAA,OAAA,OAAA,MACE,UAAKF,YAAA,YAEP,eACF;GAAE,MAAM,OAAO,WAAA,MAAW,UAAU;GAAG,cAAc,SAAS;EAAW,GAAC,aAAA,OAE1E;GACE,GAAG;GACH,MAAM,UAAmB;IACvB,MAAM,IAAI,KAAK;IACf,SAAS,UAAU,KAAK;GAC1B;EACF,CACF,GAAC,IAAA,GAEJ,CAAA,GAAA,EAAA,eAAA,CAAAA,YAAA,gBAAA;GAAA,UAGS,WAAA,MAAW;GAAU,mBACZ;GAAM,cACX,SAAS;EAAU,GAAA,QAAA,SAE9B,QAAQ,KAAK,SAAI;GAAA,IAAA;GAAA,OAAAA,YAAA,eAAA;IAAA,OACI;IAAI,SAAS;IAAI,QAAQ,OAAO,IAAI;GAAC,GAAA,QAAA,QACtD,QAAQ,IAAI,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAAA,CAEjB,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,CAAA;CAIV;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"ThemeSwitcher.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","Menu","_mergeProps"],"sources":["../../src/patterns/ThemeSwitcher.tsx"],"sourcesContent":["/**\n * 主题切换：图标按钮弹出菜单，列出“跟随系统”与各套主题，配合 createThemePreference 使用。\n *\n *   const preference = createThemePreference({ themes: { light: lightTheme, dark: darkTheme, paper: paperTheme } });\n *   <ThemeSwitcher preference={preference} />\n *\n * 选中后新主题从按钮处圆形展开（revealTransition；不支持 View Transitions 或减少动态效果时直接切换）。\n * 按钮的图标表示当前的选择；内置主题（builtinThemes）与跟随系统有默认的文字和图标，其他主题用 labels、icons 补上。\n */\nimport {\n  Citrus,\n  Coffee,\n  Contrast,\n  Flower2,\n  Monitor,\n  Moon,\n  MoonStar,\n  Palette,\n  PartyPopper,\n  ScrollText,\n  Sun,\n  Trees,\n  Waves,\n  Zap,\n} from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { useLang } from '../config/context';\nimport { useMessages } from '../config/lang/messages';\nimport { patternsMessages } from './messages';\nimport type { IconData } from '../base/Icon';\nimport { Menu, MenuRadioGroup, MenuRadioItem, type MenuProps } from '../overlay/Menu';\nimport { toElement } from '../utils/dom/element';\nimport { mergePartProps } from '../utils/props';\nimport { SYSTEM_THEME } from '../config/theme/boot';\nimport { builtinThemeLabel, builtinThemes, type BuiltinThemeName } from '../config/theme/builtin';\nimport type { ThemePreference } from '../config/theme/preference';\n\n/** 未声明的属性落到菜单（role=\"menu\" 的 div）上 */\nexport interface ThemeSwitcherProps<Name extends string> extends Omit<\n  MenuProps,\n  'trigger' | 'children'\n> {\n  /** createThemePreference 的结果 */\n  preference: ThemePreference<Name>;\n  /** 各选项的文字（键是主题名或 'system'）；内置主题与跟随系统默认取语言包，其他默认是主题名 */\n  labels?: Partial<Record<Name | typeof SYSTEM_THEME, string>>;\n  /** 各选项的图标；内置主题与跟随系统有默认图标，其他默认是调色板 */\n  icons?: Partial<Record<Name | typeof SYSTEM_THEME, IconData>>;\n  /** 列出“跟随系统”，默认 true */\n  system?: boolean;\n  /** 触发按钮的部件属性 */\n  propsTrigger?: Partial<IconButtonProps>;\n}\n\n// 每套内置主题都要有图标：加主题时漏了这里类型检查会报错\nconst DEFAULT_ICONS: Record<BuiltinThemeName | typeof SYSTEM_THEME, IconData> = {\n  [SYSTEM_THEME]: Monitor,\n  light: Sun,\n  dark: Moon,\n  paper: ScrollText,\n  midnight: MoonStar,\n  'high-contrast': Contrast,\n  ocean: Waves,\n  forest: Trees,\n  lemon: Citrus,\n  sakura: Flower2,\n  festive: PartyPopper,\n  cyberpunk: Zap,\n  coffee: Coffee,\n};\n\n/** 主题切换（图标按钮 + 单选菜单）：选中后从按钮处圆形展开新主题 */\nexport const ThemeSwitcher = _component(\n  <Name extends string>({\n    preference,\n    labels,\n    icons,\n    system = true,\n    propsTrigger,\n    ...rest\n  }: ThemeSwitcherProps<Name>) => {\n    const lang = useLang();\n    const messages = useMessages('patterns', patternsMessages);\n    let button: HTMLElement | null = null;\n\n    const labelOf = (name: string) =>\n      (labels as Record<string, string | undefined> | undefined)?.[name] ??\n      (name === SYSTEM_THEME\n        ? lang.themeSystem\n        : name in builtinThemes\n          ? builtinThemeLabel(lang, name as BuiltinThemeName)\n          : name);\n    const iconOf = (name: string) =>\n      (icons as Record<string, IconData | undefined> | undefined)?.[name] ??\n      (DEFAULT_ICONS as Record<string, IconData | undefined>)[name] ??\n      Palette;\n\n    function choose(next: string) {\n      const rect = button?.getBoundingClientRect();\n      const origin = rect && { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };\n      void preference.set(next as Name, { origin });\n    }\n\n    return () => {\n      const choices: string[] = system\n        ? [SYSTEM_THEME, ...preference.names]\n        : [...preference.names];\n      return (\n        <Menu\n          {...rest}\n          trigger={(props) => (\n            <IconButton\n              {...mergePartProps<IconButtonProps>(\n                { icon: iconOf(preference.preference), 'aria-label': messages.themeLabel },\n                propsTrigger,\n                {\n                  ...props,\n                  ref: (value: unknown) => {\n                    props.ref(value);\n                    button = toElement(value);\n                  },\n                },\n              )}\n            />\n          )}\n        >\n          <MenuRadioGroup\n            _value={preference.preference}\n            onUpdate:_value={choose}\n            aria-label={messages.themeLabel}\n          >\n            {choices.map((name) => (\n              <MenuRadioItem key={name} value={name} icon={iconOf(name)}>\n                {labelOf(name)}\n              </MenuRadioItem>\n            ))}\n          </MenuRadioGroup>\n        </Menu>\n      );\n    };\n  },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;AAkBA,IAAM,gBAA0E;EAC7E,eAAe;CAChB,OAAO;CACP,MAAM;CACN,OAAO;CACP,UAAU;CACV,iBAAiB;CACjB,OAAO;CACP,QAAQ;CACR,OAAO;CACP,QAAQ;CACR,SAAS;CACT,WAAW;CACX,QAAQ;AACV;;AAGA,IAAa,gBAAgB,0BAC3B,QAAA,SAOgC;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,aAAAC,aAAA,QAAA,YAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,QAAA;CAAA,MAAA,QAAAA,aAAA,QAAA,OAAA;CAAA,MAAA,SAAAA,aAAA,QAAA,UAHrB,IAAI;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAEV,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CACrB,MAAM,WAAW,YAAY,YAAY,gBAAgB;CACzD,IAAI,SAA6B;CAEjC,MAAM,WAAW,SACf,OAAA,QAA6D,UAC5D,SAAA,WACG,KAAK,cACL,QAAQ,gBACN,kBAAkB,MAAM,IAAwB,IAChD;CACR,MAAM,UAAU,SACd,MAAA,QAA8D,SAC7D,cAAuD,SACxD;CAEF,SAAS,OAAO,MAAc;EAC5B,MAAM,OAAO,QAAQ,sBAAsB;EAC3C,MAAM,SAAS,QAAQ;GAAE,GAAG,KAAK,OAAO,KAAK,QAAQ;GAAG,GAAG,KAAK,MAAM,KAAK,SAAS;EAAE;EACtF,WAAK,MAAW,IAAI,MAAc,EAAE,OAAO,CAAC;CAC9C;CAEA,aAAa;EAAA,IAAA;EACX,MAAM,UAAoB,OAAA,QACtB,CAAC,cAAc,GAAG,WAAA,MAAW,KAAK,IAClC,CAAC,GAAG,WAAA,MAAW,KAAK;EACxB,OAAAC,YAAAC,QAAAC,cAEQ,MAAI,EAAA,WAAA,OAAA,OAAA,OAAA,MACE,UAAKF,YAAA,YAEP,eACF;GAAE,MAAM,OAAO,WAAA,MAAW,UAAU;GAAG,cAAc,SAAS;EAAW,GAAC,aAAA,OAE1E;GACE,GAAG;GACH,MAAM,UAAmB;IACvB,MAAM,IAAI,KAAK;IACf,SAAS,UAAU,KAAK;GAC1B;EACF,CACF,GAAC,IAAA,GAEJ,CAAA,GAAA,EAAA,eAAA,CAAAA,YAAA,gBAAA;GAAA,UAGS,WAAA,MAAW;GAAU,mBACZ;GAAM,cACX,SAAS;EAAU,GAAA,QAAA,SAE9B,QAAQ,KAAK,SAAI;GAAA,IAAA;GAAA,OAAAA,YAAA,eAAA;IAAA,OACI;IAAI,SAAS;IAAI,QAAQ,OAAO,IAAI;GAAC,GAAA,QAAA,QACtD,QAAQ,IAAI,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA;EAAA,CAEjB,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA,CAAA,EAAA,CAAA;CAIV;AACF,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/patterns/index.d.ts

@@ -1,7 +1,7 @@
 /**
  * 页面组合（子路径 `@zerodep-dev/vue-tsx-pro-ui/patterns`）：用核心组件拼好的页面级部件，后台应用直接拿来搭页面：
  * 应用外壳 AppShell、页签区 PageTabs、查询表格 QueryTable、分步表单 StepsForm、数据导入 DataImport、吸底操作栏 ActionBar、筛选条 FilterBar、通知中心 NotificationCenter、
- * 留言 CommentThread、看板 KanbanBoard、时限标记 DeadlineBadge、主题切换 ThemeSwitcher、命令式的表单对话框 useFormDialog。
+ * 留言 CommentThread、看板 KanbanBoard、时限标记 DeadlineBadge、主题切换 ThemeSwitcher、布局切换 LayoutSwitcher、认证页版式 AuthLayout、拼图滑块验证 SlideCaptcha、命令式的表单对话框 useFormDialog。
  *
  *   import { AppShell, FilterBar } from '@zerodep-dev/vue-tsx-pro-ui/patterns';
  *
@@ -9,15 +9,19 @@
  * 文案自带中英文（messages.ts），别的语言在 Lang.messages.patterns 里补。
  */
 export { ActionBar, actionBarStyles, type ActionBarProps } from './ActionBar';
-export { AppShell, AppShellBrand, appShellBrandStyles, AppShellContext, appShellDynamicStyles, appShellOffset, appShellStyles, type AppShellBrandProps, type AppShellProps, type AppShellSidebarModes, type AppShellState, } from './AppShell';
+export { AppShell, AppShellBrand, appShellBrandStyles, AppShellContext, appShellDynamicStyles, appShellOffset, appShellStyles, type AppShellBrandProps, type AppShellProps, type AppShellSidebarModes, type AppShellSidebarSides, type AppShellState, } from './AppShell';
+export { AuthLayout, authLayoutStyles, type AuthLayoutProps } from './AuthLayout';
 export { CommentComposer, commentStyles, CommentThread, type CommentAttachment, type CommentAuthor, type CommentComposerProps, type CommentDraft, type CommentItem, type CommentThreadProps, } from './CommentThread';
 export { DataImport, dataImportStyles, type DataImportProps, type ImportField } from './DataImport';
 export { DeadlineBadge, type DeadlineBadgeProps } from './DeadlineBadge';
 export { FilterBar, filterBarColumnStyles, filterBarStyles, type FilterBarManaged, type FilterBarProps, } from './FilterBar';
+export { FormDialog, type FormDialogProps } from './FormDialog';
 export { KanbanBoard, kanbanBoardDynamicStyles, kanbanBoardStyles, type KanbanBoardProps, type KanbanCardState, type KanbanColumn, } from './KanbanBoard';
+export { LayoutSwitcher, type LayoutSwitcherProps } from './LayoutSwitcher';
 export { NotificationCenter, notificationCenterStyles, NotificationList, notificationListStyles, type NotificationCenterProps, type NotificationItem, type NotificationListOptions, type NotificationListProps, type NotificationType, } from './NotificationCenter';
-export { PageTabs, type PageTab, type PageTabsProps } from './PageTabs';
+export { PageTabs, type PageTab, type PageTabsProps, type PageTabsSource } from './PageTabs';
 export { QueryTable, queryTableStyles, type QueryTableProps } from './QueryTable';
+export { SlideCaptcha, slideCaptchaDynamicStyles, slideCaptchaStyles, type SlideCaptchaProps, type SlideChallenge, type SlideResult, type SlideStatus, } from './SlideCaptcha';
 export { StepsForm, stepsFormStyles, type FormStep, type StepsFormProps } from './StepsForm';
 export { ThemeSwitcher, type ThemeSwitcherProps } from './ThemeSwitcher';
 export { useFormDialog, type FormDialogField, type FormDialogOptions } from './form-dialog';

package/dist/patterns/index.js

@@ -1,15 +1,19 @@
 import { ActionBar, actionBarStyles } from "./ActionBar.js";
 import { patternsMessages } from "./messages.js";
 import { AppShell, AppShellBrand, AppShellContext, appShellBrandStyles, appShellDynamicStyles, appShellOffset, appShellStyles } from "./AppShell.js";
+import { AuthLayout, authLayoutStyles } from "./AuthLayout.js";
 import { CommentComposer, CommentThread, commentStyles } from "./CommentThread.js";
 import { DataImport, dataImportStyles } from "./DataImport.js";
 import { DeadlineBadge } from "./DeadlineBadge.js";
 import { FilterBar, filterBarColumnStyles, filterBarStyles } from "./FilterBar.js";
+import { FormDialog } from "./FormDialog.js";
 import { KanbanBoard, kanbanBoardDynamicStyles, kanbanBoardStyles } from "./KanbanBoard.js";
+import { LayoutSwitcher } from "./LayoutSwitcher.js";
 import { NotificationCenter, NotificationList, notificationCenterStyles, notificationListStyles } from "./NotificationCenter.js";
 import { PageTabs } from "./PageTabs.js";
 import { QueryTable, queryTableStyles } from "./QueryTable.js";
+import { SlideCaptcha, slideCaptchaDynamicStyles, slideCaptchaStyles } from "./SlideCaptcha.js";
 import { StepsForm, stepsFormStyles } from "./StepsForm.js";
 import { ThemeSwitcher } from "./ThemeSwitcher.js";
 import { useFormDialog } from "./form-dialog.js";
-export { ActionBar, AppShell, AppShellBrand, AppShellContext, CommentComposer, CommentThread, DataImport, DeadlineBadge, FilterBar, KanbanBoard, NotificationCenter, NotificationList, PageTabs, QueryTable, StepsForm, ThemeSwitcher, actionBarStyles, appShellBrandStyles, appShellDynamicStyles, appShellOffset, appShellStyles, commentStyles, dataImportStyles, filterBarColumnStyles, filterBarStyles, kanbanBoardDynamicStyles, kanbanBoardStyles, notificationCenterStyles, notificationListStyles, patternsMessages, queryTableStyles, stepsFormStyles, useFormDialog };
+export { ActionBar, AppShell, AppShellBrand, AppShellContext, AuthLayout, CommentComposer, CommentThread, DataImport, DeadlineBadge, FilterBar, FormDialog, KanbanBoard, LayoutSwitcher, NotificationCenter, NotificationList, PageTabs, QueryTable, SlideCaptcha, StepsForm, ThemeSwitcher, actionBarStyles, appShellBrandStyles, appShellDynamicStyles, appShellOffset, appShellStyles, authLayoutStyles, commentStyles, dataImportStyles, filterBarColumnStyles, filterBarStyles, kanbanBoardDynamicStyles, kanbanBoardStyles, notificationCenterStyles, notificationListStyles, patternsMessages, queryTableStyles, slideCaptchaDynamicStyles, slideCaptchaStyles, stepsFormStyles, useFormDialog };