@linxin666/dsh-pet 0.1.15 → 0.1.16

package/lib/client.js

@@ -22,6 +22,7 @@ window.__ModuleLoader__.load({
 			return (0, _deepseek_ai_dsh_client_runtime_client.defineStore)({
 				init: () => ({
 					snapshot: null,
+					pets: [],
 					state: "loading",
 					error: null,
 					feedback: null
@@ -32,6 +33,9 @@ window.__ModuleLoader__.load({
 						draft.state = "ready";
 						draft.error = null;
 					},
+					setPets: (draft, pets) => {
+						draft.pets = pets;
+					},
 					setState: (draft, state, error) => {
 						draft.state = state;
 						draft.error = error;
@@ -42,194 +46,24 @@ window.__ModuleLoader__.load({
 				}
 			});
 		}
-		/**
-		* Track definitions for the whale-girl. Durations are tuned for a soft,
-		* slow-healing feel (roughly 2.5× the earlier fast draft — the pet should
-		* breathe, not race); calibrate frame counts against the hatch-pet run when
-		* the asset lands (rows may carry 4–8 frames).
-		*/
-		const TRACKS = {
-			idle: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5
-				],
-				durations: [
-					400,
-					400,
-					500,
-					400,
-					400,
-					500
-				],
-				loop: true
-			},
-			"running-right": {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5,
-					6,
-					7
-				],
-				durations: [
-					225,
-					225,
-					225,
-					225,
-					225,
-					225,
-					225,
-					225
-				],
-				loop: true
-			},
-			"running-left": {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5,
-					6,
-					7
-				],
-				durations: [
-					225,
-					225,
-					225,
-					225,
-					225,
-					225,
-					225,
-					225
-				],
-				loop: true
-			},
-			waving: {
-				frames: [
-					0,
-					1,
-					2,
-					3
-				],
-				durations: [
-					350,
-					350,
-					350,
-					350
-				],
-				loop: true
-			},
-			jumping: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4
-				],
-				durations: [
-					300,
-					300,
-					300,
-					350,
-					350
-				],
-				loop: false,
-				fallback: "idle"
-			},
-			failed: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5,
-					6,
-					7
-				],
-				durations: [
-					450,
-					450,
-					450,
-					500,
-					550,
-					600,
-					450,
-					450
-				],
-				loop: false,
-				fallback: "idle"
-			},
-			waiting: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5
-				],
-				durations: [
-					450,
-					450,
-					500,
-					450,
-					450,
-					500
-				],
-				loop: true
-			},
-			running: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5
-				],
-				durations: [
-					250,
-					250,
-					250,
-					250,
-					250,
-					250
-				],
-				loop: true
-			},
-			review: {
-				frames: [
-					0,
-					1,
-					2,
-					3,
-					4,
-					5
-				],
-				durations: [
-					550,
-					550,
-					550,
-					550,
-					550,
-					550
-				],
-				loop: true
-			}
-		};
-		/** Row index of one animation track (mirrors state.ts rowOf). */
+		//#endregion
+		//#region ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+		function r(e) {
+			var t, f, n = "";
+			if ("string" == typeof e || "number" == typeof e) n += e;
+			else if ("object" == typeof e) if (Array.isArray(e)) {
+				var o = e.length;
+				for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+			} else for (f in e) e[f] && (n && (n += " "), n += f);
+			return n;
+		}
+		function clsx() {
+			for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+			return n;
+		}
+		//#endregion
+		//#region src/client/spritesheet.ts
+		/** Row index of one animation track (the fixed 9-row contract). */
 		function rowOfTrack(animation) {
 			return {
 				idle: 0,
@@ -250,52 +84,20 @@ window.__ModuleLoader__.load({
 		* atlas coordinates here would drift each frame by the scale factor and
 		* render torn/overlapping frames.
 		*/
-		function framePosition(row, col, scale = 1) {
+		function framePosition(cell, columns, row, col, scale = 1) {
 			return {
-				x: -col * 192 * scale,
-				y: -row * 208 * scale
+				x: -col * cell.width * scale,
+				y: -row * cell.height * scale
 			};
 		}
 		/**
-		* Detect how many frames each row actually carries by scanning the decoded
-		* atlas for non-transparent cells (hatch-pet rows may hold 4–8 frames; the
-		* unused trailing cells are fully transparent). Rows whose every sample is
-		* transparent report 0.
-		* @param image - the fully decoded spritesheet (natural size 1536×1872).
-		* @returns per-row frame counts, length 9.
-		*/
-		function detectFrameCounts(image) {
-			const canvas = document.createElement("canvas");
-			canvas.width = image.naturalWidth;
-			canvas.height = image.naturalHeight;
-			const ctx = canvas.getContext("2d");
-			if (ctx === null) return Array.from({ length: 9 }, () => 8);
-			ctx.drawImage(image, 0, 0);
-			const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
-			const counts = [];
-			const stride = 1536;
-			const probeStep = 8;
-			const margin = 12;
-			for (let row = 0; row < 9; row++) {
-				let count = 0;
-				for (let col = 0; col < 8; col++) {
-					let hasContent = false;
-					const x0 = col * 192;
-					const y0 = row * 208;
-					for (let y = y0 + margin; y < y0 + 208 - margin && !hasContent; y += probeStep) for (let x = x0 + margin; x < x0 + 192 - margin && !hasContent; x += probeStep) if ((data[(y * stride + x) * 4 + 3] ?? 0) > 8) hasContent = true;
-					if (hasContent) count += 1;
-				}
-				counts.push(count);
-			}
-			return counts;
-		}
-		/**
-		* Trim a track to the actual frame count of its row. A row with 0 detected
-		* frames degrades to the first frame (the atlas is still loading or corrupt)
-		* so the pet never renders blank.
+		* Trim a track to the actual frame count of its row (the manifest's per-row
+		* counts are authoritative; this is a last-line guard against a definition
+		* whose row count disagrees with its track table). A row with 0 detected
+		* frames degrades to the first frame so the pet never renders blank.
 		*/
 		function trimTrack(track, frameCount) {
-			const n = Math.max(1, Math.min(frameCount, track.frames.length));
+			const n = Math.max(1, Math.min(frameCount, track.frames.length, track.durations.length));
 			return {
 				frames: track.frames.slice(0, n),
 				durations: track.durations.slice(0, n),
@@ -332,35 +134,32 @@ window.__ModuleLoader__.load({
 			"summon": "kz2Bea_summon"
 		};
 		//#endregion
-		//#region src/client/WhalePet.tsx
+		//#region src/client/PetSprite.tsx
 		/**
-		* Whale-girl companion component — the browser half's centerpiece. Renders a
+		* Pet sprite companion component — the browser half's centerpiece. Renders a
 		* fixed-position floating sprite (React portal onto document.body), plays
-		* the spritesheet track matching the host animation snapshot, and exposes
-		* the interaction surface: click to pet, hover panel with feed/hide, drag to
-		* reposition (persisted via setConfig).
-		* @module @linxin666/dsh-pet/client/WhalePet
+		* the track matching the host animation snapshot, and exposes the
+		* interaction surface: click to pet, hover panel with feed/rename/hide, drag
+		* to reposition (persisted via setConfig). Everything visual comes from the
+		* pet definition the host serves ('/api/pet/pets' + the state snapshot's
+		* pet id), so one component renders every registry entry.
+		* @module @linxin666/dsh-pet/client/PetSprite
 		*/
-		/** Browser URL of the whale-girl atlas (served by the host half's own route). */
-		const PET_SPRITESHEET_URL = "/pet/whale/spritesheet.webp";
-		/** Browser URL of the whale-girl manifest (authoritative per-row frame counts). */
-		const PET_MANIFEST_URL = "/pet/whale/pet.json";
 		/** Clamp a drag offset inside the viewport with a margin. */
 		function clampOffset(value, max) {
 			return Math.max(0, Math.min(max, value));
 		}
 		/**
 		* The floating pet. The spritesheet frame advances on requestAnimationFrame
-		* with per-frame durations from TRACKS; the atlas image is loaded once and
-		* the background position is written straight to the sprite element (no
-		* per-frame React state).
+		* with per-frame durations from the definition's tracks; the atlas image is
+		* loaded once and the background position is written straight to the sprite
+		* element (no per-frame React state).
 		*/
-		function WhalePet(props) {
-			const { snapshot, display, feedback } = props;
+		function PetSprite(props) {
+			const { snapshot, definition, display, feedback } = props;
 			const spriteRef = (0, react.useRef)(null);
 			const floatRef = (0, react.useRef)(null);
 			const [imageReady, setImageReady] = (0, react.useState)(false);
-			const [frameCounts, setFrameCounts] = (0, react.useState)(null);
 			const [hovered, setHovered] = (0, react.useState)(false);
 			const [renaming, setRenaming] = (0, react.useState)(false);
 			const [nameDraft, setNameDraft] = (0, react.useState)("");
@@ -372,37 +171,32 @@ window.__ModuleLoader__.load({
 				index: 0,
 				elapsed: 0
 			});
+			const cell = definition.cell;
+			const columns = definition.columns;
+			const rows = definition.rows;
+			const tracks = definition.tracks;
 			(0, react.useEffect)(() => {
 				let cancelled = false;
 				const img = new Image();
 				img.onload = () => {
-					if (cancelled) return;
-					setImageReady(true);
-					fetch(PET_MANIFEST_URL).then((res) => res.ok ? res.json() : Promise.resolve({})).then((manifest) => {
-						if (cancelled) return;
-						const frames = manifest.frames;
-						if (Array.isArray(frames) && frames.length === 9 && frames.every((n) => typeof n === "number")) setFrameCounts(frames);
-						else setFrameCounts(detectFrameCounts(img));
-					}).catch(() => {
-						if (!cancelled) setFrameCounts(detectFrameCounts(img));
-					});
+					if (!cancelled) setImageReady(true);
 				};
-				img.src = PET_SPRITESHEET_URL;
+				img.src = definition.atlasUrl;
 				return () => {
 					cancelled = true;
 					img.onload = null;
 				};
-			}, []);
-			const spriteScale = display.size / 208;
+			}, [definition.atlasUrl]);
+			const spriteScale = display.size / cell.height;
 			const animation = snapshot?.animation ?? "idle";
 			const scaleRef = (0, react.useRef)(spriteScale);
 			scaleRef.current = spriteScale;
 			(0, react.useEffect)(() => {
 				const reduceMotion = typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
 				const row = rowOfTrack(animation);
-				const leadCol = (frameCounts === null ? TRACKS[animation] : trimTrack(TRACKS[animation], frameCounts[row] ?? TRACKS[animation].frames.length)).frames[0];
-				const lead = framePosition(row, leadCol, scaleRef.current);
-				if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = `${lead.x}px ${lead.y}px`;
+				const leadCol = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length).frames[0];
+				const lead = framePosition(cell, columns, row, leadCol, scaleRef.current);
+				if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = lead.x + "px " + lead.y + "px";
 				if (reduceMotion) return;
 				let raf = 0;
 				let last = performance.now();
@@ -410,7 +204,7 @@ window.__ModuleLoader__.load({
 					const delta = ts - last;
 					last = ts;
 					const row = rowOfTrack(animation);
-					const track = frameCounts === null ? TRACKS[animation] : trimTrack(TRACKS[animation], frameCounts[row] ?? TRACKS[animation].frames.length);
+					const track = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length);
 					const st = frameRef.current;
 					if (st.track !== animation) {
 						st.track = animation;
@@ -428,13 +222,19 @@ window.__ModuleLoader__.load({
 						st.index = 0;
 					} else st.index = maxIndex;
 					const col = track.frames[st.index];
-					const { x, y } = framePosition(row, col, scaleRef.current);
-					if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = `${x}px ${y}px`;
+					const pos = framePosition(cell, columns, row, col, scaleRef.current);
+					if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = pos.x + "px " + pos.y + "px";
 					raf = requestAnimationFrame(tick);
 				};
 				raf = requestAnimationFrame(tick);
 				return () => cancelAnimationFrame(raf);
-			}, [animation, frameCounts]);
+			}, [
+				animation,
+				cell,
+				columns,
+				rows,
+				tracks
+			]);
 			const feedbackDoneRef = (0, react.useRef)(props.onFeedbackDone);
 			feedbackDoneRef.current = props.onFeedbackDone;
 			(0, react.useEffect)(() => {
@@ -486,9 +286,10 @@ window.__ModuleLoader__.load({
 				right: display.right,
 				bottom: display.bottom
 			};
-			const spriteWidth = Math.round(192 * spriteScale);
-			const spriteHeight = Math.round(208 * spriteScale);
+			const spriteWidth = Math.round(cell.width * spriteScale);
+			const spriteHeight = Math.round(cell.height * spriteScale);
 			const statusBubble = feedback === null && !hovered ? snapshot?.bubble : void 0;
+			const displayName = snapshot?.name ?? definition.displayName;
 			return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: floatRef,
 				className: pet_module_css_default.float,
@@ -514,8 +315,8 @@ window.__ModuleLoader__.load({
 						style: {
 							width: spriteWidth,
 							height: spriteHeight,
-							backgroundImage: imageReady ? `url(${PET_SPRITESHEET_URL})` : void 0,
-							backgroundSize: `${1536 * spriteScale}px ${1872 * spriteScale}px`,
+							backgroundImage: imageReady ? "url(" + definition.atlasUrl + ")" : void 0,
+							backgroundSize: cell.width * columns * spriteScale + "px " + cell.height * rows.length * spriteScale + "px",
 							backgroundRepeat: "no-repeat",
 							backgroundPosition: "0 0",
 							cursor: dragRef.current === null ? "grab" : "grabbing"
@@ -528,14 +329,14 @@ window.__ModuleLoader__.load({
 							props.onPet();
 						},
 						role: "button",
-						"aria-label": "whale girl"
+						"aria-label": definition.displayName
 					}),
 					feedback !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `${pet_module_css_default.bubble} ${feedback.kind === "feed" ? pet_module_css_default.bubbleFeed : pet_module_css_default.bubblePet}`,
+						className: clsx(pet_module_css_default.bubble, feedback.kind === "feed" ? pet_module_css_default.bubbleFeed : pet_module_css_default.bubblePet),
 						children: feedback.text
 					}, feedback.at),
 					statusBubble !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: `${pet_module_css_default.bubble} ${pet_module_css_default.bubbleStatus}`,
+						className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus),
 						role: "status",
 						"aria-live": "polite",
 						children: statusBubble
@@ -581,7 +382,7 @@ window.__ModuleLoader__.load({
 								className: pet_module_css_default.rankRow,
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: pet_module_css_default.nameCell,
-									children: snapshot?.name ?? "鲸鱼娘"
+									children: displayName
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" }) })]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -601,7 +402,7 @@ window.__ModuleLoader__.load({
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: () => {
-											setNameDraft(snapshot?.name ?? "");
+											setNameDraft(displayName);
 											setRenaming(true);
 										},
 										children: props.t("pet.rename")
@@ -623,12 +424,14 @@ window.__ModuleLoader__.load({
 		//#region src/client/PetDockEntry.tsx
 		/**
 		* Global floating pet entry. The pet is host-global (its state, display and
-		* interactions live on `/api/pet/*` endpoints with no session dimension), so
+		* interactions live on '/api/pet/*' endpoints with no session dimension), so
 		* it must not ride a session-scoped slot — on the new-conversation screen no
 		* session exists to scope a slot by, and the pet would vanish (issue #48).
-		* The client half therefore mounts this entry straight onto `document.body`
-		* (see index.ts): while visible it renders the floating WhalePet (a portal),
-		* while hidden it renders a fixed-position summon button.
+		* The client half therefore mounts this entry straight onto 'document.body'
+		* (see index.ts): while visible it renders the floating PetSprite (a
+		* portal), while hidden it renders a fixed-position summon button. Which
+		* sprite renders is decided by the host snapshot's pet id resolved against
+		* the registry list — no per-pet component exists.
 		* @module @linxin666/dsh-pet/client/PetDockEntry
 		*/
 		const DEFAULT_DISPLAY = {
@@ -638,7 +441,7 @@ window.__ModuleLoader__.load({
 			bottom: 20
 		};
 		/**
-		* Dock entry: while the pet is visible, mount the floating WhalePet (it
+		* Dock entry: while the pet is visible, mount the floating PetSprite (it
 		* portals itself onto document.body); while hidden, render the summon
 		* button so the pet can always come back. The store is the plugin-owned
 		* single instance — the slot system provides none because the pet is
@@ -649,6 +452,7 @@ window.__ModuleLoader__.load({
 			const ui = (0, react.useSyncExternalStore)(store.subscribe, store.getSnapshot);
 			const snapshot = ui.snapshot;
 			const feedback = ui.feedback;
+			const definition = ui.pets.find((entry) => entry.id === snapshot?.pet.id) ?? null;
 			const visible = snapshot?.display.visible ?? true;
 			(0, react.useEffect)(() => {
 				ensure();
@@ -656,9 +460,10 @@ window.__ModuleLoader__.load({
 			if (visible) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				"data-pet-dock": true,
 				"data-testid": "pet-dock",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WhalePet, {
+				children: snapshot === null || definition === null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PetSprite, {
 					snapshot,
-					display: snapshot?.display ?? DEFAULT_DISPLAY,
+					definition,
+					display: snapshot.display,
 					feedback,
 					onPet: props.pet,
 					onFeed: props.feed,
@@ -681,12 +486,12 @@ window.__ModuleLoader__.load({
 				},
 				onClick: props.summon,
 				"data-testid": "pet-summon",
-				children: props.t("pet.summon", { name: snapshot?.name ?? "鲸鱼娘" })
+				children: props.t("pet.summon", { name: snapshot?.name ?? "" })
 			});
 		}
 		//#endregion
 		//#region \0dsh-css:packages/dsh-pet/src/client/settings-card.module.css.mjs
-		const css = ".kKk9aW_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}.kKk9aW_card:hover{border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}.kKk9aW_header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}.kKk9aW_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.kKk9aW_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}.kKk9aW_description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}.kKk9aW_pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.kKk9aW_chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.kKk9aW_chevronOpen{transform:rotate(180deg)}.kKk9aW_body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}.kKk9aW_readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}.kKk9aW_notExposed{color:var(--dsw-alias-state-warn-primary);margin:12px 0 0;font-size:12px;line-height:1.5}.kKk9aW_footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex}.kKk9aW_failed{min-width:0;color:var(--dsw-alias-label-error);flex:1;margin:0;font-size:12px;line-height:1.5}.kKk9aW_discard,.kKk9aW_save{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}.kKk9aW_discard{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}.kKk9aW_discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}.kKk9aW_discard:disabled,.kKk9aW_save:disabled{opacity:.4;cursor:default}.kKk9aW_discard:focus-visible,.kKk9aW_save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}.kKk9aW_field{flex-direction:column;gap:6px;padding:12px 0;display:flex}.kKk9aW_field+.kKk9aW_field{border-top:1px solid var(--dsw-alias-border-l2)}.kKk9aW_head{align-items:center;gap:8px;display:flex}.kKk9aW_label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}.kKk9aW_badges{align-items:center;gap:8px;display:inline-flex}.kKk9aW_badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.kKk9aW_reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}.kKk9aW_reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}.kKk9aW_reset:disabled{cursor:default}.kKk9aW_reset:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.kKk9aW_input,.kKk9aW_select{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.kKk9aW_input:focus-visible,.kKk9aW_select:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.kKk9aW_input:disabled,.kKk9aW_select:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}.kKk9aW_inputInvalid{border:1px solid var(--dsw-alias-label-error);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.kKk9aW_inputInvalid:focus-visible{outline:2px solid var(--dsw-alias-label-error);outline-offset:1px;border-color:var(--dsw-alias-label-error)}.kKk9aW_invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}.kKk9aW_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){.kKk9aW_card,.kKk9aW_header,.kKk9aW_chevron,.kKk9aW_chevronOpen,.kKk9aW_discard,.kKk9aW_save{transition:none}}";
+		const css = ".kKk9aW_card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}.kKk9aW_card:hover{border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_cardOpen{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}.kKk9aW_header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}.kKk9aW_headText{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}.kKk9aW_name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}.kKk9aW_description{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}.kKk9aW_pending{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;flex:none;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.kKk9aW_chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.kKk9aW_chevronOpen{transform:rotate(180deg)}.kKk9aW_body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:8px}.kKk9aW_readOnly{color:var(--dsw-alias-label-tertiary);margin:12px 0 0;font-size:12px;line-height:1.5}.kKk9aW_notExposed{color:var(--dsw-alias-state-warn-primary);margin:12px 0 0;font-size:12px;line-height:1.5}.kKk9aW_footer{border-top:1px solid var(--dsw-alias-border-l2);justify-content:flex-end;align-items:center;gap:8px;padding:12px 0 4px;display:flex}.kKk9aW_failed{min-width:0;color:var(--dsw-alias-label-error);text-overflow:ellipsis;white-space:nowrap;flex:1;margin:0;font-size:12px;line-height:1.5;overflow:hidden}.kKk9aW_discard,.kKk9aW_save{appearance:none;font:inherit;cursor:pointer;border:1px solid #0000;border-radius:8px;padding:5px 14px;font-size:13px;line-height:1.5}.kKk9aW_discard{border-color:var(--dsw-alias-border-l2);color:var(--dsw-alias-label-secondary);background:0 0}.kKk9aW_discard:hover:not(:disabled){color:var(--dsw-alias-label-primary);border-color:var(--dsw-alias-label-dimmed)}.kKk9aW_save{background:var(--dsw-alias-label-primary);color:var(--dsw-alias-bg-layer-3)}.kKk9aW_discard:disabled,.kKk9aW_save:disabled{opacity:.4;cursor:default}.kKk9aW_discard:focus-visible,.kKk9aW_save:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:1px}.kKk9aW_field{flex-direction:column;gap:6px;padding:12px 0;display:flex}.kKk9aW_field+.kKk9aW_field{border-top:1px solid var(--dsw-alias-border-l2)}.kKk9aW_head{align-items:center;gap:8px;display:flex}.kKk9aW_label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}.kKk9aW_badges{align-items:center;gap:8px;display:inline-flex}.kKk9aW_badge{white-space:nowrap;background:var(--dsw-alias-bg-module-platform);color:var(--dsw-alias-label-secondary);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:500;line-height:17px}.kKk9aW_reset{font:inherit;color:var(--dsw-alias-label-secondary);cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;line-height:1.5}.kKk9aW_reset:hover:not(:disabled){color:var(--dsw-alias-label-primary)}.kKk9aW_reset:disabled{cursor:default}.kKk9aW_reset:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px;outline:2px solid var(--dsw-alias-brand-primary);outline-offset:2px}.kKk9aW_input,.kKk9aW_select{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.kKk9aW_input:focus-visible,.kKk9aW_select:focus-visible{border-color:var(--dsw-alias-brand-primary);outline:none}.kKk9aW_input:disabled,.kKk9aW_select:disabled{color:var(--dsw-alias-label-tertiary);cursor:default}.kKk9aW_inputInvalid{border:1px solid var(--dsw-alias-label-error);background:var(--dsw-alias-bg-layer-3);height:34px;font:inherit;color:var(--dsw-alias-label-primary);border-radius:8px;padding:0 12px;font-size:13px;line-height:1.5}.kKk9aW_inputInvalid:focus-visible{outline:2px solid var(--dsw-alias-label-error);outline-offset:1px;border-color:var(--dsw-alias-label-error)}.kKk9aW_invalid{color:var(--dsw-alias-label-error);margin:0;font-size:12px;line-height:1.5}.kKk9aW_hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}@media (prefers-reduced-motion:reduce){.kKk9aW_card,.kKk9aW_header,.kKk9aW_chevron,.kKk9aW_chevronOpen,.kKk9aW_discard,.kKk9aW_save{transition:none}}";
 		const tagId = "@linxin666/dsh-pet/settings-card.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId) + "]") === null) {
 			const tag = document.createElement("style");
@@ -842,10 +647,10 @@ window.__ModuleLoader__.load({
 						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: settings_card_module_css_default.footer,
 							children: [
-								state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
 									className: settings_card_module_css_default.failed,
 									role: "status",
-									children: props.t("settings.saveFailed")
+									children: [props.t("settings.saveFailed"), state.failedReason ? " - " + state.failedReason : ""]
 								}) : null,
 								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 									type: "button",
@@ -967,6 +772,54 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		/** A staged enumerated field rendered as a select. */
+		function ChoiceField(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: settings_card_module_css_default.field,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: settings_card_module_css_default.head,
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+							className: settings_card_module_css_default.label,
+							htmlFor: props.id,
+							children: props.label
+						}), props.overridden ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+							className: settings_card_module_css_default.badges,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: settings_card_module_css_default.badge,
+								children: props.overriddenLabel
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: settings_card_module_css_default.reset,
+								disabled: props.disabled,
+								onClick: props.onReset,
+								children: props.resetLabel
+							})]
+						}) : null]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+						id: props.id,
+						className: settings_card_module_css_default.select,
+						value: props.text,
+						disabled: props.disabled,
+						onChange: (event) => {
+							props.onEdit(event.target.value);
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: "",
+							children: props.inheritLabel
+						}), props.choices.map((choice) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+							value: choice.value,
+							children: choice.label
+						}, choice.value))]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: props.invalid ? settings_card_module_css_default.invalid : settings_card_module_css_default.hint,
+						children: props.invalid ? props.invalidLabel : props.hint
+					})
+				]
+			});
+		}
 		//#endregion
 		//#region src/client/settings-form.ts
 		/** A whole- or decimal-number field. An empty draft clears the field; any other draft that is not a finite number within the constraints blocks the save. */
