@linxin666/dsh-pet 0.2.3 → 0.2.5

package/lib/client.js

@@ -220,6 +220,78 @@ window.__ModuleLoader__.load({
 			return Math.max(0, Math.min(max, value));
 		}
 		/**
+		* The status decoration ornament (pet-center M5, #567). Renders the active
+		* phase's frame segment as a CSS-background strip at a compact bubble
+		* height; prefers-reduced-motion holds the segment's first frame, and a
+		* missing or undecodable asset simply paints nothing (CSS background
+		* failure) — the bubble text is never disturbed. The span is aria-hidden;
+		* the bubble keeps its own semantics untouched.
+		*/
+		function StatusOrnament(props) {
+			const { decoration, phase } = props;
+			const segment = decoration.phases[phase];
+			const shown = segment !== void 0 && segment !== "hide";
+			const segmentKey = segment !== void 0 && segment !== "hide" ? segment.from + ":" + segment.to : "none";
+			const spanRef = (0, react.useRef)(null);
+			const scale = 18 / decoration.cell.height;
+			const frameWidth = Math.round(decoration.cell.width * scale);
+			const stripWidth = decoration.columns * frameWidth;
+			const durationsKey = decoration.durations.join(",");
+			(0, react.useEffect)(() => {
+				if (segment === void 0 || segment === "hide") return;
+				const el = spanRef.current;
+				if (el === null) return;
+				const position = (index) => -index * frameWidth + "px 0px";
+				const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches === true;
+				el.style.backgroundPosition = position(segment.from);
+				if (reduceMotion || segment.from === segment.to) return;
+				let raf = 0;
+				let index = segment.from;
+				let elapsed = 0;
+				let last = performance.now();
+				const tick = (ts) => {
+					const delta = ts - last;
+					last = ts;
+					elapsed += delta;
+					const duration = decoration.durations[index] ?? 160;
+					if (elapsed >= duration) {
+						elapsed = 0;
+						if (index < segment.to) index += 1;
+						else if (decoration.loop) index = segment.from;
+						el.style.backgroundPosition = position(index);
+					}
+					if (!decoration.loop && index === segment.to) return;
+					raf = requestAnimationFrame(tick);
+				};
+				raf = requestAnimationFrame(tick);
+				return () => cancelAnimationFrame(raf);
+			}, [
+				shown,
+				segmentKey,
+				frameWidth,
+				decoration.loop,
+				durationsKey
+			]);
+			if (!shown) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				ref: spanRef,
+				"aria-hidden": "true",
+				"data-dsh-pet-decoration": decoration.id,
+				style: {
+					display: "inline-block",
+					width: frameWidth,
+					height: 18,
+					marginRight: 6,
+					verticalAlign: "middle",
+					flexShrink: 0,
+					backgroundImage: "url(" + decoration.entryUrl + ")",
+					backgroundSize: stripWidth + "px 18px",
+					backgroundRepeat: "no-repeat",
+					backgroundPosition: "0px 0px"
+				}
+			});
+		}
+		/**
 		* The floating pet. The spritesheet frame advances on requestAnimationFrame
 		* 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
@@ -253,6 +325,21 @@ window.__ModuleLoader__.load({
 			const rows = definition.rows;
 			const tracks = definition.tracks;
 			const sequences = definition.sequences;
+			const panel = definition.panel;
+			const panelLabel = (slot, i18n) => panel?.labels?.[slot] ?? i18n;
+			const panelStat = (slot, i18nKey, values) => {
+				const format = panel?.stats?.[slot] ?? props.t(i18nKey, values);
+				if (panel?.stats?.[slot] === void 0) return format;
+				const all = {
+					rank: snapshot?.affinity.rank ?? "?",
+					n: snapshot?.treats.stocked ?? 0,
+					points: snapshot?.affinity.points ?? 0
+				};
+				let text = format;
+				for (const [name, value] of Object.entries(all)) text = text.replaceAll("{" + name + "}", String(value));
+				return text;
+			};
+			const panelShows = (action) => panel?.actions === void 0 || panel.actions.includes(action);
 			(0, react.useEffect)(() => {
 				if (props.visual !== void 0) return;
 				let cancelled = false;
@@ -392,6 +479,7 @@ window.__ModuleLoader__.load({
 			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;
+			const decoration = snapshot?.decoration;
 			(0, react.useEffect)(() => {
 				if (sessionBubbles.length <= 1) setStackPinned(false);
 			}, [sessionBubbles.length]);
@@ -481,14 +569,17 @@ window.__ModuleLoader__.load({
 						onPointerLeave: () => setStackPeek(false),
 						children: [visibleSessions.map((session, index) => {
 							const speaksWhisper = index === 0 && whisper !== void 0;
-							const bubble = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							const bubble = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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
+								children: [index === 0 && !speaksWhisper && decoration !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusOrnament, {
+									decoration,
+									phase
+								}), 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", {
@@ -506,11 +597,14 @@ window.__ModuleLoader__.load({
 									children: stackOpen ? "×" : "+" + String(sessionBubbles.length - 1)
 								})]
 							}, "primary");
-						}), sessionBubbles.length === 0 && (statusBubble !== void 0 || whisper !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						}), sessionBubbles.length === 0 && (statusBubble !== void 0 || whisper !== void 0) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("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
+							children: [whisper === void 0 && decoration !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StatusOrnament, {
+								decoration,
+								phase
+							}), whisper ?? statusBubble]
 						}, whisper === void 0 ? "status" : "whisper:" + whisper)]
 					}),
 					hovered && dragRef.current === null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -556,7 +650,7 @@ window.__ModuleLoader__.load({
 										setRenaming(false);
 									}
 								},
-								children: props.t("pet.confirm")
+								children: panelLabel("confirm", props.t("pet.confirm"))
 							})]
 						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -566,29 +660,29 @@ window.__ModuleLoader__.load({
 									children: displayName
 								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									className: pet_module_css_default.statRank,
-									children: props.t("pet.rank", { rank: snapshot?.affinity.rank ?? "?" })
+									children: panelStat("rank", "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", {
 									className: pet_module_css_default.statTreats,
-									children: props.t("pet.treats", { n: snapshot?.treats.stocked ?? 0 })
+									children: panelStat("treats", "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 })
+									children: panelStat("points", "pet.points", { points: snapshot?.affinity.points ?? 0 })
 								})]
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								className: pet_module_css_default.actions,
 								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									panelShows("feed") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: props.onFeed,
-										children: props.t("pet.feed")
+										children: panelLabel("feed", props.t("pet.feed"))
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									panelShows("rename") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: () => {
@@ -596,13 +690,13 @@ window.__ModuleLoader__.load({
 											setNameDraft(displayName);
 											setRenaming(true);
 										},
-										children: props.t("pet.rename")
+										children: panelLabel("rename", props.t("pet.rename"))
 									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									panelShows("hide") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										className: pet_module_css_default.action,
 										onClick: props.onHide,
-										children: props.t("pet.hide")
+										children: panelLabel("hide", props.t("pet.hide"))
 									})
 								]
 							})
@@ -695,6 +789,7 @@ window.__ModuleLoader__.load({
 			const downRef = (0, react.useRef)(null);
 			const [error, setError] = (0, react.useState)(null);
 			(0, react.useEffect)(() => {
+				setError(null);
 				const container = containerRef.current;
 				const live2d = props.definition.live2d;
 				if (container === null || live2d === void 0) return void 0;
@@ -917,6 +1012,33 @@ window.__ModuleLoader__.load({
 		//#region src/client/renderers/live2d.ts
 		/** The de-facto tap-motion group of Cubism sample models. */
 		const TAP_GROUP = "TapBody";
