dsh-pet 0.1.5 → 0.1.7

package/lib/client.js

@@ -2,7 +2,8 @@
 //#region src/client/pickers.ts
 const pick = (pool, exclude) => {
 	const entries = exclude ? pool.filter((n) => n !== exclude) : pool;
-	return entries[Math.floor(Math.random() * entries.length)];
+	const src = entries.length ? entries : pool;
+	return src[Math.floor(Math.random() * src.length)];
 };
 const randomBetween = (min, max) => Math.floor(min + Math.random() * (max - min));
 const pickWeightedCategory = (categories, facing) => {
@@ -18,85 +19,139 @@ const pickWeightedCategory = (categories, facing) => {
 	}
 	return eligible[eligible.length - 1];
 };
+const rollKind = (roll, w) => {
+	const topEnd = (w.idle + w.turn + w.move) / 100;
+	if (roll < w.idle / 100) return "idle";
+	if (roll < (w.idle + w.turn) / 100) return "turn";
+	if (roll < topEnd) return "move";
+	return "action";
+};
+const pickCategoryAction = (categories, idlePool, facing, current) => {
+	const cat = pickWeightedCategory(categories, facing);
+	if (!cat) return {
+		id: "FALLBACK",
+		name: pick(idlePool, current)
+	};
+	return {
+		id: cat.id,
+		name: pick(cat.actions, current)
+	};
+};
 
 //#endregion