@@ -989,20 +842,6 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
-		/** A free-text field. An empty draft clears the field. */
-		function textField(field) {
-			return {
-				field,
-				format: (value) => typeof value === "string" ? value : "",
-				parse: (text) => {
-					const trimmed = text.trim();
-					return trimmed === "" ? { kind: "clear" } : {
-						kind: "set",
-						value: trimmed
-					};
-				}
-			};
-		}
 		/** A boolean field, edited through true/false draft text. */
 		function booleanField(field) {
 			return {
@@ -1022,6 +861,20 @@ window.__ModuleLoader__.load({
 				}
 			};
 		}
+		/** An enumerated string field; only the listed choices are accepted. An empty draft clears the field. */
+		function choiceField(field, choices) {
+			return {
+				field,
+				format: (value) => typeof value === "string" && choices.includes(value) ? value : "",
+				parse: (text) => {
+					if (text === "") return { kind: "clear" };
+					return choices.includes(text) ? {
+						kind: "set",
+						value: text
+					} : void 0;
+				}
+			};
+		}
 		/**
 		* Stages one card's edits over one settings namespace and writes them on save.
 		*
@@ -1037,6 +890,7 @@ window.__ModuleLoader__.load({
 			listeners = /* @__PURE__ */ new Set();
 			saving = false;
 			failed = false;
+			failedReason;
 			/** @param scope - the bound settings scope for this card's namespace. */
 			constructor(scope, specs) {
 				this.scope = scope;
@@ -1064,7 +918,8 @@ window.__ModuleLoader__.load({
 					dirty: plan.length > 0,
 					invalid: plan.some((item) => item.run === void 0),
 					saving: this.saving,
-					failed: this.failed
+					failed: this.failed,
+					...this.failedReason === void 0 ? {} : { failedReason: this.failedReason }
 				};
 			}
 			/** Read one field's state from the effective section and its staged draft. */
@@ -1105,29 +960,50 @@ window.__ModuleLoader__.load({
 						if (this.staged.size === 0 && !this.failed) return;
 						this.staged.clear();
 						this.failed = false;
+						this.failedReason = void 0;
 						this.publish();
 					}
 				};
 			}
 			/**
 			* Write every staged edit, then re-seed from what the Host accepted.
+			*
+			* When the scope carries the optional batch surface (the dsh-web-ui
+			* bridge scope), every planned write rides one mutation so cross-field
+			* validate hooks (baseURL+model) judge the batch as a unit instead of
+			* deadlocking on per-field writes. Otherwise the per-field loop runs.
+			* A field lands only when the Host reports it held the staged value; a
+			* landed field's draft is dropped, a failed one stays staged for the user.
 			* @returns settlement after every write and the read-back.
 			*/
 			async save() {
 				const plan = this.plan();
-				const writes = plan.flatMap((item) => item.run === void 0 ? [] : [item.run]);
-				if (plan.length === 0 || this.saving || writes.length !== plan.length) return;
+				const valid = plan.filter((item) => item.run !== void 0);
+				if (plan.length === 0 || this.saving || valid.length !== plan.length) return;
+				const plannedWrites = valid.map((item) => item.op);
 				const fields = new Set(plan.map((item) => item.field));
 				this.saving = true;
 				this.failed = false;
+				this.failedReason = void 0;
 				this.publish();
-				let landed = true;
-				for (const write of writes) landed = await write() && landed;
-				if (landed) for (const field of fields) this.staged.delete(field);
+				const landed = /* @__PURE__ */ new Set();
+				const batch = this.batchedScope();
+				if (batch !== void 0) {
+					const result = await batch.mutate(plannedWrites);
+					if (result.ok) {
+						for (const field of result.fields) if (field.landed) landed.add(field.field);
+					} else this.failedReason = result.message;
+				} else for (const item of valid) if (await item.run()) landed.add(item.field);
+				for (const field of fields) if (landed.has(field)) this.staged.delete(field);
 				this.saving = false;
-				this.failed = !landed;
+				this.failed = landed.size !== fields.size;
 				this.publish();
 			}
+			/** The scope's batch surface when it supports one; undefined conservatively otherwise. */
+			batchedScope() {
+				const candidate = this.scope;
+				return typeof candidate?.mutate === "function" ? candidate : void 0;
+			}
 			/**
 			* Every staged edit a save would write. An entry whose draft is not a value
 			* its field accepts carries no write: the form is still dirty, and the save
@@ -1142,6 +1018,10 @@ window.__ModuleLoader__.load({
 					if (staged.clear) {
 						if (this.stored(field)) plan.push({
 							field,
+							op: {
+								field,
+								op: "unset"
+							},
 							run: () => this.clear(field)
 						});
 						continue;
@@ -1150,14 +1030,27 @@ window.__ModuleLoader__.load({
 					const write = spec.parse(staged.text);
 					if (write === void 0) plan.push({
 						field,
+						op: {
+							field,
+							op: "unset"
+						},
 						run: void 0
 					});
 					else if (write.kind === "clear") plan.push({
 						field,
+						op: {
+							field,
+							op: "unset"
+						},
 						run: () => this.clear(field)
 					});
 					else plan.push({
 						field,
+						op: {
+							field,
+							op: "set",
+							value: write.value
+						},
 						run: () => this.store(field, write.value)
 					});
 				}
@@ -1169,11 +1062,13 @@ window.__ModuleLoader__.load({
 			}
 			async store(field, value) {
 				await this.scope.set(field, value);
+				if (this.specOf(field).secret) return true;
 				return this.userLayer()?.[field] === value;
 			}
 			stage(field, edit) {
 				this.staged.set(field, edit);
 				this.failed = false;
+				this.failedReason = void 0;
 				this.publish();
 			}
 			specOf(field) {
@@ -1203,11 +1098,21 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 		//#region src/client/PetSettingsCard.tsx
-		/** Bridges the `pet` scope onto the card's staged form. */
+		/** Fetch the registry list (the same data the sprite renders from). */
+		async function fetchPetChoices() {
+			const response = await fetch("/api/pet/pets");
+			if (!response.ok) throw new Error("pet pets failed: " + response.status);
+			return await response.json();
+		}
+		/** Bridges the 'pet' scope onto the card's staged form. */
 		var PetSettingsCardController = class {
 			form;
 			store;
-			/** @param scope - the bound settings scope for the `pet` namespace. */
+			petChoices = [];
+			petLabels = /* @__PURE__ */ new Map();
+			loaded = false;
+			attempts = 0;
+			/** @param scope - the bound settings scope for the 'pet' namespace. */
 			constructor(scope) {
 				this.form = new CardForm(scope, [
 					booleanField("enabled"),
@@ -1215,9 +1120,26 @@ window.__ModuleLoader__.load({
 					numberField("size"),
 					numberField("right"),
 					numberField("bottom"),
-					textField("name")
+					choiceField("petId", this.petChoices)
 				]);
 				this.store = this.form.bind(() => this.projection());
+				this.loadPets();
+			}
+			/** Resolve the registry choices once (retried a few times on failure). */
+			async loadPets() {
+				if (this.loaded) return;
+				try {
+					const list = await fetchPetChoices();
+					this.petChoices.splice(0, this.petChoices.length, ...list.map((choice) => choice.id));
+					for (const choice of list) this.petLabels.set(choice.id, choice.displayName);
+					this.loaded = true;
+					this.store.set(this.projection());
+				} catch {
+					this.attempts += 1;
+					if (this.attempts < 3) window.setTimeout(() => {
+						this.loadPets();
+					}, 3e3);
+				}
 			}
 			projection() {
 				return {
@@ -1227,7 +1149,11 @@ window.__ModuleLoader__.load({
 					size: this.form.field("size"),
 					right: this.form.field("right"),
 					bottom: this.form.field("bottom"),
-					name: this.form.field("name")
+					petId: this.form.field("petId"),
+					petChoices: this.petChoices.map((id) => ({
+						value: id,
+						label: this.petLabels.get(id) ?? id
+					}))
 				};
 			}
 			/**
@@ -1280,6 +1206,21 @@ window.__ModuleLoader__.load({
 							props.resetField("enabled");
 						}
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChoiceField, {
+						id: "settings-pet-pet",
+						label: t("settings.pet"),
+						hint: t("settings.petHint"),
+						inheritLabel: t("settings.inherit"),
+						...fieldProps,
+						...state.petId,
+						choices: state.petChoices,
+						onEdit: (text) => {
+							props.edit("petId", text);
+						},
+						onReset: () => {
+							props.resetField("petId");
+						}
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BooleanField, {
 						id: "settings-pet-visible",
 						label: t("settings.visible"),
@@ -1337,19 +1278,6 @@ window.__ModuleLoader__.load({
 						onReset: () => {
 							props.resetField("bottom");
 						}
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueField, {
-						id: "settings-pet-name",
-						label: t("settings.name"),
-						hint: t("settings.nameHint"),
-						...fieldProps,
-						...state.name,
-						onEdit: (text) => {
-							props.edit("name", text);
-						},
-						onReset: () => {
-							props.resetField("name");
-						}
 					})
 				]
 			});
@@ -1367,10 +1295,12 @@ window.__ModuleLoader__.load({
 			"pet.rank": "亲密度 {rank}",
 			"pet.points": "{points} 点",
 			"pet.treats": "小鱼干 ×{n}",
-			"pet.state.loading": "鲸鱼娘正在赶来…",
-			"pet.state.error": "鲸鱼娘迷路了（连接失败）",
+			"pet.state.loading": "宠物正在赶来…",
+			"pet.state.error": "宠物迷路了（连接失败）",
 			"settings.title": "宠物",
-			"settings.description": "鲸鱼娘的显示布局与名字。",
+			"settings.description": "选择宠物并调整它的显示布局。",
+			"settings.pet": "宠物",
+			"settings.petHint": "选择显示哪只宠物；每只宠物独立命名，可在宠物悬浮面板改名。",
 			"settings.enabled": "启用宠物",
 			"settings.enabledHint": "关闭后隐藏宠物并停止轮询，可在设置里重新启用。",
 			"settings.visible": "显示宠物",
@@ -1381,8 +1311,6 @@ window.__ModuleLoader__.load({
 			"settings.rightHint": "距视口右边缘的水平内缩距离。",
 			"settings.bottom": "距底部（px）",
 			"settings.bottomHint": "距视口底边的垂直内缩距离。",
-			"settings.name": "名字",
-			"settings.nameHint": "宠物显示名，1–20 个字符。",
 			"settings.inherit": "继承",
 			"settings.on": "开",
 			"settings.off": "关",
@@ -1410,10 +1338,12 @@ window.__ModuleLoader__.load({
 			"pet.rank": "Affinity {rank}",
 			"pet.points": "{points} pts",
 			"pet.treats": "Treats ×{n}",
-			"pet.state.loading": "The whale girl is on her way…",
-			"pet.state.error": "The whale girl is lost (connection failed)",
+			"pet.state.loading": "The pet is on its way…",
+			"pet.state.error": "The pet is lost (connection failed)",
 			"settings.title": "Pet",
-			"settings.description": "The whale girl’s display layout and name.",
+			"settings.description": "Pick a pet and tune its display layout.",
+			"settings.pet": "Pet",
+			"settings.petHint": "Choose which pet shows. Names are stored per pet; rename from the pet hover panel.",
 			"settings.enabled": "Enable the pet",
 			"settings.enabledHint": "When off, the pet hides and polling stops; re-enable it here.",
 			"settings.visible": "Show the pet",
@@ -1424,8 +1354,6 @@ window.__ModuleLoader__.load({
 			"settings.rightHint": "Horizontal inset from the viewport right edge.",
 			"settings.bottom": "Bottom inset (px)",
 			"settings.bottomHint": "Vertical inset from the viewport bottom edge.",
-			"settings.name": "Name",
-			"settings.nameHint": "The pet’s display name, 1–20 characters.",
 			"settings.inherit": "Inherit",
 			"settings.on": "On",
 			"settings.off": "Off",
@@ -1473,16 +1401,18 @@ window.__ModuleLoader__.load({
 				headers: { "content-type": "application/json" },
 				body: JSON.stringify(body)
 			});
-			if (!response.ok) throw new Error(`pet ${path} failed: ${response.status}`);
+			if (!response.ok) throw new Error("pet " + path + " failed: " + response.status);
 			return await response.json();
 		}
 		/** The live host API instance (always defined; failures surface per call). */
 		const petApi = {
 			state: () => petFetch("/api/pet/state"),
+			pets: () => petFetch("/api/pet/pets"),
 			interact: (kind) => petFetch("/api/pet/interact", { kind }),
 			setVisible: (visible) => petFetch("/api/pet/set-visible", { visible }),
 			setConfig: (patch) => petFetch("/api/pet/set-config", patch),
-			setName: (name) => petFetch("/api/pet/set-name", { name })
+			setName: (name) => petFetch("/api/pet/set-name", { name }),
+			setPet: (petId) => petFetch("/api/pet/set-pet", { petId })
 		};
 		/** Poll interval for the host snapshot. */
 		const POLL_MS = 2e3;
@@ -1525,9 +1455,15 @@ window.__ModuleLoader__.load({
 				if (enabled() && disposeUi === void 0) {
 					const petStore = createPetStore().create();
 					const setSnapshot = petStore.actions.setSnapshot;
+					const setPets = petStore.actions.setPets;
 					const setState = petStore.actions.setState;
 					const setFeedback = petStore.actions.setFeedback;
+					let petsLoaded = false;
 					const pollNow = () => {
+						if (!petsLoaded) petApi.pets().then((list) => {
+							petsLoaded = true;
+							setPets(list);
+						}, () => {});
 						petApi.state().then((snapshot) => {
 							setSnapshot(snapshot);
 						}, () => {