@linxin666/dsh-pet 0.1.20 → 0.2.1

package/lib/client.js

@@ -63,6 +63,26 @@ window.__ModuleLoader__.load({
 		}
 		//#endregion
 		//#region src/state.ts
+		/**
+		* Map one activity phase onto the animation contract.
+		* - thinking → `running` and tool → `running-right` (focused work).
+		* - review → `review` while answer text is streaming.
+		* - waiting → `waiting` (expectant pose, needs user input).
+		* - done → `jumping` (celebration), then back to `idle` after the window.
+		* - failed → `failed` briefly, then back to `idle`.
+		* - idle → `idle` (calm breathing loop).
+		*/
+		function animationForPhase(phase) {
+			switch (phase) {
+				case "thinking": return "running";
+				case "tool": return "running-right";
+				case "review": return "review";
+				case "waiting": return "waiting";
+				case "done": return "jumping";
+				case "failed": return "failed";
+				case "idle": return "idle";
+			}
+		}
 		/** The spritesheet row index for one animation track. */
 		function rowOf(animation) {
 			return {
@@ -120,8 +140,32 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/sequences.ts
+		/** Resolve the active track and frame after elapsed milliseconds of a looping sequence. */
+		function sequenceFrameAt(sequence, tracks, elapsedMs) {
+			const itemDurations = sequence.map((animation) => tracks[animation].durations.reduce((sum, value) => sum + value, 0));
+			const sequenceDuration = itemDurations.reduce((sum, value) => sum + value, 0);
+			let offset = Math.max(0, elapsedMs) % sequenceDuration;
+			let itemIndex = 0;
+			while (itemIndex < sequence.length - 1 && offset >= itemDurations[itemIndex]) {
+				offset -= itemDurations[itemIndex];
+				itemIndex += 1;
+			}
+			const animation = sequence[itemIndex];
+			const track = tracks[animation];
+			let frameIndex = 0;
+			while (frameIndex < track.frames.length - 1 && offset >= track.durations[frameIndex]) {
+				offset -= track.durations[frameIndex];
+				frameIndex += 1;
+			}
+			return {
+				animation,
+				frameIndex
+			};
+		}
+		//#endregion
 		//#region \0dsh-css:packages/dsh-pet/src/client/pet.module.css.mjs
-		const css$2 = ".kz2Bea_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.kz2Bea_sprite{image-rendering:auto;touch-action:none;position:relative}.kz2Bea_bubble{white-space:nowrap;color:#fff;pointer-events:none;border-radius:999px;margin-bottom:6px;padding:4px 10px;font-size:12px;line-height:1.4;animation:2.6s ease-out forwards kz2Bea_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.kz2Bea_bubblePet{background:#f472b6eb}.kz2Bea_bubbleFeed{background:#38bdf8eb}.kz2Bea_bubbleStatus{text-overflow:ellipsis;background:#0f172ae6;border:1px solid #7dd3fc80;max-width:min(280px,100vw - 24px);animation:none;overflow:hidden}.kz2Bea_bubbleStack{pointer-events:auto;flex-direction:column;align-items:center;gap:4px;display:flex;position:absolute;bottom:100%}.kz2Bea_bubbleStack .kz2Bea_bubble{pointer-events:auto;margin-bottom:0;position:relative;bottom:auto}.kz2Bea_bubbleClickable{cursor:pointer;font:inherit;text-align:center;appearance:none;transition:filter .12s,box-shadow .12s}.kz2Bea_bubbleClickable:hover{filter:brightness(1.12)}.kz2Bea_bubbleClickable:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@keyframes kz2Bea_pet-bubble-pop{0%{opacity:0;transform:translateY(6px)scale(.85)}15%{opacity:1;transform:translateY(0)scale(1.05)}25%{transform:translateY(0)scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-8px)scale(.95)}}.kz2Bea_panel{color:#e2e8f0;backdrop-filter:blur(6px);background:#0f172aeb;border:1px solid #94a3b859;border-radius:10px;flex-direction:column;gap:6px;min-width:132px;margin-right:8px;padding:8px 10px;font-size:12px;display:flex;position:absolute;bottom:0;right:100%;box-shadow:0 4px 16px #00000059}.kz2Bea_panel:after{content:\"\";width:14px;position:absolute;top:0;bottom:0;left:100%}.kz2Bea_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.kz2Bea_nameCell{font-weight:600}.kz2Bea_renameRow{align-items:center;gap:6px;display:flex}.kz2Bea_nameInput{color:#e2e8f0;background:#1e293be6;border:1px solid #7dd3fc80;border-radius:6px;outline:none;flex:1;min-width:0;padding:3px 6px;font-size:12px}.kz2Bea_nameInput:focus{border-color:#38bdf8;box-shadow:0 0 0 2px #38bdf873}.kz2Bea_actions{gap:6px;display:flex}.kz2Bea_action{cursor:pointer;color:#0f172a;background:linear-gradient(#7dd3fc,#38bdf8);border:none;border-radius:6px;flex:1;padding:4px 8px;font-size:12px;transition:filter .12s,box-shadow .12s}.kz2Bea_action:hover{filter:brightness(1.08)}.kz2Bea_action:active{filter:brightness(.94)}.kz2Bea_action:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}.kz2Bea_summon{color:#7dd3fc;cursor:pointer;background:#0f172abf;border:1px dashed #7dd3fc99;border-radius:999px;padding:2px 10px;font-size:11px;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.kz2Bea_summon:hover{color:#bae6fd;background:#0f172ae6;border-color:#7dd3fcf2}.kz2Bea_summon:active{color:#7dd3fc;border-color:#7dd3fccc}.kz2Bea_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #38bdf8d9}@media (prefers-reduced-motion:reduce){.kz2Bea_bubble{opacity:1;animation:none}.kz2Bea_action,.kz2Bea_summon{transition:none}}";
+		const css$2 = ".kz2Bea_float{pointer-events:auto;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;display:flex;position:fixed}.kz2Bea_sprite{image-rendering:auto;touch-action:none;position:relative}.kz2Bea_bubble{white-space:nowrap;color:#f4f7ff;pointer-events:none;border-radius:999px;margin-bottom:6px;padding:4px 10px;font-size:12px;line-height:1.4;animation:2.6s ease-out forwards kz2Bea_pet-bubble-pop;position:absolute;bottom:100%;box-shadow:0 2px 8px #00000040}.kz2Bea_bubblePet{background:#4d6bfef2}.kz2Bea_bubbleFeed{background:#0369a1f2}.kz2Bea_bubbleStatus{text-overflow:ellipsis;backdrop-filter:blur(8px);letter-spacing:.02em;background:linear-gradient(160deg,#131c36e6,#070b1af0);border:1px solid #7e98ff73;max-width:min(280px,100vw - 24px);padding:5px 12px;animation:.24s ease-out kz2Bea_pet-bubble-in;overflow:hidden;box-shadow:0 4px 12px #02061759,inset 0 1px #e2e8ff1a,0 0 12px #4d6bfe2e}.kz2Bea_bubbleWhisper{letter-spacing:.03em;animation:.32s cubic-bezier(.22,1,.36,1) kz2Bea_pet-whisper-in}.kz2Bea_bubbleWhisper:before{content:\"「\";opacity:.7;margin-right:2px}.kz2Bea_bubbleWhisper:after{content:\"」\";opacity:.7;margin-left:2px}.kz2Bea_bubbleStack{pointer-events:auto;flex-direction:column-reverse;align-items:center;gap:4px;display:flex;position:absolute;bottom:100%}.kz2Bea_bubbleAnchor{display:inline-flex;position:relative}.kz2Bea_bubbleMore{z-index:1;color:#eef2ff;cursor:pointer;background:linear-gradient(160deg,#4a68f5f2,#2f44b8f2);border:1px solid #7e98ff8c;border-radius:999px;justify-content:center;align-items:center;min-width:18px;height:18px;padding:0 5px;font-size:10px;font-weight:600;line-height:1;transition:filter .12s;display:inline-flex;position:absolute;top:-9px;right:-10px;box-shadow:0 2px 6px #02061766}.kz2Bea_bubbleMore:hover{filter:brightness(1.15)}.kz2Bea_bubbleMore:focus-visible{outline:none;box-shadow:0 0 0 2px #7e98ffe6}.kz2Bea_bubbleStack .kz2Bea_bubble{pointer-events:auto;margin-bottom:0;position:relative;bottom:auto}.kz2Bea_bubbleClickable{cursor:pointer;font:inherit;text-align:center;appearance:none;transition:filter .12s,box-shadow .12s}.kz2Bea_bubbleClickable:hover{filter:brightness(1.12)}.kz2Bea_bubbleClickable:focus-visible{outline:none;box-shadow:0 0 0 2px #7e98ffe6}@keyframes kz2Bea_pet-bubble-in{0%{opacity:0;transform:translateY(6px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_pet-whisper-in{0%{opacity:0;transform:translateY(8px)scale(.9)}60%{transform:translateY(-1px)scale(1.02)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_pet-panel-in{0%{opacity:0;transform:translateY(4px)scale(.97)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes kz2Bea_pet-bubble-pop{0%{opacity:0;transform:translateY(6px)scale(.85)}15%{opacity:1;transform:translateY(0)scale(1.05)}25%{transform:translateY(0)scale(1)}75%{opacity:1}to{opacity:0;transform:translateY(-8px)scale(.95)}}.kz2Bea_panel{color:#e6ebf8;backdrop-filter:blur(10px);transform-origin:50% 0;background:linear-gradient(165deg,#131c36f2,#070b1af7);border:1px solid #7e98ff4d;border-radius:12px;flex-direction:column;gap:7px;min-width:148px;margin-top:8px;padding:10px 12px;font-size:12px;animation:.2s cubic-bezier(.22,1,.36,1) kz2Bea_pet-panel-in;display:flex;position:absolute;top:100%;box-shadow:0 8px 24px #02061773,0 0 0 1px #4d6bfe1a,inset 0 1px #e2e8ff14}.kz2Bea_panel:after{content:\"\";height:14px;position:absolute;bottom:100%;left:0;right:0}.kz2Bea_panelAbove{transform-origin:50% 100%;margin-top:0;margin-bottom:8px;top:auto;bottom:100%}.kz2Bea_panelAbove:after{top:100%;bottom:auto}.kz2Bea_rankRow{white-space:nowrap;justify-content:space-between;gap:10px;display:flex}.kz2Bea_nameCell{letter-spacing:.02em;background:linear-gradient(90deg,#a9c1ff,#6c8bff 60%,#4d6bfe);color:#0000;-webkit-background-clip:text;background-clip:text;font-weight:600}.kz2Bea_statRank{color:#9db4ff;font-weight:600}.kz2Bea_statTreats{color:#7dd3fc;font-weight:600}.kz2Bea_statPoints{color:#fcd34d;font-weight:600}.kz2Bea_renameRow{align-items:center;gap:6px;display:flex}.kz2Bea_nameInput{color:#e6ebf8;background:#131c36e6;border:1px solid #7e98ff80;border-radius:6px;outline:none;flex:1;min-width:0;padding:3px 6px;font-size:12px}.kz2Bea_nameInput:focus{border-color:#4d6bfe;box-shadow:0 0 0 2px #4d6bfe73}.kz2Bea_actions{gap:6px;display:flex}.kz2Bea_action{cursor:pointer;color:#fff;background:linear-gradient(#4a68f5,#3a55e0);border:none;border-radius:6px;flex:1;padding:4px 8px;font-size:12px;font-weight:600;transition:filter .12s,box-shadow .12s,transform .12s;box-shadow:0 2px 6px #4d6bfe4d}.kz2Bea_action:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 10px #4d6bfe66}.kz2Bea_action:active{filter:brightness(.94);transform:translateY(0);box-shadow:0 1px 4px #4d6bfe4d}.kz2Bea_action:focus-visible{outline:none;box-shadow:0 0 0 2px #7e98ffe6}.kz2Bea_summon{color:#8ea6ff;cursor:pointer;background:#070b1abf;border:1px dashed #7e98ff99;border-radius:999px;padding:2px 10px;font-size:11px;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.kz2Bea_summon:hover{color:#c3d3ff;background:#070b1ae6;border-color:#7e98fff2}.kz2Bea_summon:active{color:#8ea6ff;border-color:#7e98ffcc}.kz2Bea_summon:focus-visible{outline:none;box-shadow:0 0 0 2px #7e98ffe6}@media (prefers-reduced-motion:reduce){.kz2Bea_bubble,.kz2Bea_bubbleStatus,.kz2Bea_bubbleWhisper,.kz2Bea_panel{opacity:1;animation:none}.kz2Bea_action,.kz2Bea_summon,.kz2Bea_bubbleMore{transition:none}}";
 		const tagId$2 = "@linxin666/dsh-pet/pet.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$2) + "]") === null) {
 			const tag = document.createElement("style");
@@ -134,19 +178,29 @@ window.__ModuleLoader__.load({
 			"action": "kz2Bea_action",
 			"actions": "kz2Bea_actions",
 			"bubble": "kz2Bea_bubble",
+			"bubbleAnchor": "kz2Bea_bubbleAnchor",
 			"bubbleClickable": "kz2Bea_bubbleClickable",
 			"bubbleFeed": "kz2Bea_bubbleFeed",
+			"bubbleMore": "kz2Bea_bubbleMore",
 			"bubblePet": "kz2Bea_bubblePet",
 			"bubbleStack": "kz2Bea_bubbleStack",
 			"bubbleStatus": "kz2Bea_bubbleStatus",
+			"bubbleWhisper": "kz2Bea_bubbleWhisper",
 			"float": "kz2Bea_float",
 			"nameCell": "kz2Bea_nameCell",
 			"nameInput": "kz2Bea_nameInput",
 			"panel": "kz2Bea_panel",
+			"panelAbove": "kz2Bea_panelAbove",
+			"pet-bubble-in": "kz2Bea_pet-bubble-in",
 			"pet-bubble-pop": "kz2Bea_pet-bubble-pop",
+			"pet-panel-in": "kz2Bea_pet-panel-in",
+			"pet-whisper-in": "kz2Bea_pet-whisper-in",
 			"rankRow": "kz2Bea_rankRow",
 			"renameRow": "kz2Bea_renameRow",
 			"sprite": "kz2Bea_sprite",
+			"statPoints": "kz2Bea_statPoints",
+			"statRank": "kz2Bea_statRank",
+			"statTreats": "kz2Bea_statTreats",
 			"summon": "kz2Bea_summon"
 		};
 		//#endregion
@@ -175,10 +229,17 @@ window.__ModuleLoader__.load({
 			const { snapshot, definition, display, feedback } = props;
 			const spriteRef = (0, react.useRef)(null);
 			const floatRef = (0, react.useRef)(null);
+			const panelRef = (0, react.useRef)(null);
+			const bubbleRef = (0, react.useRef)(null);
 			const [imageReady, setImageReady] = (0, react.useState)(false);
 			const [hovered, setHovered] = (0, react.useState)(false);
+			const [stackPeek, setStackPeek] = (0, react.useState)(false);
+			const [stackPinned, setStackPinned] = (0, react.useState)(false);
 			const [renaming, setRenaming] = (0, react.useState)(false);
+			const [panelAbove, setPanelAbove] = (0, react.useState)(false);
+			const [panelLift, setPanelLift] = (0, react.useState)(0);
 			const [nameDraft, setNameDraft] = (0, react.useState)("");
+			const composingRef = (0, react.useRef)(false);
 			const [dragPos, setDragPos] = (0, react.useState)(null);
 			const dragRef = (0, react.useRef)(null);
 			const hideTimerRef = (0, react.useRef)(null);
@@ -191,6 +252,7 @@ window.__ModuleLoader__.load({
 			const columns = definition.columns;
 			const rows = definition.rows;
 			const tracks = definition.tracks;
+			const sequences = definition.sequences;
 			(0, react.useEffect)(() => {
 				let cancelled = false;
 				const img = new Image();
@@ -204,22 +266,36 @@ window.__ModuleLoader__.load({
 				};
 			}, [definition.atlasUrl]);
 			const spriteScale = display.size / cell.height;
+			const phase = snapshot?.phase ?? "idle";
 			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 track = trimTrack(tracks[animation], rows[row] ?? tracks[animation].frames.length);
+				const sequence = animation === animationForPhase(phase) ? sequences?.[phase] : void 0;
+				const leadAnimation = sequence?.[0] ?? animation;
+				const row = rowOfTrack(leadAnimation);
+				const track = trimTrack(tracks[leadAnimation], rows[row] ?? tracks[leadAnimation].frames.length);
 				const leadCol = track.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();
+				let sequenceElapsed = 0;
 				const tick = (ts) => {
 					const delta = ts - last;
 					last = ts;
+					if (sequence !== void 0) {
+						sequenceElapsed += delta;
+						const current = sequenceFrameAt(sequence, tracks, sequenceElapsed);
+						const currentRow = rowOfTrack(current.animation);
+						const col = trimTrack(tracks[current.animation], rows[currentRow] ?? tracks[current.animation].frames.length).frames[current.frameIndex];
+						const pos = framePosition(cell, columns, currentRow, col, scaleRef.current);
+						if (spriteRef.current !== null) spriteRef.current.style.backgroundPosition = pos.x + "px " + pos.y + "px";
+						raf = requestAnimationFrame(tick);
+						return;
+					}
 					const st = frameRef.current;
 					if (st.track !== animation) {
 						st.track = animation;
@@ -245,10 +321,12 @@ window.__ModuleLoader__.load({
 				return () => cancelAnimationFrame(raf);
 			}, [
 				animation,
+				phase,
 				cell,
 				columns,
 				rows,
-				tracks
+				tracks,
+				sequences
 			]);
 			const feedbackDoneRef = (0, react.useRef)(props.onFeedbackDone);
 			feedbackDoneRef.current = props.onFeedbackDone;
@@ -264,6 +342,7 @@ window.__ModuleLoader__.load({
 					hideTimerRef.current = null;
 				}
 			};
+			(0, react.useEffect)(() => () => clearHideTimer(), []);
 			const onPointerDown = (e) => {
 				e.preventDefault();
 				e.target.setPointerCapture?.(e.pointerId);
@@ -304,8 +383,44 @@ window.__ModuleLoader__.load({
 			const spriteWidth = Math.round(cell.width * spriteScale);
 			const spriteHeight = Math.round(cell.height * spriteScale);
 			const sessionBubbles = snapshot?.sessions ?? [];
+			const stackOpen = stackPeek || stackPinned;
+			const visibleSessions = !stackOpen && sessionBubbles.length > 1 ? sessionBubbles.slice(0, 1) : sessionBubbles;
 			const statusBubble = feedback === null && sessionBubbles.length === 0 ? snapshot?.bubble : void 0;
+			const whisper = feedback === null ? snapshot?.whisper : void 0;
+			const bubblePresent = feedback !== null || sessionBubbles.length > 0 || statusBubble !== void 0 || whisper !== void 0;
 			const displayName = snapshot?.name ?? definition.displayName;
+			(0, react.useEffect)(() => {
+				if (sessionBubbles.length <= 1) setStackPinned(false);
+			}, [sessionBubbles.length]);
+			(0, react.useLayoutEffect)(() => {
+				if (!hovered) {
+					setPanelAbove(false);
+					setPanelLift(0);
+					return;
+				}
+				const updatePanelPlacement = () => {
+					const sprite = spriteRef.current;
+					const panel = panelRef.current;
+					if (sprite === null || panel === null) return;
+					const above = window.innerHeight - sprite.getBoundingClientRect().bottom < panel.getBoundingClientRect().height + 8;
+					setPanelAbove(above);
+					const bubbleHeight = above ? bubbleRef.current?.getBoundingClientRect().height ?? 0 : 0;
+					setPanelLift(bubbleHeight > 0 ? Math.ceil(bubbleHeight) + 14 : 0);
+				};
+				updatePanelPlacement();
+				window.addEventListener("resize", updatePanelPlacement);
+				return () => window.removeEventListener("resize", updatePanelPlacement);
+			}, [
+				hovered,
+				renaming,
+				pos.right,
+				pos.bottom,
+				display.size,
+				bubblePresent,
+				sessionBubbles.length,
+				stackOpen,
+				feedback
+			]);
 			return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: floatRef,
 				className: pet_module_css_default.float,
@@ -321,6 +436,7 @@ window.__ModuleLoader__.load({
 				onPointerLeave: (e) => {
 					const next = e.relatedTarget;
 					if (next instanceof Node && floatRef.current?.contains(next)) return;
+					if (renaming) return;
 					clearHideTimer();
 					hideTimerRef.current = window.setTimeout(() => setHovered(false), 300);
 				},
@@ -332,7 +448,7 @@ window.__ModuleLoader__.load({
 							width: spriteWidth,
 							height: spriteHeight,
 							backgroundImage: imageReady ? "url(" + definition.atlasUrl + ")" : void 0,
-							backgroundSize: cell.width * columns * spriteScale + "px " + cell.height * rows.length * spriteScale + "px",
+							backgroundSize: cell.width * columns * spriteScale + "px " + cell.height * (definition.atlasRows ?? rows.length) * spriteScale + "px",
 							backgroundRepeat: "no-repeat",
 							backgroundPosition: "0 0",
 							cursor: dragRef.current === null ? "grab" : "grabbing"
@@ -348,29 +464,54 @@ window.__ModuleLoader__.load({
 						"aria-label": definition.displayName
 					}),
 					feedback !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: bubbleRef,
 						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),
-					feedback === null && sessionBubbles.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					feedback === null && (sessionBubbles.length > 0 || statusBubble !== void 0 || whisper !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: bubbleRef,
 						className: pet_module_css_default.bubbleStack,
-						children: sessionBubbles.map((session) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-							type: "button",
-							className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus, pet_module_css_default.bubbleClickable),
-							title: props.t("pet.openSessionHint"),
-							onClick: () => {
-								props.onOpenSession(session.sessionId);
-							},
-							children: session.bubble
-						}, session.sessionId))
-					}),
-					statusBubble !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus),
-						role: "status",
-						"aria-live": "polite",
-						children: statusBubble
+						onPointerEnter: () => setStackPeek(true),
+						onPointerLeave: () => setStackPeek(false),
+						children: [visibleSessions.map((session, index) => {
+							const speaksWhisper = index === 0 && whisper !== void 0;
+							const bubble = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus, pet_module_css_default.bubbleClickable, speaksWhisper && pet_module_css_default.bubbleWhisper),
+								title: props.t("pet.openSessionHint"),
+								onClick: () => {
+									props.onOpenSession(session.sessionId);
+								},
+								children: speaksWhisper ? whisper : session.bubble
+							}, speaksWhisper ? "whisper:" + whisper : session.sessionId);
+							if (index !== 0 || sessionBubbles.length <= 1) return bubble;
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+								className: pet_module_css_default.bubbleAnchor,
+								children: [bubble, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: pet_module_css_default.bubbleMore,
+									title: stackOpen ? props.t("pet.collapseSessions") : props.t("pet.moreSessions", { n: sessionBubbles.length - 1 }),
+									"aria-label": stackOpen ? props.t("pet.collapseSessions") : props.t("pet.moreSessions", { n: sessionBubbles.length - 1 }),
+									"aria-expanded": stackOpen,
+									onClick: (e) => {
+										e.stopPropagation();
+										setStackPinned((open) => !open);
+									},
+									children: stackOpen ? "×" : "+" + String(sessionBubbles.length - 1)
+								})]
+							}, "primary");
+						}), sessionBubbles.length === 0 && (statusBubble !== void 0 || whisper !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: clsx(pet_module_css_default.bubble, pet_module_css_default.bubbleStatus, whisper !== void 0 && pet_module_css_default.bubbleWhisper),
+							role: "status",
+							"aria-live": "polite",
+							children: whisper ?? statusBubble
+						}, whisper === void 0 ? "status" : "whisper:" + whisper)]
 					}),
 					hovered && dragRef.current === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						className: pet_module_css_default.panel,
+						ref: panelRef,
+						className: clsx(pet_module_css_default.panel, panelAbove && pet_module_css_default.panelAbove),
+						"data-placement": panelAbove ? "above" : "below",
+						style: panelAbove && panelLift > 0 ? { marginBottom: panelLift } : void 0,
 						onPointerEnter: () => {
 							clearHideTimer();
 						},
@@ -383,8 +524,14 @@ window.__ModuleLoader__.load({
 								placeholder: props.t("pet.namePlaceholder"),
 								autoFocus: true,
 								onChange: (e) => setNameDraft(e.target.value),
+								onCompositionStart: () => {
+									composingRef.current = true;
+								},
+								onCompositionEnd: () => {
+									composingRef.current = false;
+								},
 								onKeyDown: (e) => {
-									if (e.nativeEvent.isComposing) return;
+									if (composingRef.current || e.nativeEvent.isComposing || e.key === "Process") return;
 									if (e.key === "Enter") {
 										const trimmed = nameDraft.trim();
 										if (trimmed !== "") {
@@ -411,11 +558,20 @@ window.__ModuleLoader__.load({
 								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: pet_module_css_default.nameCell,
 									children: displayName
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" }) })]
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statRank,
+									children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" })
+								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: pet_module_css_default.rankRow,
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.treats", { n: snapshot?.treats.stocked ?? 0 }) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: props.t("pet.points", { points: snapshot?.affinity.points ?? 0 }) })]
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statTreats,
+									children: props.t("pet.treats", { n: snapshot?.treats.stocked ?? 0 })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: pet_module_css_default.statPoints,
+									children: props.t("pet.points", { points: snapshot?.affinity.points ?? 0 })
+								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: pet_module_css_default.actions,
@@ -430,6 +586,7 @@ window.__ModuleLoader__.load({
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: () => {
+											clearHideTimer();
 											setNameDraft(displayName);
 											setRenaming(true);
 										},
@@ -515,12 +672,13 @@ window.__ModuleLoader__.load({
 				},
 				onClick: props.summon,
 				"data-testid": "pet-summon",
+				"data-dsh-part": "summon-button",
 				children: props.t("pet.summon", { name: snapshot?.name ?? "" })
 			});
 		}
 		//#endregion
 		//#region \0dsh-css:packages/dsh-pet/src/client/settings-card.module.css.mjs
-		const css$1 = ".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_headerStatic{border-radius:12px;align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}.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 css$1 = ".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_headerStatic{border-radius:12px;align-items:center;gap:12px;width:100%;padding:14px 16px;display:flex}.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_selectWrap{position:relative}.kKk9aW_selectButton{appearance:none;text-align:left;cursor:pointer;justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.kKk9aW_selectLabel{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.kKk9aW_selectChevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}.kKk9aW_selectChevronOpen{transform:rotate(180deg)}.kKk9aW_selectPopup{z-index:40;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);max-height:240px;box-shadow:0 8px 24px var(--dsw-alias-bg-mask-2);opacity:0;border-radius:8px;flex-direction:column;padding:4px;transition:opacity .1s,transform .1s;display:flex;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow-y:auto;transform:translateY(-4px)}.kKk9aW_selectPopupOpen{opacity:1;transform:none}.kKk9aW_selectPopupClose{opacity:0;pointer-events:none;transform:translateY(-4px)}.kKk9aW_selectOption{color:var(--dsw-alias-label-primary);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;border-radius:6px;padding:6px 10px;font-size:13px;line-height:1.5;overflow:hidden}.kKk9aW_selectOption:hover,.kKk9aW_selectOptionActive{background:var(--dsw-alias-interactive-bg-hover)}.kKk9aW_selectOptionSelected{color:var(--dsw-alias-brand-primary);background:color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color) 10%, transparent);font-weight:500}.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,.kKk9aW_selectChevron,.kKk9aW_selectChevronOpen,.kKk9aW_selectPopup{transition:none}}";
 		const tagId$1 = "@linxin666/dsh-pet/settings-card.module.css";
 		if (typeof document !== "undefined" && document.querySelector("style[data-plugin-css=" + JSON.stringify(tagId$1) + "]") === null) {
 			const tag = document.createElement("style");
@@ -557,7 +715,18 @@ window.__ModuleLoader__.load({
 			"readOnly": "kKk9aW_readOnly",
 			"reset": "kKk9aW_reset",
 			"save": "kKk9aW_save",
-			"select": "kKk9aW_select"
+			"select": "kKk9aW_select",
+			"selectButton": "kKk9aW_selectButton",
+			"selectChevron": "kKk9aW_selectChevron",
+			"selectChevronOpen": "kKk9aW_selectChevronOpen",
+			"selectLabel": "kKk9aW_selectLabel",
+			"selectOption": "kKk9aW_selectOption",
+			"selectOptionActive": "kKk9aW_selectOptionActive",
+			"selectOptionSelected": "kKk9aW_selectOptionSelected",
+			"selectPopup": "kKk9aW_selectPopup",
+			"selectPopupClose": "kKk9aW_selectPopupClose",
+			"selectPopupOpen": "kKk9aW_selectPopupOpen",
+			"selectWrap": "kKk9aW_selectWrap"
 		};
 		//#endregion
 		//#region src/client/PluginSettingsCard.tsx
@@ -663,7 +832,7 @@ window.__ModuleLoader__.load({
 							children: props.t("settings.readOnly")
 						}) : null,
 						props.children,
-						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						props.hideFooter === true ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: settings_card_module_css_default.footer,
 							children: [
 								state.failed ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("p", {
@@ -736,6 +905,175 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
+		const NON_SKIN_BODY_MARKERS = /* @__PURE__ */ new Set(["dshSkinCenter", "dshSidebarCollapsed"]);
+		function isSkinActive() {
+			return Object.keys(document.body.dataset).some((key) => key.startsWith("dsh") && !NON_SKIN_BODY_MARKERS.has(key));
+		}
+		const SELECT_CLOSE_MS = 100;
+		/**
+		* The shared dual-mode select control. While an appearance skin is active it
+		* renders the legacy native `<select>` untouched, so element-level skin
+		* selectors keep working; under the default appearance it renders a
+		* self-drawn `role="listbox"` popup whose open/close is transition-animated.
+		* Staged cards reach it through BooleanField/ChoiceField; immediate-apply
+		* editors (the side-card prefs) bind it directly through onEdit.
+		* 双模式下拉框：皮肤激活时用原生 select，默认外观用自绘动画弹层。
+		*/
+		function SelectField(props) {
+			const { id, options, value } = props;
+			const [open, setOpen] = (0, react.useState)(false);
+			const [closing, setClosing] = (0, react.useState)(false);
+			const [phase, setPhase] = (0, react.useState)("initial");
+			const [activeIndex, setActiveIndex] = (0, react.useState)(0);
+			const closeTimer = (0, react.useRef)(void 0);
+			const wrapRef = (0, react.useRef)(null);
+			const popupRef = (0, react.useRef)(null);
+			const currentIndex = () => {
+				const index = options.findIndex((option) => option.value === value);
+				return index >= 0 ? index : 0;
+			};
+			const close = (0, react.useCallback)(() => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				setClosing(true);
+				closeTimer.current = setTimeout(() => {
+					setClosing(false);
+					setOpen(false);
+				}, SELECT_CLOSE_MS);
+			}, []);
+			const openPopup = () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+				setActiveIndex(currentIndex());
+				setPhase("initial");
+				setClosing(false);
+				setOpen(true);
+			};
+			const commit = (index) => {
+				const option = options[index];
+				if (option) props.onEdit(option.value);
+				close();
+			};
+			const onTriggerClick = () => {
+				if (props.disabled) return;
+				if (open && !closing) close();
+				else openPopup();
+			};
+			const onKeyDown = (event) => {
+				if (props.disabled) return;
+				const count = options.length;
+				switch (event.key) {
+					case "ArrowDown":
+					case "ArrowUp":
+					case "Enter":
+					case " ":
+						event.preventDefault();
+						if (!open) openPopup();
+						else if (!closing) if (event.key === "ArrowDown") setActiveIndex((index) => (index + 1) % count);
+						else if (event.key === "ArrowUp") setActiveIndex((index) => (index - 1 + count) % count);
+						else commit(activeIndex);
+						break;
+					case "Escape":
+						if (open) {
+							event.preventDefault();
+							event.stopPropagation();
+							close();
+						}
+						break;
+					case "Tab":
+						if (open) close();
+						break;
+				}
+			};
+			(0, react.useEffect)(() => () => {
+				if (closeTimer.current !== void 0) clearTimeout(closeTimer.current);
+			}, []);
+			(0, react.useLayoutEffect)(() => {
+				if (open && !closing && phase === "initial") {
+					popupRef.current?.offsetHeight;
+					setPhase("open");
+				}
+			}, [
+				open,
+				closing,
+				phase
+			]);
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const onPointerDown = (event) => {
+					const target = event.target;
+					if (target instanceof Node && !wrapRef.current?.contains(target)) close();
+				};
+				document.addEventListener("pointerdown", onPointerDown);
+				return () => document.removeEventListener("pointerdown", onPointerDown);
+			}, [open, close]);
+			(0, react.useEffect)(() => {
+				if (props.disabled && open) close();
+			}, [
+				props.disabled,
+				open,
+				close
+			]);
+			if (isSkinActive()) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("select", {
+				id,
+				className: settings_card_module_css_default.select,
+				value,
+				disabled: props.disabled,
+				onChange: (event) => {
+					props.onEdit(event.target.value);
+				},
+				children: options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+					value: option.value,
+					children: option.label
+				}, option.value))
+			});
+			const label = options.find((option) => option.value === value)?.label ?? "";
+			const popupClass = closing ? `${settings_card_module_css_default.selectPopup} ${settings_card_module_css_default.selectPopupClose}` : phase === "open" ? `${settings_card_module_css_default.selectPopup} ${settings_card_module_css_default.selectPopupOpen}` : settings_card_module_css_default.selectPopup;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: settings_card_module_css_default.selectWrap,
+				ref: wrapRef,
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					id,
+					className: `${settings_card_module_css_default.select} ${settings_card_module_css_default.selectButton}`,
+					disabled: props.disabled,
+					"aria-haspopup": "listbox",
+					"aria-expanded": open,
+					"aria-activedescendant": open ? `${id}-o${activeIndex}` : void 0,
+					"aria-invalid": props.invalid || void 0,
+					onClick: onTriggerClick,
+					onKeyDown,
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: settings_card_module_css_default.selectLabel,
+						children: label
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+						width: "14",
+						height: "14",
+						viewBox: "0 0 14 14",
+						fill: "none",
+						xmlns: "http://www.w3.org/2000/svg",
+						className: open ? `${settings_card_module_css_default.selectChevron} ${settings_card_module_css_default.selectChevronOpen}` : settings_card_module_css_default.selectChevron,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+							d: "M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z",
+							fill: "currentColor"
+						})
+					})]
+				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: popupClass,
+					role: "listbox",
+					ref: popupRef,
+					children: options.map((option, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						id: `${id}-o${index}`,
+						role: "option",
+						"aria-selected": option.value === value,
+						className: `${settings_card_module_css_default.selectOption}${option.value === value ? ` ${settings_card_module_css_default.selectOptionSelected}` : ""}${index === activeIndex && !closing ? ` ${settings_card_module_css_default.selectOptionActive}` : ""}`,
+						onClick: () => {
+							commit(index);
+						},
+						children: option.label
+					}, option.value))
+				}) : null]
+			});
+		}
 		/** A staged boolean field: 继承 / 开 / 关. */
 		function BooleanField(props) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -761,28 +1099,26 @@ window.__ModuleLoader__.load({
 							})]
 						}) : null]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectField, {
 						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", {
+						options: [
+							{
 								value: "",
-								children: props.inheritLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: props.inheritLabel
+							},
+							{
 								value: "true",
-								children: props.onLabel
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+								label: props.onLabel
+							},
+							{
 								value: "false",
-								children: props.offLabel
-							})
-						]
+								label: props.offLabel
+							}
+						],
+						value: props.text,
+						disabled: props.disabled,
+						invalid: props.invalid,
+						onEdit: props.onEdit
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: settings_card_module_css_default.hint,
@@ -816,21 +1152,16 @@ window.__ModuleLoader__.load({
 							})]
 						}) : null]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("select", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectField, {
 						id: props.id,
-						className: settings_card_module_css_default.select,
+						options: [{
+							value: "",
+							label: props.inheritLabel
+						}, ...props.choices],
 						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))]