+		/**
+		* Keep one screen-appropriate atlas LOD instead of asking Pixi for the
+		* engine's default full mip chain. A user model can legitimately carry an
+		* 8192px texture while the pet itself is only a few hundred pixels tall;
+		* `single-auto` preserves the source for larger renders and generates one
+		* downsampled atlas only when the effective on-screen scale warrants it.
+		*/
+		const TEXTURE_OPTIONS = { lod: "single-auto" };
+		/** Recursively release the activation without invalidating shared texture caches. */
+		const DESTROY_OPTIONS = { children: true };
+		/** Remove only this activation's canvas; `true` would release Pixi globals. */
+		const RENDERER_DESTROY_OPTIONS = { removeView: true };
+		/** Ignore hidden/zero boxes and keep Pixi dimensions stable and integral. */
+		function normalizeRendererSize(width, height) {
+			if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) return void 0;
+			return {
+				width: Math.max(1, Math.round(width)),
+				height: Math.max(1, Math.round(height))
+			};
+		}
+		/** Fit the model from its unscaled dimensions into the current Pixi screen. */
+		function layoutModel(app, model, sourceSize, config) {
+			const fit = Math.min(app.renderer.width / sourceSize.width, app.renderer.height / sourceSize.height) * .92;
+			model.scale.set(fit * (config.scale ?? 1));
+			model.anchor.set(.5);
+			model.position.set(app.renderer.width / 2 + (config.translate?.x ?? 0), app.renderer.height / 2 + (config.translate?.y ?? 0));
+		}
 		let vendorConfigured = false;
 		/** Configure pixi extensions + the Cubism SDK once per page. */
 		function configureOnce(vendor) {
@@ -943,11 +1065,56 @@ window.__ModuleLoader__.load({
 				let disposed = false;
 				let app;
 				let model;
+				let modelAttached = false;
+				let modelSourceSize;
+				let resizeObserver;
+				let resizeTracking = false;
 				let errorListener;
 				let unsubscribe;
 				/** The motion group the current phase maps to (resume target after taps). */
 				let phaseGroup = config.motions.idle;
 				let tapPlaying = false;
+				const stopResizeTracking = () => {
+					resizeTracking = false;
+					resizeObserver?.disconnect();
+					resizeObserver = void 0;
+				};
+				const resizeRenderer = (pixiApp, width, height) => {
+					const next = normalizeRendererSize(width, height);
+					if (disposed || !resizeTracking || next === void 0) return;
+					if (pixiApp.renderer.width === next.width && pixiApp.renderer.height === next.height) return;
+					pixiApp.renderer.resize(next.width, next.height);
+					if (model !== void 0 && modelSourceSize !== void 0) layoutModel(pixiApp, model, modelSourceSize, config);
+				};
+				const trackContainerSize = (pixiApp) => {
+					if (typeof ResizeObserver === "undefined") return;
+					resizeTracking = true;
+					resizeObserver = new ResizeObserver((entries) => {
+						const entry = entries.find((candidate) => candidate.target === ctx.container);
+						if (entry === void 0) return;
+						resizeRenderer(pixiApp, entry.contentRect.width, entry.contentRect.height);
+					});
+					resizeObserver.observe(ctx.container);
+					resizeRenderer(pixiApp, ctx.container.clientWidth, ctx.container.clientHeight);
+				};
+				/** Release every resource currently owned by this activation exactly once. */
+				const destroyResources = () => {
+					stopResizeTracking();
+					unsubscribe?.();
+					unsubscribe = void 0;
+					const currentApp = app;
+					const currentModel = model;
+					const modelOwnedByApp = currentApp !== void 0 && modelAttached;
+					app = void 0;
+					model = void 0;
+					modelSourceSize = void 0;
+					modelAttached = false;
+					try {
+						if (currentModel !== void 0 && !modelOwnedByApp) currentModel.destroy(DESTROY_OPTIONS);
+					} finally {
+						currentApp?.destroy(RENDERER_DESTROY_OPTIONS, DESTROY_OPTIONS);
+					}
+				};
 				const playGroup = (group) => {
 					if (model === void 0) return;
 					const groups = model.internalModel.settings.motions ?? {};
@@ -977,37 +1144,54 @@ window.__ModuleLoader__.load({
 					}
 					configureOnce(vendor);
 					const pixiApp = new vendor.Application();
-					await pixiApp.init({
-						width: Math.max(1, ctx.container.clientWidth || 160),
-						height: Math.max(1, ctx.container.clientHeight || 174),
-						backgroundAlpha: 0,
-						antialias: true,
-						autoDensity: true,
-						preference: "webgl"
-					});
+					const initialSize = normalizeRendererSize(ctx.container.clientWidth, ctx.container.clientHeight) ?? {
+						width: 160,
+						height: 174
+					};
+					try {
+						await pixiApp.init({
+							width: initialSize.width,
+							height: initialSize.height,
+							backgroundAlpha: 0,
+							antialias: true,
+							autoDensity: true,
+							preference: "webgl"
+						});
+					} catch (error) {
+						try {
+							pixiApp.destroy(RENDERER_DESTROY_OPTIONS, DESTROY_OPTIONS);
+						} catch {}
+						throw error;
+					}
 					if (disposed) {
-						pixiApp.destroy(true, { children: true });
+						pixiApp.destroy(RENDERER_DESTROY_OPTIONS, DESTROY_OPTIONS);
 						return;
 					}
+					app = pixiApp;
 					pixiApp.canvas.style.display = "block";
 					pixiApp.canvas.style.width = "100%";
 					pixiApp.canvas.style.height = "100%";
 					ctx.container.appendChild(pixiApp.canvas);
+					trackContainerSize(pixiApp);
 					const loaded = await vendor.Live2DModel.from(config.modelUrl, {
+						autoUpdate: false,
 						autoHitTest: false,
-						autoFocus: false
+						autoFocus: false,
+						textureOptions: TEXTURE_OPTIONS
 					});
+					model = loaded;
 					if (disposed) {
-						pixiApp.destroy(true, { children: true });
+						destroyResources();
 						return;
 					}
-					app = pixiApp;
-					model = loaded;
-					const fit = Math.min(pixiApp.renderer.width / Math.max(1, loaded.width), pixiApp.renderer.height / Math.max(1, loaded.height)) * .92;
-					loaded.scale.set(fit * (config.scale ?? 1));
-					loaded.anchor.set(.5);
-					loaded.position.set(pixiApp.renderer.width / 2 + (config.translate?.x ?? 0), pixiApp.renderer.height / 2 + (config.translate?.y ?? 0));
+					modelSourceSize = {
+						width: Math.max(1, loaded.width),
+						height: Math.max(1, loaded.height)
+					};
+					layoutModel(pixiApp, loaded, modelSourceSize, config);
 					pixiApp.stage.addChild(loaded);
+					modelAttached = true;
+					loaded.automator.autoUpdate = true;
 					loaded.on("motionFinish", () => {
 						if (tapPlaying) {
 							tapPlaying = false;
@@ -1018,18 +1202,17 @@ window.__ModuleLoader__.load({
 					unsubscribe = ctx.phase.subscribe(applyPhase);
 				};
 				boot().catch(() => {
-					if (!disposed) errorListener?.("load-failed");
+					try {
+						destroyResources();
+					} finally {
+						if (!disposed) errorListener?.("load-failed");
+					}
 				});
 				return {
 					dispose() {
 						if (disposed) return;
 						disposed = true;
-						unsubscribe?.();
-						model = void 0;
-						if (app !== void 0) {
-							app.destroy(true, { children: true });
-							app = void 0;
-						}
+						destroyResources();
 					},
 					tap(x, y) {
 						const current = model;
@@ -1717,7 +1900,8 @@ window.__ModuleLoader__.load({
 				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));
+				const pending = /* @__PURE__ */ new Map();
+				for (const item of plan) pending.set(item.field, this.staged.get(item.field));
 				this.saving = true;
 				this.failed = false;
 				this.failedReason = void 0;
@@ -1730,9 +1914,9 @@ window.__ModuleLoader__.load({
 						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);
+				for (const [field, before] of pending) if (landed.has(field) && this.staged.get(field) === before) this.staged.delete(field);
 				this.saving = false;
-				this.failed = landed.size !== fields.size;
+				this.failed = landed.size !== pending.size;
 				this.publish();
 			}
 			/** The scope's batch surface when it supports one; undefined conservatively otherwise. */
@@ -1875,6 +2059,7 @@ window.__ModuleLoader__.load({
 			constructor(scope) {
 				this.form = new CardForm(scope, [
 					booleanField("enabled"),
+					booleanField("decorationEnabled"),
 					booleanField("visible"),
 					numberField("size"),
 					numberField("right"),
@@ -1882,8 +2067,10 @@ window.__ModuleLoader__.load({
 					choiceField("petId", this.petChoices)
 				]);
 				this.store = this.form.bind(() => this.projection());
-				this.loadPets();
-				this.loadDiagnostics();
+				window.setTimeout(() => {
+					this.loadPets();
+					this.loadDiagnostics();
+				}, 0);
 			}
 			/** Fetch registry diagnostics once (soft-fail: an empty list on error). */
 			async loadDiagnostics() {
@@ -1914,6 +2101,7 @@ window.__ModuleLoader__.load({
 				return {
 					...this.form.shell(),
 					enabled: this.form.field("enabled"),
+					decorationEnabled: this.form.field("decorationEnabled"),
 					visible: this.form.field("visible"),
 					size: this.form.field("size"),
 					right: this.form.field("right"),
@@ -1984,6 +2172,22 @@ window.__ModuleLoader__.load({
 							props.resetField("enabled");
 						}
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(BooleanField, {
+						id: "settings-pet-decoration",
+						label: t("settings.decoration"),
+						hint: t("settings.decorationHint"),
+						inheritLabel: t("settings.inherit"),
+						onLabel: t("settings.on"),
+						offLabel: t("settings.off"),
+						...fieldProps,
+						...state.decorationEnabled,
+						onEdit: (text) => {
+							props.edit("decorationEnabled", text);
+						},
+						onReset: () => {
+							props.resetField("decorationEnabled");
+						}
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChoiceField, {
 						id: "settings-pet-pet",
 						label: t("settings.pet"),
@@ -2115,6 +2319,8 @@ window.__ModuleLoader__.load({
 			"settings.petHint": "选择显示哪只宠物；每只宠物独立命名，可在宠物悬浮面板改名。",
 			"settings.enabled": "启用宠物",
 			"settings.enabledHint": "关闭后隐藏宠物并停止轮询，可在设置里重新启用。",
+			"settings.decoration": "状态装饰",
+			"settings.decorationHint": "在宠物状态气泡里显示喷水鲸鱼等状态装饰；关闭后气泡只剩文字。",
 			"settings.visible": "显示宠物",
 			"settings.visibleHint": "关闭后宠物隐藏，可从聊天输入区重新召唤。",
 			"settings.size": "大小（px）",
@@ -2166,6 +2372,8 @@ window.__ModuleLoader__.load({
 			"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.decoration": "Status decoration",
+			"settings.decorationHint": "Show ornaments like the spouting whale inside the pet status bubbles; when off, bubbles stay text-only.",
 			"settings.visible": "Show the pet",
 			"settings.visibleHint": "When off, the pet hides; summon it again from the input row.",
 			"settings.size": "Size (px)",