-//#region src/client/config.ts
-const FALLBACK_IDLE = "待机呼吸休闲";
-const DEFAULT_MOVE_PARAMS = {
-	minDist: 60,
-	maxDist: 240,
-	margin: 20,
-	leadSec: 2,
-	tailSec: 2
+//#region src/client/motion.ts
+const planMove = (o) => {
+	const distance = randomBetween(o.minDist, o.maxDist);
+	const target = o.cx + o.dir * distance;
+	const leftBound = o.margin + o.halfW;
+	const rightBound = o.W - o.margin - o.halfW;
+	if (target < leftBound || target > rightBound) return null;
+	return {
+		startRatio: o.cx / o.W,
+		startYRatio: o.cy / o.H,
+		targetRatio: target / o.W,
+		totalRatio: Math.abs(target - o.cx) / o.W
+	};
 };
+
+//#endregion
+//#region src/client/config.ts
 const stripJsonc = (src) => src.replace(/\/\*[\s\S]*?\*\//g, "").replace(/(^|[^\\:])\/\/.*$/gm, "$1").trim();
-const buildMinimalAnim = () => ({
-	idle: [FALLBACK_IDLE],
-	turn: [],
-	drag: [],
-	clicks: [],
-	moves: {
-		default: { ...DEFAULT_MOVE_PARAMS },
-		actions: []
+const CORNERS = [
+	"top-left",
+	"top-right",
+	"bottom-left",
+	"bottom-right"
+];
+/** corner 合法性检查用的 string 集合（Corner[] 的 includes 要求 Corner 参数，无法接收未知 string） */
+const CORNER_SET = new Set(CORNERS);
+const EMPTY_CONF = {
+	pets: [],
+	animations: {
+		idle: [],
+		turn: [],
+		drag: [],
+		clicks: [],
+		moves: {
+			default: {},
+			actions: []
+		},
+		categories: []
 	},
-	categories: [],
-	weights: {
-		idle: 100,
+	animationWeights: {
+		idle: 0,
 		turn: 0,
 		move: 0
 	}
-});
-const buildAnim = (obj) => {
-	const a = obj?.animations;
-	const w = obj?.animationWeights ?? {};
-	const strArr = (x) => Array.isArray(x) ? x.map(String).filter(Boolean) : [];
-	const idle = strArr(a?.idle);
-	if (!idle.length) idle.push(FALLBACK_IDLE);
-	const turn = strArr(a?.turn);
-	const drag = strArr(a?.drag);
-	const clicks = strArr(a?.clicks);
-	let mdef = { ...DEFAULT_MOVE_PARAMS };
-	let mActs = [];
-	if (a?.moves && typeof a.moves === "object") {
-		if (a.moves.default && typeof a.moves.default === "object") mdef = {
-			...mdef,
-			...a.moves.default
-		};
-		if (Array.isArray(a.moves.actions)) {
-			const list = a.moves.actions.filter((x) => x && x.name).map((x) => ({
-				name: String(x.name),
-				params: x.params && typeof x.params === "object" ? { ...x.params } : void 0
-			}));
-			if (list.length) mActs = list;
-		}
+};
+function assertClientConfig(raw) {
+	if (!raw || typeof raw !== "object") throw new Error("dsh-pet: config 非对象");
+	const cfg = raw;
+	const petsArr = cfg.pets;
+	if (!Array.isArray(petsArr) || !petsArr.length) throw new Error("dsh-pet: 缺少 pets");
+	const seen = new Set();
+	const pets = [];
+	for (const p of petsArr) {
+		const id = String(p?.id ?? "");
+		if (!id || seen.has(id)) throw new Error("dsh-pet: pet id 非法或重复「" + id + "」");
+		const size = Number(p?.size);
+		if (!Number.isFinite(size) || size <= 0) throw new Error("dsh-pet: pet「" + id + "」大小非法");
+		const corner = p?.position?.corner;
+		if (typeof corner !== "string" || !CORNER_SET.has(corner)) throw new Error("dsh-pet: pet「" + id + "」corner 非法");
+		const marginX = Number(p?.position?.marginX);
+		const marginY = Number(p?.position?.marginY);
+		if (!Number.isFinite(marginX) || !Number.isFinite(marginY)) throw new Error("dsh-pet: pet「" + id + "」边距非法");
+		seen.add(id);
+		pets.push({
+			id,
+			size,
+			position: {
+				corner,
+				marginX,
+				marginY
+			}
+		});
 	}
-	let cats = [];
-	if (Array.isArray(a?.categories)) {
-		const list = a.categories.filter((c) => c && c.id && Array.isArray(c.actions) && c.actions.length).map((c) => ({
-			id: String(c.id),
-			weight: Number(c.weight),
-			noMirror: !!c.noMirror,
-			actions: c.actions.map(String)
-		}));
-		if (list.length) cats = list;
+	const a = cfg.animations;
+	if (!a || typeof a !== "object") throw new Error("dsh-pet: 缺少 animations");
+	for (const key of [
+		"idle",
+		"turn",
+		"drag",
+		"clicks"
+	]) if (!Array.isArray(a[key])) throw new Error("dsh-pet: animations." + key + " 缺失");
+	if (!a.moves || typeof a.moves !== "object" || typeof a.moves.default !== "object" || a.moves.default === null || !Array.isArray(a.moves.actions)) throw new Error("dsh-pet: animations.moves 结构非法");
+	if (!Array.isArray(a.categories)) throw new Error("dsh-pet: animations.categories 缺失");
+	const w = cfg.animationWeights;
+	if (!w || typeof w !== "object") throw new Error("dsh-pet: 缺少 animationWeights");
+	for (const key of [
+		"idle",
+		"turn",
+		"move"
+	]) {
+		const v = Number(w[key]);
+		if (!Number.isFinite(v) || v < 0) throw new Error("dsh-pet: animationWeights." + key + " 非法");
+		w[key] = v;
 	}
 	return {
-		idle,
-		turn,
-		drag,
-		clicks,
-		moves: {
-			default: mdef,
-			actions: mActs
-		},
-		categories: cats,
-		weights: {
-			idle: Number(w.idle) >= 0 ? Number(w.idle) : 10,
-			turn: Number(w.turn) >= 0 ? Number(w.turn) : 5,
-			move: Number(w.move) >= 0 ? Number(w.move) : 5
-		}
+		pets,
+		animations: a,
+		animationWeights: w
 	};
-};
+}
+function resolvePets(defaults, user) {
+	if (user && Array.isArray(user.pets)) return user.pets.length ? user.pets : defaults;
+	return defaults;
+}
+function applyUserOverrides(base, user) {
+	const next = {
+		...base,
+		pets: resolvePets(base.pets, user)
+	};
+	if (user.animations) next.animations = user.animations;
+	if (user.animationWeights) next.animationWeights = user.animationWeights;
+	return next;
+}
 
 //#endregion
 //#region src/client/constants.ts
@@ -111,442 +166,1135 @@ const HIT_BOX = {
 const DRAG_THRESHOLD = 5;
 
 //#endregion
-//#region src/client/app.ts
-/** 支持的角落白名单 */
-const CORNERS = [
-	"top-left",
-	"top-right",
-	"bottom-left",
-	"bottom-right"
-];
-function makeFactory() {
-	return (require) => {
-		var module = { exports: {} };
-		const react = require("react");
-		const { useEffect, useRef, useState } = react;
-		const { jsx: h } = require("react/jsx-runtime");
-		const css = [
-			".dsh-pet-root{position:fixed;z-index:40;pointer-events:none;user-select:none}",
-			".dsh-pet-root[data-corner=\"bottom-right\"]{right:var(--dsh-pet-mx,24px);bottom:var(--dsh-pet-my,0)}",
-			".dsh-pet-root[data-corner=\"bottom-left\"]{left:var(--dsh-pet-mx,24px);bottom:var(--dsh-pet-my,0)}",
-			".dsh-pet-root[data-corner=\"top-right\"]{right:var(--dsh-pet-mx,24px);top:var(--dsh-pet-my,0)}",
-			".dsh-pet-root[data-corner=\"top-left\"]{left:var(--dsh-pet-mx,24px);top:var(--dsh-pet-my,0)}",
-			".dsh-pet-stage{position:relative;width:var(--dsh-pet-size,462px);height:calc(var(--dsh-pet-size,462px)*9/16);pointer-events:none}",
-			".dsh-pet-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .18s ease;transform-origin:center}",
-			".dsh-pet-video.is-front{opacity:1}",
-			".dsh-pet-hit{position:absolute;pointer-events:auto;cursor:default;z-index:1}",
-			".dsh-pet-hit.dragging{cursor:grabbing}",
-			"@media (prefers-reduced-motion: reduce){.dsh-pet-video{transition:none}}"
-		].join("\n");
-		const cssTag = "dsh-pet/style.css";
-		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + cssTag + "\"]") === null) {
-			const tag = document.createElement("style");
-			tag.dataset.plugin = "dsh-pet";
-			tag.dataset.pluginCss = cssTag;
-			tag.textContent = css;
-			document.head.appendChild(tag);
+//#region src/client/settings.ts
+const petBridge = {
+	current: [],
+	sync: () => {},
+	template: void 0
+};
+const NS = "pet.config";
+const zh = {
+	nav: "桌宠配置",
+	intro: "管理多个桌宠：每个宠物可独立设置大小与位置（保存后即时生效）。",
+	petsLabel: "宠物列表",
+	add: "添加宠物",
+	remove: "删除",
+	confirmRemove: "确定删除宠物「{id}」吗？",
+	confirmTitle: "确认操作",
+	cancel: "取消",
+	atLeastOne: "至少保留一个宠物。",
+	emptyPets: "暂无宠物，点击「添加宠物」创建。",
+	sizeLabel: "大小（宽度 px）",
+	sizeHint: "高度自动 = 宽度 × 9/16。",
+	cornerLabel: "位置",
+	"corner.top-left": "左上角",
+	"corner.top-right": "右上角",
+	"corner.bottom-left": "左下角",
+	"corner.bottom-right": "右下角",
+	marginX: "水平偏移",
+	marginY: "垂直偏移",
+	save: "保存",
+	reset: "恢复默认",
+	confirmReset: "确定恢复默认吗？将删除整个用户配置（含自定义的动画池与播放权重）。",
+	resetHint: "「重置」会删除整个用户配置（含自定义的动画池与播放权重），不只是宠物列表。",
+	configMeta: "高级配置（文件）",
+	configMetaHint: "用户配置可覆盖宠物列表 / 动画池 / 播放权重，修改后刷新或重启生效；默认配置为完整参考。",
+	defaultConfig: "默认配置（只读，完整参考）",
+	userConfig: "用户配置（自定义覆盖）",
+	animationDir: "动画素材目录（可自定义/扩充动画）",
+	saved: "已保存，桌宠即时生效。",
+	loadError: "加载配置失败",
+	invalid: "请检查输入：大小需为正数，边距可为任意数字。",
+	busy: "保存中…"
+};
+const en = {
+	nav: "Pet Config",
+	intro: "Manage multiple pets: each pet has its own size and position (applies instantly after saving).",
+	petsLabel: "Pets",
+	add: "Add pet",
+	remove: "Remove",
+	confirmRemove: "Delete pet \"{id}\"?",
+	confirmTitle: "Confirm action",
+	cancel: "Cancel",
+	atLeastOne: "Keep at least one pet.",
+	emptyPets: "No pets yet — click \"Add pet\" to create one.",
+	sizeLabel: "Size (width px)",
+	sizeHint: "Height is automatic = width × 9/16.",
+	cornerLabel: "Position",
+	"corner.top-left": "Top-left",
+	"corner.top-right": "Top-right",
+	"corner.bottom-left": "Bottom-left",
+	"corner.bottom-right": "Bottom-right",
+	marginX: "Horizontal offset",
+	marginY: "Vertical offset",
+	save: "Save",
+	reset: "Reset to default",
+	confirmReset: "Reset to default? This deletes the whole user config (including custom animation pools & weights).",
+	resetHint: "\"Reset\" deletes the whole user config (including custom animation pools & weights), not just the pet list.",
+	configMeta: "Advanced (files)",
+	configMetaHint: "User config may override pets / animation pools / weights — refresh or restart to apply. The default config is the complete reference.",
+	defaultConfig: "Default config (read-only, complete reference)",
+	userConfig: "User config (custom overrides)",
+	animationDir: "Animation assets dir (add/customize animations here)",
+	saved: "Saved — the pets updated instantly.",
+	loadError: "Failed to load config",
+	invalid: "Check your input: size must be positive; margins can be any number.",
+	busy: "Saving…"
+};
+function makePetConfigSection(rt) {
+	const { h, useState, useEffect, t } = rt;
+	const CORNERS$1 = [
+		"top-left",
+		"top-right",
+		"bottom-left",
+		"bottom-right"
+	];
+	const cornerLabel = (c) => t("corner." + c);
+	const inputStyle = {
+		boxSizing: "border-box",
+		border: "1px solid var(--dsw-alias-border-l2)",
+		borderRadius: "8px",
+		background: "var(--dsw-alias-bg-layer-1)",
+		color: "var(--dsw-alias-label-primary)",
+		padding: "5px 10px",
+		fontSize: "13px",
+		minHeight: "28px",
+		outline: "none"
+	};
+	/** 生成一个未占用的宠物 id（pet-2、pet-3…） */
+	const nextId = (list) => {
+		let n = 2;
+		for (;; n++) {
+			const id = "pet-" + n;
+			if (!list.some((p) => p.id === id)) return id;
 		}
-		let ANIM = buildMinimalAnim();
-		function Pet() {
-			const [size, setSize] = useState(462);
-			const halfW = size / 2;
-			const halfH = size * 9 / 16 / 2;
-			const [anim, setAnim] = useState(ANIM.idle[0] ?? "");
-			const [once, setOnce] = useState(true);
-			const [facing, setFacing] = useState("left");
-			const [dragging, setDragging] = useState(false);
-			const [customPos, setCustomPos] = useState(null);
-			const [corner, setCorner] = useState("bottom-right");
-			const [margin, setMargin] = useState({
-				x: 24,
-				y: 0
+	};
+	return function PetConfigSection() {
+		const initPets = petBridge.current;
+		const [pets, setPets] = useState(initPets.map((p) => ({
+			...p,
+			position: { ...p.position }
+		})));
+		const [selId, setSelId] = useState(initPets[0]?.id ?? "");
+		const [busy, setBusy] = useState(false);
+		const [msg, setMsg] = useState({
+			kind: "",
+			text: ""
+		});
+		const [confirm, setConfirm] = useState(null);
+		const [paths, setPaths] = useState(null);
+		useEffect(() => {
+			fetch("/pet/config/meta").then((r) => r.ok ? r.json() : null).then((p) => setPaths(p)).catch(() => console.warn("[dsh-pet] 读取配置文件路径失败"));
+		}, []);
+		const cur = pets.find((p) => p.id === selId) ?? null;
+		const updateSel = (patch) => setPets((list) => list.map((p) => {
+			if (p.id !== selId) return p;
+			const { position: posPatch,...rest } = patch;
+			return {
+				...p,
+				...rest,
+				position: posPatch ? {
+					...p.position,
+					...posPatch
+				} : p.position
+			};
+		}));
+		const validated = () => {
+			for (const p of pets) if (!Number.isFinite(p.size) || p.size <= 0 || !Number.isFinite(p.position.marginX) || !Number.isFinite(p.position.marginY)) {
+				setMsg({
+					kind: "err",
+					text: t("invalid")
+				});
+				return false;
+			}
+			return true;
+		};
+		const save = async () => {
+			const isOk = validated();
+			if (!isOk) return;
+			setBusy(true);
+			setMsg({
+				kind: "",
+				text: ""
 			});
-			useEffect(() => {
-				fetch("/pet/config.jsonc").then((r) => {
-					if (!r.ok) throw new Error("config");
-					return r.text();
-				}).then((src) => {
-					const obj = JSON.parse(stripJsonc(src));
-					const sz = Number(obj && obj.size);
-					if (Number.isFinite(sz) && sz > 0) setSize(sz);
-					ANIM = buildAnim(obj);
-					const p = obj && obj.position;
-					if (p) {
-						if (CORNERS.indexOf(p.corner) !== -1) setCorner(p.corner);
-						const mx = Number(p.marginX);
-						const my = Number(p.marginY);
-						if (!Number.isNaN(mx)) setMargin((m) => ({
-							...m,
-							x: mx
-						}));
-						if (!Number.isNaN(my)) setMargin((m) => ({
-							...m,
-							y: my
-						}));
-					}
-					if (ANIM.idle && ANIM.idle.length) {
-						setAnim(ANIM.idle[0]);
-						setSeq((s) => s + 1);
-					}
-				}).catch(() => {});
-			}, []);
-			const [seq, setSeq] = useState(0);
-			const rootRef = useRef(null);
-			const stageRef = useRef(null);
-			const videoARef = useRef(null);
-			const videoBRef = useRef(null);
-			const frontRef = useRef(0);
-			const pendingRef = useRef(null);
-			const genRef = useRef(0);
-			const dragRef = useRef({
-				active: false,
-				dragging: false,
-				sx: 0,
-				sy: 0,
-				offX: 0,
-				offY: 0
+			try {
+				const res = await fetch("/pet/config", {
+					method: "PUT",
+					headers: { "content-type": "application/json" },
+					body: JSON.stringify({ pets })
+				});
+				if (!res.ok) throw new Error("HTTP " + res.status);
+				petBridge.current = pets;
+				petBridge.sync(pets);
+				setMsg({
+					kind: "ok",
+					text: t("saved")
+				});
+			} catch {
+				setMsg({
+					kind: "err",
+					text: t("loadError")
+				});
+			} finally {
+				setBusy(false);
+			}
+		};
+		const reset = () => setConfirm("reset");
+		const doReset = async () => {
+			setBusy(true);
+			setMsg({
+				kind: "",
+				text: ""
 			});
-			const justDraggedRef = useRef(false);
-			const animRef = useRef(anim);
-			animRef.current = anim;
-			const switchTo = (next, nextOnce) => {
-				if (!next) return;
-				const pending = pendingRef.current;
-				if (pending && pending.anim === next && pending.once === nextOnce) return;
-				const gen = ++genRef.current;
-				pendingRef.current = {
-					anim: next,
-					once: nextOnce,
-					gen
-				};
-				const target = frontRef.current === 0 ? videoBRef : videoARef;
-				const el = target.current;
-				if (!el) return;
-				el.src = "/pet/thumb/" + encodeURIComponent(next) + ".webm";
-				el.loop = !nextOnce;
-				el.muted = true;
-				el.autoplay = true;
-				el.playsInline = true;
-				el.onended = nextOnce ? handleEnded : null;
-				el.load();
-				const onReady = () => {
-					el.removeEventListener("loadeddata", onReady);
-					if (pendingRef.current?.gen !== gen) return;
-					const old = frontRef.current === 0 ? videoARef : videoBRef;
-					el.classList.add("is-front");
-					if (old.current && old.current !== el) old.current.classList.remove("is-front");
-					frontRef.current = frontRef.current === 0 ? 1 : 0;
-					pendingRef.current = null;
-					el.style.transform = facingRef.current === "right" ? "scaleX(-1)" : "";
-					el.play().catch(() => {});
-					if (pendingMoveRef.current) startMoveDrive(el);
-				};
-				el.addEventListener("loadeddata", onReady);
-				if (el.readyState >= 2) onReady();
-			};
-			useEffect(() => {
-				switchTo(anim, once);
-			}, [
-				anim,
-				once,
-				seq
-			]);
-			useEffect(() => () => stopMove(), []);
-			useEffect(() => {
-				const onResize = () => setCustomPos((prev) => prev ? { ...prev } : prev);
-				window.addEventListener("resize", onResize);
-				return () => window.removeEventListener("resize", onResize);
-			}, []);
-			const pickNext = () => {
-				const roll = Math.random();
-				const wI = ANIM.weights.idle;
-				const wT = ANIM.weights.turn;
-				const wM = ANIM.weights.move;
-				const topEnd = (wI + wT + wM) / 100;
-				let kind = "";
-				let next = "";
-				if (roll < wI / 100) {
-					kind = "IDLE";
-					next = pick(ANIM.idle, animRef.current);
-					setAnim(next);
-				} else if (roll < (wI + wT) / 100) {
-					kind = "TURN";
-					next = pick(ANIM.turn, animRef.current);
-					setAnim(next);
-				} else if (roll < topEnd) if (!tryMove()) {
-					const cat = pickWeightedCategory(ANIM.categories, facingRef.current);
-					kind = cat ? cat.id : "FALLBACK";
-					next = cat ? pick(cat.actions, animRef.current) : pick(ANIM.idle, animRef.current);
-					setAnim(next);
-				} else {
-					kind = "MOVES";
-					next = "移动(池内随机)";
-				}
-				else {
-					const cat = pickWeightedCategory(ANIM.categories, facingRef.current);
-					kind = cat ? cat.id : "FALLBACK";
-					next = cat ? pick(cat.actions, animRef.current) : pick(ANIM.idle, animRef.current);
-					setAnim(next);
-				}
-				console.log("[dsh-pet] roll=" + roll.toFixed(4) + " -> [" + kind + "] " + next);
-				setOnce(true);
-				setSeq((s) => s + 1);
-			};
-			const handleEnded = () => {
-				if (dragRef.current.active) return;
-				if (ANIM.turn.includes(animRef.current)) setFacing((f) => f === "left" ? "right" : "left");
-				if (ANIM.drag.includes(animRef.current) || ANIM.clicks.includes(animRef.current)) {
-					if (ANIM.idle.length) setAnim(pick(ANIM.idle, animRef.current));
-					setOnce(true);
-					setSeq((s) => s + 1);
-					return;
-				}
-				pickNext();
-			};
-			const moveRef = useRef(null);
-			const moveTokenRef = useRef(0);
-			const pendingMoveRef = useRef(null);
-			const customPosRef = useRef(customPos);
-			customPosRef.current = customPos;
-			const currentCenterX = () => {
-				const cp = customPosRef.current;
-				if (cp) return cp.rx * window.innerWidth;
-				const rootEl = rootRef.current;
-				if (rootEl) return rootEl.getBoundingClientRect().left + halfW;
-				return window.innerWidth - 24 - halfW;
-			};
-			const currentCenterY = () => {
-				const cp = customPosRef.current;
-				if (cp) return cp.ry * window.innerHeight;
-				const rootEl = rootRef.current;
-				if (rootEl) return rootEl.getBoundingClientRect().top + halfH;
-				return window.innerHeight - 20 - halfH;
+			try {
+				await fetch("/pet/config", { method: "DELETE" });
+				const defRes = await fetch("/pet/config.jsonc");
+				const defs = assertClientConfig(JSON.parse(stripJsonc(await defRes.text()))).pets;
+				setPets(defs.map((p) => ({
+					...p,
+					position: { ...p.position }
+				})));
+				setSelId(defs[0]?.id ?? "");
+				petBridge.current = defs;
+				petBridge.sync(defs);
+				setMsg({
+					kind: "ok",
+					text: t("saved")
+				});
+			} catch {
+				setMsg({
+					kind: "err",
+					text: t("loadError")
+				});
+			} finally {
+				setBusy(false);
+			}
+		};
+		const addPet = () => {
+			const tpl = petBridge.template;
+			if (!tpl) return;
+			const id = nextId(pets);
+			setPets((list) => [...list, {
+				id,
+				size: tpl.size,
+				position: { ...tpl.position }
+			}]);
+			setSelId(id);
+		};
+		const removeSel = () => {
+			if (pets.length <= 1) {
+				setMsg({
+					kind: "err",
+					text: t("atLeastOne")
+				});
+				return;
+			}
+			setConfirm("remove");
+		};
+		const doRemove = () => {
+			const list = pets.filter((p) => p.id !== selId);
+			setPets(list);
+			setSelId(list[0].id);
+		};
+		const field = (key, value, setter, width) => h("input", {
+			type: "number",
+			step: key === "size" ? "10" : "1",
+			min: key === "size" ? "120" : "",
+			value: String(value),
+			disabled: busy,
+			onChange: (e) => setter(Number(e.target.value)),
+			style: {
+				width,
+				...inputStyle
+			}
+		});
+		return h("section", {
+			style: {
+				maxWidth: "720px",
+				color: "var(--dsw-alias-label-primary)",
+				display: "flex",
+				flexDirection: "column",
+				gap: "6px"
+			},
+			children: [
+				h("h2", {
+					style: {
+						margin: 0,
+						fontSize: "16px",
+						fontWeight: 500,
+						lineHeight: "24px"
+					},
+					children: t("nav")
+				}),
+				h("p", {
+					style: {
+						margin: 0,
+						fontSize: "14px",
+						color: "var(--dsw-alias-label-tertiary)",
+						lineHeight: "22px"
+					},
+					children: t("intro")
+				}),
+				h("div", {
+					style: {
+						display: "flex",
+						gap: "8px",
+						flexWrap: "wrap",
+						alignItems: "center",
+						marginTop: "4px"
+					},
+					children: [
+						h("span", {
+							style: {
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: t("petsLabel")
+						}),
+						...pets.map((p) => h("button", {
+							key: p.id,
+							type: "button",
+							onClick: () => setSelId(p.id),
+							style: {
+								border: "1px solid " + (p.id === selId ? "var(--dsw-alias-state-business-primary)" : "var(--dsw-alias-border-l2)"),
+								background: p.id === selId ? "var(--dsw-alias-interactive-bg-active)" : "transparent",
+								color: "var(--dsw-alias-label-primary)",
+								borderRadius: "8px",
+								padding: "4px 12px",
+								fontSize: "13px",
+								cursor: "pointer"
+							},
+							children: p.id + " (" + p.size + "px)"
+						})),
+						h("button", {
+							type: "button",
+							onClick: addPet,
+							disabled: busy,
+							style: {
+								border: "1px dashed var(--dsw-alias-border-l2)",
+								background: "transparent",
+								color: "var(--dsw-alias-label-secondary)",
+								borderRadius: "8px",
+								padding: "4px 12px",
+								fontSize: "13px",
+								cursor: "pointer"
+							},
+							children: "+ " + t("add")
+						})
+					]
+				}),
+				cur ? h("div", {
+					style: {
+						display: "flex",
+						gap: "16px",
+						flexWrap: "wrap",
+						marginTop: "8px",
+						padding: "12px 14px",
+						border: "1px solid var(--dsw-alias-border-l2)",
+						borderRadius: "12px"
+					},
+					children: [
+						h("label", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "4px",
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: [
+								t("sizeLabel"),
+								field("size", cur.size, (v) => updateSel({ size: v }), "150px"),
+								h("span", {
+									style: {
+										fontSize: "11px",
+										color: "var(--dsw-alias-label-tertiary)"
+									},
+									children: t("sizeHint")
+								})
+							]
+						}),
+						h("label", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "4px",
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: [t("cornerLabel"), h("select", {
+								value: cur.position.corner,
+								disabled: busy,
+								onChange: (e) => updateSel({ position: { corner: e.target.value } }),
+								style: {
+									width: "160px",
+									...inputStyle
+								},
+								children: CORNERS$1.map((c) => h("option", {
+									key: c,
+									value: c,
+									children: cornerLabel(c)
+								}))
+							})]
+						}),
+						h("label", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "4px",
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: [t("marginX"), field("marginX", cur.position.marginX, (v) => updateSel({ position: { marginX: v } }), "120px")]
+						}),
+						h("label", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: "4px",
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-secondary)"
+							},
+							children: [t("marginY"), field("marginY", cur.position.marginY, (v) => updateSel({ position: { marginY: v } }), "120px")]
+						}),
+						h("button", {
+							type: "button",
+							onClick: removeSel,
+							disabled: busy,
+							title: t("remove"),
+							style: {
+								alignSelf: "flex-end",
+								border: "1px solid var(--dsw-alias-state-error-secondary)",
+								background: "transparent",
+								color: "var(--dsw-alias-state-error-primary)",
+								borderRadius: "8px",
+								padding: "4px 12px",
+								fontSize: "12px",
+								cursor: "pointer"
+							},
+							children: t("remove")
+						})
+					]
+				}) : h("p", {
+					style: {
+						margin: 0,
+						fontSize: "13px",
+						color: "var(--dsw-alias-label-tertiary)"
+					},
+					children: t("emptyPets")
+				}),
+				h("div", {
+					style: {
+						display: "flex",
+						gap: "8px",
+						alignItems: "center",
+						marginTop: "4px"
+					},
+					children: [
+						h("button", {
+							type: "button",
+							disabled: busy,
+							onClick: save,
+							style: {
+								border: "1px solid var(--dsw-alias-button-info-fill)",
+								background: "var(--dsw-alias-button-info-fill)",
+								color: "#fff",
+								borderRadius: "8px",
+								padding: "4px 14px",
+								fontSize: "12px",
+								cursor: "pointer",
+								opacity: busy ? .5 : 1
+							},
+							children: t("save")
+						}),
+						h("button", {
+							type: "button",
+							disabled: busy,
+							onClick: reset,
+							style: {
+								border: "1px solid var(--dsw-alias-border-l2)",
+								background: "transparent",
+								color: "var(--dsw-alias-label-primary)",
+								borderRadius: "8px",
+								padding: "4px 14px",
+								fontSize: "12px",
+								cursor: "pointer",
+								opacity: busy ? .5 : 1
+							},
+							children: t("reset")
+						}),
+						msg.text ? h("span", {
+							style: {
+								fontSize: "12px",
+								color: msg.kind === "err" ? "var(--dsw-alias-state-error-primary)" : "var(--dsw-alias-state-ok-primary)",
+								marginLeft: "4px"
+							},
+							children: msg.text
+						}) : null
+					]
+				}),
+				h("p", {
+					style: {
+						margin: 0,
+						fontSize: "11px",
+						color: "var(--dsw-alias-label-tertiary)",
+						lineHeight: "16px"
+					},
+					children: t("resetHint")
+				}),
+				paths ? h("div", {
+					style: {
+						marginTop: "12px",
+						padding: "10px 14px",
+						border: "1px solid var(--dsw-alias-border-l2)",
+						borderRadius: "12px",
+						display: "flex",
+						flexDirection: "column",
+						gap: "6px",
+						fontSize: "12px",
+						color: "var(--dsw-alias-label-secondary)"
+					},
+					children: [
+						h("div", {
+							style: {
+								fontSize: "12px",
+								color: "var(--dsw-alias-label-primary)",
+								fontWeight: 500
+							},
+							children: t("configMeta")
+						}),
+						h("div", {
+							style: {
+								fontSize: "12px",
+								lineHeight: "20px"
+							},
+							children: t("configMetaHint")
+						}),
+						h("div", {
+							style: {
+								fontSize: "12px",
+								lineHeight: "18px",
+								wordBreak: "break-all"
+							},
+							children: t("defaultConfig") + "：" + paths.default
+						}),
+						h("div", {
+							style: {
+								fontSize: "12px",
+								lineHeight: "18px",
+								wordBreak: "break-all"
+							},
+							children: t("userConfig") + "：" + paths.user
+						}),
+						h("div", {
+							style: {
+								fontSize: "12px",
+								lineHeight: "18px",
+								wordBreak: "break-all"
+							},
+							children: t("animationDir") + "：" + paths.animations
+						})
+					]
+				}) : null,
+				confirm ? h("div", {
+					style: {
+						position: "fixed",
+						inset: 0,
+						zIndex: 2147483647,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						background: "rgba(0, 0, 0, 0.45)"
+					},
+					onClick: () => setConfirm(null),
+					children: h("div", {
+						style: {
+							width: "340px",
+							maxWidth: "calc(100vw - 40px)",
+							background: "var(--dsw-alias-bg-layer-1)",
+							border: "1px solid var(--dsw-alias-border-l2)",
+							borderRadius: "12px",
+							padding: "16px 18px",
+							boxShadow: "0 8px 30px rgba(0, 0, 0, 0.35)",
+							display: "flex",
+							flexDirection: "column",
+							gap: "12px"
+						},
+						onClick: (e) => e.stopPropagation(),
+						children: [
+							h("div", {
+								style: {
+									fontSize: "14px",
+									fontWeight: 500,
+									color: "var(--dsw-alias-label-primary)"
+								},
+								children: t("confirmTitle")
+							}),
+							h("div", {
+								style: {
+									fontSize: "13px",
+									lineHeight: "20px",
+									color: "var(--dsw-alias-label-secondary)"
+								},
+								children: confirm === "remove" ? t("confirmRemove").replace("{id}", selId) : t("confirmReset")
+							}),
+							h("div", {
+								style: {
+									display: "flex",
+									gap: "8px",
+									justifyContent: "flex-end"
+								},
+								children: [h("button", {
+									type: "button",
+									onClick: () => setConfirm(null),
+									style: {
+										border: "1px solid var(--dsw-alias-border-l2)",
+										background: "transparent",
+										color: "var(--dsw-alias-label-primary)",
+										borderRadius: "8px",
+										padding: "4px 14px",
+										fontSize: "12px",
+										cursor: "pointer"
+									},
+									children: t("cancel")
+								}), h("button", {
+									type: "button",
+									onClick: () => {
+										const k = confirm;
+										setConfirm(null);
+										if (k === "remove") doRemove();
+										else doReset();
+									},
+									style: confirm === "remove" ? {
+										border: "1px solid var(--dsw-alias-state-error-secondary)",
+										background: "transparent",
+										color: "var(--dsw-alias-state-error-primary)",
+										borderRadius: "8px",
+										padding: "4px 14px",
+										fontSize: "12px",
+										cursor: "pointer"
+									} : {
+										border: "1px solid var(--dsw-alias-button-info-fill)",
+										background: "var(--dsw-alias-button-info-fill)",
+										color: "#fff",
+										borderRadius: "8px",
+										padding: "4px 14px",
+										fontSize: "12px",
+										cursor: "pointer"
+									},
+									children: confirm === "remove" ? t("remove") : t("reset")
+								})]
+							})
+						]
+					})
+				}) : null
+			]
+		});
+	};
+}
+
+//#endregion
+//#region src/client/pet.ts
+/** 运行时配置（PetMulti 加载后赋值；PetCard 只读） */
+let config = EMPTY_CONF;
+/** 内联 CSS —— 注入一次（官方插件标准做法） */
+const css = [
+	".dsh-pet-root{position:fixed;z-index:40;pointer-events:none;user-select:none}",
+	".dsh-pet-root[data-corner=\"bottom-right\"]{right:var(--dsh-pet-mx,24px);bottom:var(--dsh-pet-my,0)}",
+	".dsh-pet-root[data-corner=\"bottom-left\"]{left:var(--dsh-pet-mx,24px);bottom:var(--dsh-pet-my,0)}",
+	".dsh-pet-root[data-corner=\"top-right\"]{right:var(--dsh-pet-mx,24px);top:var(--dsh-pet-my,0)}",
+	".dsh-pet-root[data-corner=\"top-left\"]{left:var(--dsh-pet-mx,24px);top:var(--dsh-pet-my,0)}",
+	".dsh-pet-stage{position:relative;width:var(--dsh-pet-size,462px);height:calc(var(--dsh-pet-size,462px)*9/16);pointer-events:none}",
+	".dsh-pet-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;opacity:0;transition:opacity .18s ease;transform-origin:center}",
+	".dsh-pet-video.is-front{opacity:1}",
+	".dsh-pet-hit{position:absolute;pointer-events:auto;cursor:default;z-index:1}",
+	".dsh-pet-hit.dragging{cursor:grabbing}",
+	"@media (prefers-reduced-motion: reduce){.dsh-pet-video{transition:none}}"
+].join("\n");
+const cssTag = "dsh-pet/style.css";
+function injectCss() {
+	if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=\"" + cssTag + "\"]") === null) {
+		const tag = document.createElement("style");
+		tag.dataset.plugin = "dsh-pet";
+		tag.dataset.pluginCss = cssTag;
+		tag.textContent = css;
+		document.head.appendChild(tag);
+	}
+}
+function makePetUI(rt) {
+	const { h, useState, useEffect, useRef } = rt;
+	injectCss();
+	/** 单个宠物实例（配置由容器 PetMulti 传入） */
+	function PetCard({ cfg }) {
+		const [size, setSize] = useState(cfg.size);
+		const halfW = size / 2;
+		const halfH = size * 9 / 16 / 2;
+		const [anim, setAnim] = useState(config.animations.idle[0] ?? "");
+		const [once, setOnce] = useState(true);
+		const [facing, setFacing] = useState("left");
+		const [dragging, setDragging] = useState(false);
+		const [customPos, setCustomPos] = useState(null);
+		const [corner, setCorner] = useState(cfg.position.corner);
+		const [margin, setMargin] = useState({
+			x: cfg.position.marginX,
+			y: cfg.position.marginY
+		});
+		useEffect(() => {
+			setSize(cfg.size);
+			setCorner(cfg.position.corner);
+			setMargin({
+				x: cfg.position.marginX,
+				y: cfg.position.marginY
+			});
+		}, [
+			cfg.size,
+			cfg.position.corner,
+			cfg.position.marginX,
+			cfg.position.marginY
+		]);
+		const [seq, setSeq] = useState(0);
+		const rootRef = useRef(null);
+		const stageRef = useRef(null);
+		const videoARef = useRef(null);
+		const videoBRef = useRef(null);
+		const frontRef = useRef(0);
+		const pendingRef = useRef(null);
+		const genRef = useRef(0);
+		const dragRef = useRef({
+			active: false,
+			dragging: false,
+			sx: 0,
+			sy: 0,
+			offX: 0,
+			offY: 0
+		});
+		const justDraggedRef = useRef(false);
+		const animRef = useRef(anim);
+		animRef.current = anim;
+		const switchTo = (next, nextOnce) => {
+			if (!next) return;
+			const pending = pendingRef.current;
+			if (pending && pending.anim === next && pending.once === nextOnce) return;
+			const gen = ++genRef.current;
+			pendingRef.current = {
+				anim: next,
+				once: nextOnce,
+				gen
 			};
-			const startMoveDrive = (el) => {
-				const pm = pendingMoveRef.current;
-				if (!pm || moveRef.current !== null) return;
-				pendingMoveRef.current = null;
-				const { startRatio, startYRatio, targetRatio, dir, totalRatio, leadSec, tailSec } = pm;
-				const duration = Number.isFinite(el.duration) && el.duration > 0 ? el.duration : 10.09;
-				const travelWindow = Math.max(.1, duration - leadSec - tailSec);
-				const token = ++moveTokenRef.current;
-				const step = () => {
-					if (moveTokenRef.current !== token) return;
-					const t = el.currentTime || 0;
-					const rootEl = rootRef.current;
-					if (rootEl) {
-						const W = window.innerWidth;
-						const H = window.innerHeight;
-						let ratioX;
-						if (t <= leadSec) ratioX = startRatio;
-						else if (t >= duration - tailSec) ratioX = targetRatio;
-						else ratioX = startRatio + dir * totalRatio * ((t - leadSec) / travelWindow);
-						const px = ratioX * W;
-						const py = startYRatio * H;
-						rootEl.style.left = px - halfW + "px";
-						rootEl.style.top = py - halfH + "px";
-						rootEl.style.right = "auto";
-						rootEl.style.bottom = "auto";
-					}
-					if (t < duration - tailSec) moveRef.current = requestAnimationFrame(step);
-					else {
-						moveRef.current = null;
-						setCustomPos({
-							rx: targetRatio,
-							ry: startYRatio
-						});
-					}
-				};
-				moveRef.current = requestAnimationFrame(step);
+			const target = frontRef.current === 0 ? videoBRef : videoARef;
+			const el = target.current;
+			if (!el) return;
+			el.src = "/pet/thumb/" + encodeURIComponent(next) + ".webm";
+			el.loop = !nextOnce;
+			el.muted = true;
+			el.autoplay = true;
+			el.playsInline = true;
+			el.onended = nextOnce ? handleEnded : null;
+			el.load();
+			const onReady = () => {
+				el.removeEventListener("loadeddata", onReady);
+				if (pendingRef.current?.gen !== gen) return;
+				const old = frontRef.current === 0 ? videoARef : videoBRef;
+				el.classList.add("is-front");
+				if (old.current && old.current !== el) old.current.classList.remove("is-front");
+				frontRef.current = frontRef.current === 0 ? 1 : 0;
+				pendingRef.current = null;
+				el.style.transform = facingRef.current === "right" ? "scaleX(-1)" : "";
+				el.play().catch(() => {});
+				if (pendingMoveRef.current) startMoveDrive(el);
 			};
-			const tryMove = () => {
-				if (moveRef.current !== null || pendingMoveRef.current) return true;
-				const actions = ANIM.moves.actions;
-				if (!actions.length) return false;
-				const chosen = actions[Math.floor(Math.random() * actions.length)];
-				const mp = Object.assign({}, ANIM.moves.default, chosen.params || {});
-				const dir = facingRef.current === "right" !== ANIM.turn.includes(animRef.current) ? 1 : -1;
-				const W = window.innerWidth;
-				const cx = currentCenterX();
-				const distance = randomBetween(mp.minDist, mp.maxDist);
-				const target = cx + dir * distance;
-				const leftBound = mp.margin + halfW;
-				const rightBound = W - mp.margin - halfW;
-				if (target < leftBound || target > rightBound) return false;
-				pendingMoveRef.current = {
-					startRatio: cx / W,
-					startYRatio: currentCenterY() / window.innerHeight,
-					targetRatio: target / W,
-					dir,
-					totalRatio: Math.abs(target - cx) / W,
-					leadSec: mp.leadSec,
-					tailSec: mp.tailSec
-				};
+			el.addEventListener("loadeddata", onReady);
+			if (el.readyState >= 2) onReady();
+		};
+		useEffect(() => {
+			switchTo(anim, once);
+		}, [
+			anim,
+			once,
+			seq
+		]);
+		useEffect(() => () => stopMove(), []);
+		useEffect(() => {
+			const onResize = () => setCustomPos((prev) => prev ? { ...prev } : prev);
+			window.addEventListener("resize", onResize);
+			return () => window.removeEventListener("resize", onResize);
+		}, []);
+		const pickNext = () => {
+			const { animations, animationWeights } = config;
+			const roll = Math.random();
+			const k = rollKind(roll, animationWeights);
+			let kind;
+			let next;
+			if (k === "idle") {
+				kind = "IDLE";
+				next = pick(animations.idle, animRef.current);
+				setAnim(next);
+			} else if (k === "turn") {
+				kind = "TURN";
+				next = pick(animations.turn, animRef.current);
+				setAnim(next);
+			} else if (k === "move") if (!tryMove()) {
+				const act = pickCategoryAction(animations.categories, animations.idle, facingRef.current, animRef.current);
+				kind = act.id;
+				next = act.name;
+				setAnim(next);
+			} else {
+				kind = "MOVES";
+				next = "移动(池内随机)";
+			}
+			else {
+				const act = pickCategoryAction(animations.categories, animations.idle, facingRef.current, animRef.current);
+				kind = act.id;
+				next = act.name;
+				setAnim(next);
+			}
+			console.log("[dsh-pet] " + new Date().toTimeString().slice(0, 8) + " pet=" + cfg.id + " facing=" + facingRef.current + " roll=" + roll.toFixed(4) + " -> [" + kind + "] " + next);
+			setOnce(true);
+			setSeq((s) => s + 1);
+		};
+		const handleEnded = () => {
+			const { animations } = config;
+			if (dragRef.current.active) return;
+			if (animations.turn.includes(animRef.current)) {
+				const next = facing === "left" ? "right" : "left";
+				setFacing(next);
+				facingRef.current = next;
+			}
+			if (animations.drag.includes(animRef.current) || animations.clicks.includes(animRef.current)) {
+				if (animations.idle.length) setAnim(pick(animations.idle, animRef.current));
 				setOnce(true);
-				setAnim(chosen.name);
-				return true;
-			};
-			const stopMove = () => {
-				pendingMoveRef.current = null;
-				moveTokenRef.current++;
-				if (moveRef.current !== null) {
-					cancelAnimationFrame(moveRef.current);
-					moveRef.current = null;
-				}
-			};
-			const facingRef = useRef(facing);
-			facingRef.current = facing;
-			const handlePointerDown = (e) => {
-				e.currentTarget.classList.add("dragging");
-				stopMove();
-				e.currentTarget.setPointerCapture(e.pointerId);
-				const rootEl = rootRef.current;
-				let offX = 0;
-				let offY = 0;
-				if (rootEl) {
-					const rr = rootEl.getBoundingClientRect();
-					offX = e.clientX - (rr.left + rr.width / 2);
-					offY = e.clientY - (rr.top + rr.height / 2);
-				}
-				dragRef.current = {
-					active: true,
-					dragging: false,
-					sx: e.clientX,
-					sy: e.clientY,
-					offX,
-					offY
-				};
-			};
-			const handlePointerMove = (e) => {
-				const d = dragRef.current;
-				if (!d.active) return;
-				const dx = e.clientX - d.sx;
-				const dy = e.clientY - d.sy;
-				if (!d.dragging) {
-					if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
-					d.dragging = true;
-					setDragging(true);
-					setOnce(true);
-					if (ANIM.drag.length) setAnim(pick(ANIM.drag));
-				}
+				setSeq((s) => s + 1);
+				return;
+			}
+			pickNext();
+		};
+		const moveRef = useRef(null);
+		const moveTokenRef = useRef(0);
+		const pendingMoveRef = useRef(null);
+		const customPosRef = useRef(customPos);
+		customPosRef.current = customPos;
+		const currentCenterX = () => {
+			const cp = customPosRef.current;
+			if (cp) return cp.rx * window.innerWidth;
+			const rootEl = rootRef.current;
+			if (rootEl) return rootEl.getBoundingClientRect().left + halfW;
+			return window.innerWidth - 24 - halfW;
+		};
+		const currentCenterY = () => {
+			const cp = customPosRef.current;
+			if (cp) return cp.ry * window.innerHeight;
+			const rootEl = rootRef.current;
+			if (rootEl) return rootEl.getBoundingClientRect().top + halfH;
+			return window.innerHeight - 20 - halfH;
+		};
+		const startMoveDrive = (el) => {
+			const pm = pendingMoveRef.current;
+			if (!pm || moveRef.current !== null) return;
+			pendingMoveRef.current = null;
+			const { startRatio, startYRatio, targetRatio, dir, totalRatio, leadSec, tailSec } = pm;
+			const duration = Number.isFinite(el.duration) && el.duration > 0 ? el.duration : 10.09;
+			const travelWindow = Math.max(.1, duration - leadSec - tailSec);
+			const token = ++moveTokenRef.current;
+			const step = () => {
+				if (moveTokenRef.current !== token) return;
+				const t = el.currentTime || 0;
 				const rootEl = rootRef.current;
 				if (rootEl) {
-					rootEl.style.left = e.clientX - d.offX - halfW + "px";
-					rootEl.style.top = e.clientY - d.offY - halfH + "px";
+					const W = window.innerWidth;
+					const H = window.innerHeight;
+					let ratioX;
+					if (t <= leadSec) ratioX = startRatio;
+					else if (t >= duration - tailSec) ratioX = targetRatio;
+					else ratioX = startRatio + dir * totalRatio * ((t - leadSec) / travelWindow);
+					const px = ratioX * W;
+					const py = startYRatio * H;
+					rootEl.style.left = px - halfW + "px";
+					rootEl.style.top = py - halfH + "px";
 					rootEl.style.right = "auto";
 					rootEl.style.bottom = "auto";
 				}
-				const stageEl = stageRef.current;
-				if (stageEl) stageEl.style.transform = "none";
-			};
-			const handlePointerUp = (e) => {
-				const d = dragRef.current;
-				const wasDragging = d.dragging;
-				d.active = false;
-				d.dragging = false;
-				e.currentTarget.classList.remove("dragging");
-				if (wasDragging) {
-					justDraggedRef.current = true;
-					setTimeout(() => {
-						justDraggedRef.current = false;
-					}, 100);
-					setDragging(false);
+				if (t < duration - tailSec) moveRef.current = requestAnimationFrame(step);
+				else {
+					moveRef.current = null;
 					setCustomPos({
-						rx: (e.clientX - d.offX) / window.innerWidth,
-						ry: (e.clientY - d.offY) / window.innerHeight
+						rx: targetRatio,
+						ry: startYRatio
 					});
-					const stageEl = stageRef.current;
-					if (stageEl) stageEl.style.transform = "translateY(" + bottomPad + "px)";
-					if (ANIM.idle.length) setAnim(pick(ANIM.idle, animRef.current));
-					setOnce(false);
 				}
 			};
-			const handleClick = (_e) => {
-				const d = dragRef.current;
-				if (d.active || d.dragging || justDraggedRef.current) return;
-				if (once && !ANIM.idle.includes(animRef.current)) return;
-				stopMove();
-				setOnce(true);
-				if (ANIM.clicks.length) setAnim(pick(ANIM.clicks));
+			moveRef.current = requestAnimationFrame(step);
+		};
+		const tryMove = () => {
+			if (moveRef.current !== null || pendingMoveRef.current) return true;
+			const moves = config.animations.moves;
+			const actions = moves.actions;
+			if (!actions.length) return false;
+			const chosen = actions[Math.floor(Math.random() * actions.length)];
+			const mp = Object.assign({}, moves.default, chosen.params || {});
+			const dir = facingRef.current === "right" !== config.animations.turn.includes(animRef.current) ? 1 : -1;
+			const W = window.innerWidth;
+			const plan = planMove({
+				cx: currentCenterX(),
+				cy: currentCenterY(),
+				W,
+				H: window.innerHeight,
+				dir,
+				minDist: mp.minDist,
+				maxDist: mp.maxDist,
+				margin: mp.margin,
+				halfW
+			});
+			if (!plan) return false;
+			pendingMoveRef.current = {
+				...plan,
+				dir,
+				leadSec: mp.leadSec,
+				tailSec: mp.tailSec
 			};
-			const bottomPad = size * (9 / 16) * (CANVAS_H - FEET_Y) / CANVAS_H;
-			const stageStyle = dragging ? { transform: "none" } : { transform: "translateY(" + bottomPad + "px)" };
-			const rootStyle = customPos ? (() => {
-				const rx = customPos.rx;
-				const ry = customPos.ry;
-				const left = Math.min(Math.max(rx * window.innerWidth - halfW, 0), window.innerWidth - size);
-				const top = Math.min(Math.max(ry * window.innerHeight - halfH, 0), window.innerHeight - size * 9 / 16);
-				return {
-					left: left + "px",
-					top: top + "px",
-					right: "auto",
-					bottom: "auto"
-				};
-			})() : {};
-			const commonVideoProps = {
-				muted: true,
-				playsInline: true,
-				autoPlay: true,
-				title: "dsh-pet"
+			setOnce(true);
+			setAnim(chosen.name);
+			return true;
+		};
+		const stopMove = () => {
+			pendingMoveRef.current = null;
+			moveTokenRef.current++;
+			if (moveRef.current !== null) {
+				cancelAnimationFrame(moveRef.current);
+				moveRef.current = null;
+			}
+		};
+		const facingRef = useRef(facing);
+		facingRef.current = facing;
+		const handlePointerDown = (e) => {
+			e.currentTarget.classList.add("dragging");
+			stopMove();
+			e.currentTarget.setPointerCapture(e.pointerId);
+			const rootEl = rootRef.current;
+			let offX = 0;
+			let offY = 0;
+			if (rootEl) {
+				const rr = rootEl.getBoundingClientRect();
+				offX = e.clientX - (rr.left + rr.width / 2);
+				offY = e.clientY - (rr.top + rr.height / 2);
+			}
+			dragRef.current = {
+				active: true,
+				dragging: false,
+				sx: e.clientX,
+				sy: e.clientY,
+				offX,
+				offY
 			};
-			const hitProps = {
-				className: "dsh-pet-hit",
-				style: {
-					left: HIT_BOX.x0 / 640 * 100 + "%",
-					top: HIT_BOX.y0 / 360 * 100 + "%",
-					width: (HIT_BOX.x1 - HIT_BOX.x0) / 640 * 100 + "%",
-					height: (HIT_BOX.y1 - HIT_BOX.y0) / 360 * 100 + "%"
-				},
-				onMouseEnter: (e) => {
-					if (!dragRef.current.active) e.currentTarget.style.cursor = "grab";
-				},
-				onMouseLeave: (e) => {
-					if (!dragRef.current.active) e.currentTarget.style.cursor = "default";
-				},
-				onClick: handleClick,
-				onPointerDown: handlePointerDown,
-				onPointerMove: handlePointerMove,
-				onPointerUp: handlePointerUp,
-				onPointerCancel: handlePointerUp,
-				title: "dsh-pet"
+		};
+		const handlePointerMove = (e) => {
+			const d = dragRef.current;
+			if (!d.active) return;
+			const dx = e.clientX - d.sx;
+			const dy = e.clientY - d.sy;
+			if (!d.dragging) {
+				if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+				d.dragging = true;
+				setDragging(true);
+				setOnce(true);
+				if (config.animations.drag.length) setAnim(pick(config.animations.drag));
+			}
+			const rootEl = rootRef.current;
+			if (rootEl) {
+				rootEl.style.left = e.clientX - d.offX - halfW + "px";
+				rootEl.style.top = e.clientY - d.offY - halfH + "px";
+				rootEl.style.right = "auto";
+				rootEl.style.bottom = "auto";
+			}
+			const stageEl = stageRef.current;
+			if (stageEl) stageEl.style.transform = "none";
+		};
+		const handlePointerUp = (e) => {
+			const d = dragRef.current;
+			const wasDragging = d.dragging;
+			d.active = false;
+			d.dragging = false;
+			e.currentTarget.classList.remove("dragging");
+			if (wasDragging) {
+				justDraggedRef.current = true;
+				setTimeout(() => {
+					justDraggedRef.current = false;
+				}, 100);
+				setDragging(false);
+				setCustomPos({
+					rx: (e.clientX - d.offX) / window.innerWidth,
+					ry: (e.clientY - d.offY) / window.innerHeight
+				});
+				const stageEl = stageRef.current;
+				if (stageEl) stageEl.style.transform = "translateY(" + bottomPad + "px)";
+				if (config.animations.idle.length) setAnim(pick(config.animations.idle, animRef.current));
+				setOnce(false);
+			}
+		};
+		const handleClick = () => {
+			const d = dragRef.current;
+			if (d.active || d.dragging || justDraggedRef.current) return;
+			if (once && !config.animations.idle.includes(animRef.current)) return;
+			stopMove();
+			setOnce(true);
+			if (config.animations.clicks.length) setAnim(pick(config.animations.clicks));
+		};
+		const bottomPad = size * (9 / 16) * (CANVAS_H - FEET_Y) / CANVAS_H;
+		const stageStyle = dragging ? { transform: "none" } : { transform: "translateY(" + bottomPad + "px)" };
+		const rootStyle = customPos ? (() => {
+			const rx = customPos.rx;
+			const ry = customPos.ry;
+			const left = Math.min(Math.max(rx * window.innerWidth - halfW, 0), window.innerWidth - size);
+			const top = Math.min(Math.max(ry * window.innerHeight - halfH, 0), window.innerHeight - size * 9 / 16);
+			return {
+				left: left + "px",
+				top: top + "px",
+				right: "auto",
+				bottom: "auto"
 			};
-			return h("div", {
-				ref: rootRef,
-				className: "dsh-pet-root",
-				"data-corner": corner,
-				"data-facing": facing,
-				style: Object.assign({
-					"--dsh-pet-size": size + "px",
-					"--dsh-pet-mx": margin.x + "px",
-					"--dsh-pet-my": margin.y + "px"
-				}, rootStyle),
-				children: h("div", {
-					ref: stageRef,
-					className: "dsh-pet-stage",
-					style: stageStyle,
-					children: [
-						h("video", Object.assign({}, commonVideoProps, {
-							ref: videoARef,
-							className: "dsh-pet-video is-front"
-						})),
-						h("video", Object.assign({}, commonVideoProps, {
-							ref: videoBRef,
-							className: "dsh-pet-video"
-						})),
-						h("div", hitProps)
-					]
-				})
-			});
-		}
+		})() : {};
+		const commonVideoProps = {
+			muted: true,
+			playsInline: true,
+			autoPlay: true,
+			title: "dsh-pet"
+		};
+		const hitProps = {
+			className: "dsh-pet-hit",
+			style: {
+				left: HIT_BOX.x0 / 640 * 100 + "%",
+				top: HIT_BOX.y0 / 360 * 100 + "%",
+				width: (HIT_BOX.x1 - HIT_BOX.x0) / 640 * 100 + "%",
+				height: (HIT_BOX.y1 - HIT_BOX.y0) / 360 * 100 + "%"
+			},
+			onMouseEnter: (e) => {
+				if (!dragRef.current.active) e.currentTarget.style.cursor = "grab";
+			},
+			onMouseLeave: (e) => {
+				if (!dragRef.current.active) e.currentTarget.style.cursor = "default";
+			},
+			onClick: handleClick,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onPointerCancel: handlePointerUp,
+			title: "dsh-pet"
+		};
+		return h("div", {
+			ref: rootRef,
+			className: "dsh-pet-root",
+			"data-corner": corner,
+			"data-facing": facing,
+			style: Object.assign({
+				"--dsh-pet-size": size + "px",
+				"--dsh-pet-mx": margin.x + "px",
+				"--dsh-pet-my": margin.y + "px"
+			}, rootStyle),
+			children: h("div", {
+				ref: stageRef,
+				className: "dsh-pet-stage",
+				style: stageStyle,
+				children: [
+					h("video", Object.assign({}, commonVideoProps, {
+						ref: videoARef,
+						className: "dsh-pet-video is-front"
+					})),
+					h("video", Object.assign({}, commonVideoProps, {
+						ref: videoBRef,
+						className: "dsh-pet-video"
+					})),
+					h("div", hitProps)
+				]
+			})
+		});
+	}
+	/** 多开容器：拉取配置 → 合并默认+用户层 pets → 渲染多个 PetCard */
+	function PetMulti() {
+		const [pets, setPets] = useState([]);
+		const [ready, setReady] = useState(false);
+		useEffect(() => {
+			let alive = true;
+			(async () => {
+				try {
+					const r1 = await fetch("/pet/config.jsonc");
+					if (!r1.ok) throw new Error("config.jsonc HTTP " + r1.status);
+					config = assertClientConfig(JSON.parse(stripJsonc(await r1.text())));
+					const defaults = config.pets;
+					let user = {};
+					try {
+						const r2 = await fetch("/pet/config");
+						if (r2.ok && r2.status !== 204) user = await r2.json().catch(() => ({}));
+					} catch {}
+					config = applyUserOverrides(config, user);
+					const merged = config.pets;
+					if (!alive) return;
+					petBridge.current = merged;
+					petBridge.template = defaults.length ? defaults[0] : void 0;
+					petBridge.sync = (list) => {
+						setPets(list);
+						petBridge.current = list;
+					};
+					setPets(merged);
+					setReady(true);
+				} catch (e) {
+					console.error("[dsh-pet] 配置加载失败", e);
+				}
+			})();
+			return () => {
+				alive = false;
+				petBridge.sync = () => {};
+			};
+		}, []);
+		return ready ? pets.map((p) => h(PetCard, {
+			key: p.id,
+			cfg: p
+		})) : null;
+	}
+	return PetMulti;
+}
+
+//#endregion
+//#region src/client/app.ts
+function makeFactory() {
+	return (require) => {
+		const module = { exports: {} };
+		const react = require("react");
+		const { useEffect, useRef, useState } = react;
+		const { jsx: h } = require("react/jsx-runtime");
+		const PetMulti = makePetUI({
+			h,
+			useState,
+			useEffect,
+			useRef
+		});
 		const name = "pet";
-		const inject = ["slots"];
-		function apply(ctx, _config) {
+		const inject = ["slots", "locale"];
+		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-pet: dictionaries");
+			const t = ctx.locale.bind(NS);
 			ctx.slots.inject("shell.overlay", function* () {
 				yield ctx.slots.register({
 					name: "shell.overlay",
 					id: "pet",
 					order: 1e3
-				}, () => h(Pet, {}));
+				}, () => h(PetMulti, {}));
+			});
+			const PetConfigSection = makePetConfigSection({
+				h,
+				useState,
+				useEffect,
+				t
+			});
+			ctx.slots.inject("settings.section", function* () {
+				yield ctx.slots.register({
+					name: "settings.section",
+					id: "pet-config",
+					order: 30,
+					label: () => t("nav"),
+					inject: () => ({ t })
+				}, PetConfigSection);
 			});
 		}
 		module.exports = {