+						invalid: props.invalid,
+						onEdit: props.onEdit
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
 						className: props.invalid ? settings_card_module_css_default.invalid : settings_card_module_css_default.hint,
@@ -1365,6 +1696,8 @@ window.__ModuleLoader__.load({
 			"pet.state.loading": "宠物正在赶来…",
 			"pet.state.error": "宠物迷路了（连接失败）",
 			"pet.openSessionHint": "点击跳转到对应会话",
+			"pet.moreSessions": "展开其余 {n} 个会话的气泡",
+			"pet.collapseSessions": "收起会话气泡",
 			"settings.title": "宠物",
 			"settings.description": "选择宠物并调整它的显示布局。",
 			"settings.pet": "宠物",
@@ -1409,6 +1742,8 @@ window.__ModuleLoader__.load({
 			"pet.state.loading": "The pet is on its way…",
 			"pet.state.error": "The pet is lost (connection failed)",
 			"pet.openSessionHint": "Click to jump to this session",
+			"pet.moreSessions": "Expand {n} more session bubbles",
+			"pet.collapseSessions": "Collapse session bubbles",
 			"settings.title": "Pet",
 			"settings.description": "Pick a pet and tune its display layout.",
 			"settings.pet": "Pet",
@@ -1632,6 +1967,7 @@ window.__ModuleLoader__.load({
 					});
 					const container = document.createElement("div");
 					container.dataset.dshPetRoot = "";
+					container.dataset.dshPlugin = "pet";
 					document.body.appendChild(container);
 					const petRoot = (0, react_dom_client.createRoot)(container);
 					petRoot.render((0, react.createElement)(PetDockEntry, {