@linxin666/dsh-pet 0.2.7 → 0.2.9

package/lib/client.js

@@ -245,26 +245,29 @@ window.__ModuleLoader__.load({
 				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 timer = 0;
 				let index = segment.from;
 				let elapsed = 0;
 				let last = performance.now();
-				const tick = (ts) => {
-					const delta = ts - last;
-					last = ts;
+				const tick = () => {
+					const now = performance.now();
+					const delta = now - last;
+					last = now;
 					elapsed += delta;
-					const duration = decoration.durations[index] ?? 160;
+					const duration = decoration.durations[index] ?? 120;
 					if (elapsed >= duration) {
-						elapsed = 0;
-						if (index < segment.to) index += 1;
-						else if (decoration.loop) index = segment.from;
+						do {
+							elapsed -= duration;
+							if (index < segment.to) index += 1;
+							else if (decoration.loop) index = segment.from;
+						} while (elapsed >= duration);
 						el.style.backgroundPosition = position(index);
 					}
 					if (!decoration.loop && index === segment.to) return;
-					raf = requestAnimationFrame(tick);
+					timer = window.setTimeout(tick, Math.max(1, duration - elapsed));
 				};
-				raf = requestAnimationFrame(tick);
-				return () => cancelAnimationFrame(raf);
+				timer = window.setTimeout(tick, 0);
+				return () => window.clearTimeout(timer);
 			}, [
 				shown,
 				segmentKey,
@@ -1233,6 +1236,48 @@ window.__ModuleLoader__.load({
 			}
 		};
 		//#endregion
+		//#region src/client/ui-teardown.ts
+		/**
+		* Cross-bundle-instance teardown slot for the page-global pet root
+		* (issue #785).
+		*
+		* A client bundle swap (HMR rebuilt frame, plugin update, duplicate
+		* injection) runs a new apply body while the previous instance's fiber
+		* may still be draining. Module state does not survive the swap, so a
+		* closure guard only sees one apply body and the previous instance's
+		* container keeps sitting on document.body: the page shows two pets
+		* until a full refresh. The slot rides globalThis (which does survive)
+		* so a re-apply can find the previous instance and unmount its React
+		* root cleanly before mounting its own; the previous fiber's later
+		* disposal stays a no-op through the idempotent teardowns.
+		*/
+		const SLOT = Symbol.for("dsh-pet.client-ui-teardown");
+		/**
+		* Claim the page-global pet UI slot with the current instance's teardown
+		* (React root unmount + container removal + poll stop).
+		* @param teardown - what a later instance runs to take the slot over.
+		* @returns a disposer that clears the slot when the current instance's
+		* UI is torn down (settings toggle, takeover, or fiber disposal).
+		*/
+		function registerPetUiTeardown(teardown) {
+			const slot = globalThis;
+			slot[SLOT] = teardown;
+			return () => {
+				if (slot[SLOT] === teardown) slot[SLOT] = void 0;
+			};
+		}
+		/**
+		* Run the previous instance's teardown if one is registered, so the
+		* re-applying instance becomes the sole owner of the page-global pet
+		* root. No-op when the previous fiber already tore down cleanly.
+		*/
+		function takeoverPetUiTeardown() {
+			const slot = globalThis;
+			const teardown = slot[SLOT];
+			slot[SLOT] = void 0;
+			teardown?.();
+		}
+		//#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_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;flex-shrink:0;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";
@@ -2488,8 +2533,18 @@ window.__ModuleLoader__.load({
 				};
 			});
 			let disposeUi;
+			let clearUiTeardown;
+			let uiDead = false;
+			const killUi = () => {
+				if (uiDead) return;
+				uiDead = true;
+				clearUiTeardown?.();
+				clearUiTeardown = void 0;
+				disposeUi?.();
+				disposeUi = void 0;
+			};
 			const syncUi = () => {
-				if (enabled() && disposeUi === void 0) {
+				if (!uiDead && enabled() && disposeUi === void 0) {
 					const petStore = createPetStore().create();
 					const setSnapshot = petStore.actions.setSnapshot;
 					const setPets = petStore.actions.setPets;
@@ -2590,6 +2645,8 @@ window.__ModuleLoader__.load({
 							setFeedback(null);
 						}
 					});
+					takeoverPetUiTeardown();
+					for (const stale of Array.from(document.querySelectorAll("div[data-dsh-pet-root]"))) stale.remove();
 					const container = document.createElement("div");
 					container.dataset.dshPetRoot = "";
 					container.dataset.dshPlugin = "pet";
@@ -2599,18 +2656,31 @@ window.__ModuleLoader__.load({
 						...injected(),
 						t
 					}));
+					let uiGone = false;
 					disposeUi = () => {
+						if (uiGone) return;
+						uiGone = true;
+						clearUiTeardown?.();
+						clearUiTeardown = void 0;
 						petRoot.unmount();
 						container.remove();
 						disposePoll();
 						disposeUi = void 0;
 					};
-				} else if (!enabled() && disposeUi !== void 0) {
+					clearUiTeardown = registerPetUiTeardown(() => {
+						uiDead = true;
+						disposeUi?.();
+					});
+				} else if (!uiDead && !enabled() && disposeUi !== void 0) {
 					disposeUi();
 					disposeUi = void 0;
 				}
 			};
-			settingsScope.subscribe(syncUi);
+			const unsubscribeSettings = settingsScope.subscribe(syncUi);
+			ctx.effect(() => () => {
+				unsubscribeSettings();
+				killUi();
+			}, "pet: client lifecycle");
 			syncUi();
 		}
 		//#endregion