@artenx/dshb 0.1.25 → 0.1.26

package/lib/client.js

@@ -1516,7 +1516,8 @@ window.__ModuleLoader__.load({
 					document.querySelectorAll(`[${FRAME_ATTR}="stats"]`).forEach((el) => {
 						if (!el.isConnected || !STATS_LINE_RE.test((el.textContent ?? "").trim())) el.removeAttribute(FRAME_ATTR);
 					});
-					const cands = Array.from(document.querySelectorAll("span, div")).filter((el) => {
+					const scope = document.querySelector("[class*=\"composerStack\"]") ?? document.querySelector("[class*=\"composer\"]") ?? document;
+					const cands = Array.from(scope.querySelectorAll("span, div")).filter((el) => {
 						if (!isStatsText(el)) return false;
 						if (getComputedStyle(el).display === "contents") return false;
 						return true;
@@ -1538,15 +1539,22 @@ window.__ModuleLoader__.load({
 					}
 				};
 				mark();
-				const mo = new MutationObserver(() => {
-					if (narrow.matches) mark();
-				});
+				let raf = 0;
+				const scheduleMark = () => {
+					if (raf !== 0 || !narrow.matches) return;
+					raf = requestAnimationFrame(() => {
+						raf = 0;
+						mark();
+					});
+				};
+				const mo = new MutationObserver(scheduleMark);
 				mo.observe(document.documentElement, {
 					childList: true,
 					subtree: true
 				});
 				narrow.addEventListener("change", mark);
 				return () => {
+					if (raf !== 0) cancelAnimationFrame(raf);
 					mo.disconnect();
 					narrow.removeEventListener("change", mark);
 				};
@@ -1566,36 +1574,54 @@ window.__ModuleLoader__.load({
 			"overflow-y",
 			"box-sizing"
 		];
+		/** 幂等写入 important 内联样式：值未变化时跳过，避免 MutationObserver(attributes) 自触发循环。 */
+		function setImportantIfChanged(el, prop, value) {
+			if (el.style.getPropertyValue(prop) === value && el.style.getPropertyPriority(prop) === "important") return;
+			el.style.setProperty(prop, value, "important");
+		}
+		/** 当前视口下的可视区域（手机键盘弹出时 visualViewport 与布局视口错位）。 */
+		function visibleViewport() {
+			const vv = window.visualViewport;
+			if (vv) return {
+				vw: vv.width,
+				vh: vv.offsetTop + vv.height,
+				top: vv.offsetTop
+			};
+			return {
+				vw: window.innerWidth,
+				vh: window.innerHeight,
+				top: 0
+			};
+		}
 		/** Keep the model menu anchored to its trigger while fitting it in the viewport. */
 		function positionAnchoredMenu(el, triggerRect, maxWidth, maxHeight) {
 			const margin = 8;
-			const vw = window.innerWidth;
-			const vh = window.innerHeight;
-			el.style.setProperty("position", "fixed", "important");
-			el.style.setProperty("box-sizing", "border-box", "important");
-			el.style.setProperty("left", "0", "important");
-			el.style.setProperty("right", "auto", "important");
-			el.style.setProperty("top", "0", "important");
-			el.style.setProperty("bottom", "auto", "important");
-			el.style.setProperty("min-width", "0", "important");
-			el.style.setProperty("max-width", `${Math.max(0, Math.min(maxWidth, vw - 16))}px`, "important");
-			el.style.setProperty("max-height", `${Math.max(0, Math.min(maxHeight, vh - 16))}px`, "important");
-			el.style.setProperty("overflow-y", "auto", "important");
+			const { vw, vh } = visibleViewport();
+			setImportantIfChanged(el, "position", "fixed");
+			setImportantIfChanged(el, "box-sizing", "border-box");
+			setImportantIfChanged(el, "left", "0");
+			setImportantIfChanged(el, "right", "auto");
+			setImportantIfChanged(el, "top", "0");
+			setImportantIfChanged(el, "bottom", "auto");
+			setImportantIfChanged(el, "min-width", "0");
+			setImportantIfChanged(el, "max-width", `${Math.max(0, Math.min(maxWidth, vw - 16))}px`);
+			setImportantIfChanged(el, "max-height", `${Math.max(0, Math.min(maxHeight, vh - 16))}px`);
+			setImportantIfChanged(el, "overflow-y", "auto");
 			let width = el.offsetWidth;
 			let height = el.offsetHeight;
-			const spaceAbove = Math.max(0, triggerRect.top - 16);
+			const { top: viewportTop } = visibleViewport();
+			const spaceAbove = Math.max(0, triggerRect.top - viewportTop - 16);
 			const spaceBelow = Math.max(0, vh - triggerRect.bottom - 16);
 			const expandUp = height <= spaceAbove || spaceAbove >= spaceBelow;
 			const available = expandUp ? spaceAbove : spaceBelow;
 			if (height > available) {
-				el.style.setProperty("max-height", `${Math.max(0, available - margin)}px`, "important");
+				setImportantIfChanged(el, "max-height", `${Math.max(0, available - margin)}px`);
 				height = el.offsetHeight;
 				width = el.offsetWidth;
 			}
 			const top = expandUp ? triggerRect.top - margin - height : triggerRect.bottom + margin;
-			const left = Math.max(margin, Math.min(triggerRect.right - width, vw - width - margin));
-			el.style.setProperty("left", `${left}px`, "important");
-			el.style.setProperty("top", `${Math.max(margin, Math.min(top, vh - height - margin))}px`, "important");
+			setImportantIfChanged(el, "left", `${Math.max(margin, Math.min(triggerRect.right - width, vw - width - margin))}px`);
+			setImportantIfChanged(el, "top", `${Math.max(viewportTop + margin, Math.min(top, vh - height - margin))}px`);
 		}
 		/**
 		* 模型名多为纯连字符词（DeepSeek-V4-Flash-Vision-Exp）；white-space:normal 下
@@ -1664,9 +1690,13 @@ window.__ModuleLoader__.load({
 		function installModelMenuPosition(ctx) {
 			ctx.effect(() => {
 				const narrow = window.matchMedia(NARROW_QUERY);
+				let fallbackLast = 0;
 				const findMenus = () => {
 					const byHash = Array.from(document.querySelectorAll("[class*=\"7KE1Ra_menu\"]"));
 					if (byHash.length > 0) return byHash;
+					const now = Date.now();
+					if (now - fallbackLast < 500) return [];
+					fallbackLast = now;
 					return Array.from(document.querySelectorAll("[class*=\"_menu\"]")).filter((el) => el.querySelector("[class*=\"cellLabel\"], [class*=\"modelName\"]") !== null);
 				};
 				const findTrigger = (menu) => {
@@ -1727,16 +1757,42 @@ window.__ModuleLoader__.load({
 				const mo = new MutationObserver(() => requestAnimationFrame(sync));
 				mo.observe(document.documentElement, {
 					childList: true,
-					subtree: true
+					subtree: true,
+					attributes: true,
+					attributeFilter: ["style"]
 				});
 				narrow.addEventListener("change", sync);
 				window.addEventListener("resize", sync);
 				window.addEventListener("scroll", sync, true);
+				window.visualViewport?.addEventListener("resize", sync);
+				window.visualViewport?.addEventListener("scroll", sync);
+				let lastPointerTarget = null;
+				const keyboardLikelyOpen = () => {
+					const vv = window.visualViewport;
+					if (!vv) return false;
+					return window.innerHeight - vv.height > 150;
+				};
+				const onPointerDown = (event) => {
+					lastPointerTarget = event.target instanceof Element ? event.target : null;
+				};
+				const onFocusIn = (event) => {
+					if (!narrow.matches || !(event.target instanceof Element) || keyboardLikelyOpen()) return;
+					const input = event.target.closest("input");
+					if (!input || input.closest("[class*=\"7KE1Ra_menu\"], [class*=\"_menu\"]") === null) return;
+					if (lastPointerTarget !== null && (lastPointerTarget === input || input.contains(lastPointerTarget))) return;
+					input.blur();
+				};
+				document.addEventListener("pointerdown", onPointerDown, true);
+				document.addEventListener("focusin", onFocusIn, true);
 				return () => {
 					mo.disconnect();
 					narrow.removeEventListener("change", sync);
 					window.removeEventListener("resize", sync);
 					window.removeEventListener("scroll", sync, true);
+					window.visualViewport?.removeEventListener("resize", sync);
+					window.visualViewport?.removeEventListener("scroll", sync);
+					document.removeEventListener("pointerdown", onPointerDown, true);
+					document.removeEventListener("focusin", onFocusIn, true);
 				};
 			}, "dshb-mobile: model menu position");
 		}
@@ -1757,20 +1813,22 @@ window.__ModuleLoader__.load({
 						const rootRect = root.getBoundingClientRect();
 						if (rootRect.width === 0 && rootRect.height === 0) continue;
 						const gap = 8;
-						panel.style.setProperty("position", "fixed", "important");
-						panel.style.setProperty("top", "auto", "important");
-						panel.style.setProperty("bottom", `${window.innerHeight - rootRect.top + gap}px`, "important");
-						panel.style.setProperty("left", "auto", "important");
-						panel.style.setProperty("right", `${Math.max(gap, window.innerWidth - rootRect.right)}px`, "important");
-						panel.style.setProperty("max-height", `${Math.max(160, rootRect.top - 16)}px`, "important");
-						panel.style.setProperty("overflow-y", "auto", "important");
+						setImportantIfChanged(panel, "position", "fixed");
+						setImportantIfChanged(panel, "top", "auto");
+						setImportantIfChanged(panel, "bottom", `${window.innerHeight - rootRect.top + gap}px`);
+						setImportantIfChanged(panel, "left", "auto");
+						setImportantIfChanged(panel, "right", `${Math.max(gap, window.innerWidth - rootRect.right)}px`);
+						setImportantIfChanged(panel, "max-height", `${Math.max(160, rootRect.top - 16)}px`);
+						setImportantIfChanged(panel, "overflow-y", "auto");
 					}
 				};
 				sync();
 				const mo = new MutationObserver(() => requestAnimationFrame(sync));
 				mo.observe(document.documentElement, {
 					childList: true,
-					subtree: true
+					subtree: true,
+					attributes: true,
+					attributeFilter: ["style"]
 				});
 				narrow.addEventListener("change", sync);
 				window.addEventListener("resize", sync);
@@ -2112,7 +2170,14 @@ window.__ModuleLoader__.load({
 					}
 				}
 			};
-			new MutationObserver(scan).observe(document.body, {
+			let raf = 0;
+			new MutationObserver(() => {
+				if (raf !== 0) return;
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					scan();
+				});
+			}).observe(document.body, {
 				childList: true,
 				subtree: true
 			});
@@ -4651,20 +4716,25 @@ window.__ModuleLoader__.load({
 				"认证": "auth",
 				"工作节点": "dshb-nodes"
 			};
+			let raf = 0;
 			new MutationObserver(() => {
-				const cells = document.querySelectorAll("button[class*=\"navCell\"]");
-				for (const cell of Array.from(cells)) {
-					const label = cell.querySelector("span[class*=\"navLabel\"]");
-					if (!label) continue;
-					const text = label.textContent ?? "";
-					const iconKey = ICON_LABELS[text];
-					if (!iconKey) continue;
-					const iconSlot = cell.querySelector("[class*=\"navIcon\"]");
-					if (!iconSlot) continue;
-					if (iconSlot.getAttribute("data-dshb-icon") === iconKey) continue;
-					iconSlot.innerHTML = ICON_SVG[iconKey] ?? "";
-					iconSlot.setAttribute("data-dshb-icon", iconKey);
-				}
+				if (raf !== 0) return;
+				raf = requestAnimationFrame(() => {
+					raf = 0;
+					const cells = document.querySelectorAll("button[class*=\"navCell\"]");
+					for (const cell of Array.from(cells)) {
+						const label = cell.querySelector("span[class*=\"navLabel\"]");
+						if (!label) continue;
+						const text = label.textContent ?? "";
+						const iconKey = ICON_LABELS[text];
+						if (!iconKey) continue;
+						const iconSlot = cell.querySelector("[class*=\"navIcon\"]");
+						if (!iconSlot) continue;
+						if (iconSlot.getAttribute("data-dshb-icon") === iconKey) continue;
+						iconSlot.innerHTML = ICON_SVG[iconKey] ?? "";
+						iconSlot.setAttribute("data-dshb-icon", iconKey);
+					}
+				});
 			}).observe(document.body, {
 				childList: true,
 				subtree: true