dsh-any-background 0.2.2 → 0.2.4

package/lib/client.js

@@ -47,6 +47,13 @@ window.__ModuleLoader__.load({
 			bgTitle: "背景",
 			bgChoose: "选择图片或视频",
 			bgRemove: "移除背景",
+			bgFromUrl: "从网址",
+			bgUrlPlaceholder: "粘贴图片网址 https://…",
+			bgUrlApply: "应用",
+			bgUrlCancel: "取消",
+			bgUrlApplying: "加载中…",
+			bgUrlBadHttp: "仅支持 http/https 图片网址",
+			bgUrlFail: "获取图片失败",
 			bgEdit: "编辑位置",
 			bgEditLocked: "仅「适应」模式可编辑位置",
 			wpOpacity: "背景透明度",
@@ -145,6 +152,13 @@ window.__ModuleLoader__.load({
 			bgTitle: "Background",
 			bgChoose: "Choose image or video",
 			bgRemove: "Remove background",
+			bgFromUrl: "From URL",
+			bgUrlPlaceholder: "Paste an image URL https://…",
+			bgUrlApply: "Apply",
+			bgUrlCancel: "Cancel",
+			bgUrlApplying: "Loading…",
+			bgUrlBadHttp: "Only http/https image URLs are supported",
+			bgUrlFail: "Could not fetch the image",
 			bgEdit: "Edit position",
 			bgEditLocked: "Position editing is only available in Fit mode",
 			wpOpacity: "Background opacity",
@@ -556,6 +570,40 @@ window.__ModuleLoader__.load({
 		async function persistVideo(dataUrl) {
 			return await rpcCall("setVideo", { dataUrl }) === true;
 		}
+		/** Download a wallpaper from a network URL and persist it into the local slot
+		*  (the host replaces wallpaper.jpg). Returns the freshly stored data-URL on
+		*  success, or the host's failure message. */
+		async function setWallpaperFromUrl(url) {
+			if (!rpcCallFn) return {
+				ok: false,
+				error: "rpc not ready"
+			};
+			let res;
+			try {
+				res = await rpcCallFn(rpcEndpoint("setWallpaperUrl"), { url });
+			} catch (e) {
+				return {
+					ok: false,
+					error: e instanceof Error ? e.message : String(e)
+				};
+			}
+			if (!res) return {
+				ok: false,
+				error: "no response"
+			};
+			if (res.ok !== true) return {
+				ok: false,
+				error: res.error?.message ?? "request failed"
+			};
+			const v = res.value;
+			return v?.ok === true ? {
+				ok: true,
+				dataUrl: v.dataUrl ?? null
+			} : {
+				ok: false,
+				error: v?.error ?? "failed"
+			};
+		}
 		/** Upload a video's raw bytes over HTTP (MIME in Content-Type, body untouched
 		*  — no base64 inflation that would blow the RPC body limit on large clips). */
 		async function uploadVideo(blob, mime) {
@@ -669,13 +717,13 @@ window.__ModuleLoader__.load({
 					"--dsw-alias-state-error-secondary": "#ff8aa0",
 					"--dsw-alias-state-success-primary": "#3ddc84",
 					"--dsw-alias-state-success-secondary": "#69eea4",
-					"--dsw-alias-state-success-tertiary": "hsl(152,70%,62%)",
+					"--dsw-alias-state-success-tertiary": "#233c2c",
 					"--dsw-alias-state-warn-primary": "#ffb347",
 					"--dsw-alias-state-warn-secondary": "#ffc980",
-					"--dsw-alias-state-warn-tertiary": "#dd8629",
+					"--dsw-alias-state-warn-tertiary": "#27241f",
 					"--dsw-alias-state-warn-label": "#dd8629",
 					"--dsw-alias-state-business-primary": "#679efe",
-					"--dsw-alias-state-business-tertiary": "#6f7fa8",
+					"--dsw-alias-state-business-tertiary": "#34415b",
 					"--dsw-specific-sidebar-fill": hsl(h(0), s(0), l(-.06)),
 					"--dsw-specific-sidebar-nav-item-active": hsl(h(0), s(0), l(.04)),
 					"--dsw-specific-sidebar-nav-item-hover": hsl(h(0), s(0), l(0)),
@@ -1986,6 +2034,36 @@ window.__ModuleLoader__.load({
 				viewTargets[i] = null;
 			});
 		}
+		const TABLE_FIX_RULE = [
+			".md-table-wide {",
+			"  --dsh-table-spare: 0px !important;",
+			"  --dsh-table-lead: 0px !important;",
+			"  box-sizing: border-box !important;",
+			"  width: 100% !important;",
+			"  max-width: 100% !important;",
+			"  margin-left: 0 !important;",
+			"  padding-left: 0 !important;",
+			"  padding-bottom: 0 !important;",
+			"  overflow-x: auto !important;",
+			"}"
+		].join("\n");
+		let tableFixStyleEl = null;
+		/** Toggle the wide-table clamp according to the chat region's opacity & blur. */
+		function syncTableFix() {
+			if (!(rChatTextOpacity() > 0 || rBlurs().chat > 0)) {
+				if (tableFixStyleEl !== null) {
+					tableFixStyleEl.remove();
+					tableFixStyleEl = null;
+				}
+				return;
+			}
+			if (tableFixStyleEl === null) {
+				tableFixStyleEl = document.createElement("style");
+				tableFixStyleEl.dataset.plugin = "dsh-any-background-table-fix";
+				tableFixStyleEl.textContent = TABLE_FIX_RULE;
+			}
+			if (!tableFixStyleEl.isConnected) document.head.appendChild(tableFixStyleEl);
+		}
 		/** Re-derive the conversation view cards from the current config. Cheap
 		*  enough for live slider drags; the card structure is applied unconditionally
 		*  once the host exists so the layout never reflows when a slider leaves zero. */
@@ -2011,6 +2089,7 @@ window.__ModuleLoader__.load({
 				target.setAttribute(spec.mark, "1");
 				setBlur(target, blurPx);
 			});
+			syncTableFix();
 		}
 		let partsObserver = null;
 		/** Watch for the AppFrame mounting so persisted blurs land even when the shell
@@ -2329,6 +2408,8 @@ window.__ModuleLoader__.load({
 				tokensRaf = null;
 			}
 			pendingOps = null;
+			tableFixStyleEl?.remove();
+			tableFixStyleEl = null;
 			setBlur(frameEl, 0);
 			setBlur(sidebarEl, 0);
 			setBlur(centerEl, 0);
@@ -2475,6 +2556,9 @@ window.__ModuleLoader__.load({
 .dab-num:focus{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
 .dab-num::-webkit-outer-spin-button,.dab-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
 .dab-num{-moz-appearance:textfield;appearance:textfield}
+.dab-urlinput{flex:1;min-width:180px;height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-2);color:var(--dsw-alias-label-primary);font-size:12.5px;outline:none;transition:border-color .2s}
+.dab-urlinput::placeholder{color:var(--dsw-alias-label-quaternary)}
+.dab-urlinput:focus{border-color:var(--dsw-alias-brand-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--dsw-alias-brand-primary) 18%,transparent)}
 .dab-swatch-lg{height:38px;border-radius:10px;border:1px solid var(--dsw-alias-border-l2);box-shadow:inset 0 0 14px rgba(0,0,0,.1);transition:transform .3s ease}
 .dab-swatch-lg:hover{transform:scale(1.02)}
 
@@ -2774,6 +2858,15 @@ window.__ModuleLoader__.load({
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2.8 13.8h10.4" })
 			]
 		});
+		const LinkIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
+			size,
+			className,
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M6.6 9.4 9.4 6.6" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5.9 11.1l-1.4 1.4a2.6 2.6 0 0 1-3.7-3.7L3.5 6.8" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10.1 4.9l1.4-1.4a2.6 2.6 0 0 1 3.7 3.7l-2.1 2.1" })
+			]
+		});
 		const LockIcon = ({ size, className }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Glyph, {
 			size,
 			className,
@@ -4090,7 +4183,7 @@ window.__ModuleLoader__.load({
 							}),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
-								className: "dab-btn dab-btn-primary",
+								className: "dab-btn",
 								onClick: () => onCommit(zoom, (pos.x + imgSize.w * zoom / 2) / pw, (pos.y + imgSize.h * zoom / 2) / ph, imgRef.current?.naturalWidth ?? 0, imgRef.current?.naturalHeight ?? 0),
 								children: t("editorCommit")
 							})
@@ -4135,6 +4228,10 @@ window.__ModuleLoader__.load({
 			const [editorOpen, setEditorOpen] = (0, react.useState)(false);
 			const [dragOver, setDragOver] = (0, react.useState)(false);
 			const [spinTick, setSpinTick] = (0, react.useState)(0);
+			const [urlOpen, setUrlOpen] = (0, react.useState)(false);
+			const [urlVal, setUrlVal] = (0, react.useState)("");
+			const [urlBusy, setUrlBusy] = (0, react.useState)(false);
+			const [urlErr, setUrlErr] = (0, react.useState)(null);
 			const [mode, setModeState] = (0, react.useState)(rBgMode());
 			const isVideo = backgroundType === "video";
 			const isStatic = backgroundType === "image" || isVideo;
@@ -4155,6 +4252,22 @@ window.__ModuleLoader__.load({
 				const f = e.dataTransfer.files?.[0];
 				if (f && (f.type.startsWith("image/") || f.type.startsWith("video/"))) onFileSelect(f);
 			};
+			const applyUrl = async () => {
+				const u = urlVal.trim();
+				if (!/^https?:\/\//i.test(u)) {
+					setUrlErr(t("bgUrlBadHttp"));
+					return;
+				}
+				setUrlBusy(true);
+				setUrlErr(null);
+				const r = await setWallpaperFromUrl(u);
+				setUrlBusy(false);
+				if (r.ok) {
+					setWp(r.dataUrl ?? null);
+					setUrlOpen(false);
+					setUrlVal("");
+				} else setUrlErr(r.error === "invalid url" || r.error === "unsupported scheme" ? t("bgUrlBadHttp") : r.error ?? t("bgUrlFail"));
+			};
 			const switchToStatic = () => {
 				if (isStatic) return;
 				setBgType(isVideo || cfg.videoMime !== null ? "video" : "image");
@@ -4315,41 +4428,105 @@ window.__ModuleLoader__.load({
 				!isGenerated ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-card-hover dab-rise",
 					style: { "--d": 3 },
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "dab-chip-row",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dab-btn dab-btn-primary",
-							onClick: () => fileRef.current?.click(),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), t("bgChoose")]
-						}), storeUrl || isVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isStatic && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dab-btn",
-							disabled: mode !== "fit",
-							title: mode !== "fit" ? t("bgEditLocked") : void 0,
-							onClick: () => setEditorOpen(true),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 14 }), t("bgEdit")]
-						}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-							type: "button",
-							className: "dab-btn dab-btn-ghost dab-btn-danger",
-							onClick: () => setWp(null),
-							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("bgRemove")]
-						})] }) : null]
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: { marginTop: 16 },
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "dab-swatch-title",
-							children: t("bgModeTitle")
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 							className: "dab-chip-row",
-							children: BG_MODES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								className: `dab-chip${mode === m.mode ? " is-active" : ""}`,
-								onClick: () => setMode(m.mode),
-								children: t(m.labelKey)
-							}, m.mode))
-						})]
-					})]
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									onClick: () => fileRef.current?.click(),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(UploadIcon, { size: 14 }), t("bgChoose")]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-ghost",
+									onClick: () => setUrlOpen((o) => !o),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(LinkIcon, { size: 14 }), t("bgFromUrl")]
+								}),
+								storeUrl || isVideo ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isStatic && storeUrl ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn",
+									disabled: mode !== "fit",
+									title: mode !== "fit" ? t("bgEditLocked") : void 0,
+									onClick: () => setEditorOpen(true),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(EditIcon, { size: 14 }), t("bgEdit")]
+								}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-ghost dab-btn-danger",
+									onClick: () => setWp(null),
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, { size: 14 }), t("bgRemove")]
+								})] }) : null
+							]
+						}),
+						urlOpen ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "dab-urlrow",
+							style: {
+								marginTop: 12,
+								display: "flex",
+								flexWrap: "wrap",
+								gap: 8,
+								alignItems: "center"
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "text",
+									className: "dab-urlinput",
+									value: urlVal,
+									placeholder: t("bgUrlPlaceholder"),
+									onChange: (e) => setUrlVal(e.target.value),
+									onKeyDown: (e) => {
+										if (e.key === "Enter") {
+											e.preventDefault();
+											applyUrl();
+										}
+									},
+									autoFocus: true
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dab-btn dab-btn-primary",
+									disabled: urlBusy,
+									onClick: () => void applyUrl(),
+									children: urlBusy ? t("bgUrlApplying") : t("bgUrlApply")
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: "dab-btn",
+									onClick: () => {
+										setUrlOpen(false);
+										setUrlVal("");
+										setUrlErr(null);
+									},
+									children: t("bgUrlCancel")
+								})
+							]
+						}) : null,
+						urlErr ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: "dab-urlerr",
+							style: {
+								marginTop: 8,
+								color: "var(--dsw-alias-state-error-primary)",
+								fontSize: 12
+							},
+							children: urlErr
+						}) : null,
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: { marginTop: 16 },
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-swatch-title",
+								children: t("bgModeTitle")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								className: "dab-chip-row",
+								children: BG_MODES.map((m) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									className: `dab-chip${mode === m.mode ? " is-active" : ""}`,
+									onClick: () => setMode(m.mode),
+									children: t(m.labelKey)
+								}, m.mode))
+							})]
+						})
+					]
 				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 					className: "dab-card dab-rise",
 					style: { "--d": 3 },