dsh-any-background 0.2.2 → 0.2.3

package/README.md

@@ -75,6 +75,13 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 
 ## Recent Optimizations
 
+### v0.2.3
+
+- **Wide tables stay in the column** — When the chat region opacity/blur is raised (which makes the chat border visible), wide markdown tables are pulled back inside the text column and scroll horizontally at the border instead of bleeding past it. Left untouched while the border is invisible, preserving DSH's default behavior.
+- **Network URL wallpaper** — Paste an image URL and the plugin downloads it and writes it to the local wallpaper file (replacing the previous image). Because the remote source lands as a local persisted file, theme export/import keep working with no extra steps: an exported theme embeds the image data, and the receiving side never needs access to the original URL.
+- **Editor confirm button visible in dark mode** — The background-editor "Confirm" button now matches the Cancel/Reset buttons (solid surface with a clear frame and legible label) instead of a translucent primary tint, so it no longer disappears in dark themes.
+- **Maintenance cleanup** — Removed an unused `@deepseek-ai/dsh-client-ui-renderer` entry from the client inject list and aligned self-owned RPC error codes with the new harness convention.
+
 ### v0.2.2
 
 - **Dark host surfaces fully themed** — Message bubbles, setting-box inputs/cards, selectors, ghost/toolbar buttons, and module-platform surfaces now carry explicit dark tokens, eliminating white-on-white and white-icon-on-bright bugs across the conversation view, settings page, and interactive controls.
@@ -83,11 +90,6 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 - **Placeholder reads as a hint** — The composer placeholder is rendered with the weak caption token and italic styling, clearly distinct from real input text.
 - **Dual harness compatibility** — `defineStore` is resolved through a runtime adapter that prefers the new `@deepseek-ai/dsh-client-store` and falls back to the legacy `@deepseek-ai/dsh-client-runtime/client`. A single bundle loads on both the npm release and the new deepseek-harness source, with no "missed the module table" boot failure.
 
-### v0.2.1
-
-- **Instant video playback on import** — A picked video starts playing immediately from a local object URL while its raw bytes stream to disk in the background; the persisted serve URL takes over on the next reload — no upload + first-buffer wait after import.
-- **Option boxes follow the card slider** — The dropdowns, slash-trigger menu, model selector, and popovers around the dialog now follow the "Cards & panels" opacity slider instead of "Input & controls"; the Cordis panel keeps its own input-slider binding.
-
 ## Installation
 
 ### Method 1: npm install (Recommended)

package/README.zh.md

@@ -75,6 +75,13 @@
 
 ## 近期优化
 
+### v0.2.3
+
+- **宽表格收进文本栏** — 当对话区透明度/模糊度被调大（边框因此可见）时，宽 Markdown 表格被收回文本栏宽度内、在边框处横向滚动，不再向右溢出裁切；边框不可见时不干预，保留 DSH 官方默认外扩行为。
+- **网络 URL 壁纸** — 填入图片网址即可直接作为壁纸：插件下载图片并写入本地壁纸文件（替换原有持久化图片）。由于远程来源最终落到本地持久化文件，主题导出/导入无需任何额外适配：导出主题时内嵌图片数据，接收方无需访问原始网址也能还原。
+- **深色主题下编辑器确认按钮清晰可见** — 背景编辑器「确认」按钮改为与「取消/重置」一致的实色表面 + 清晰边框 + 可读文字，不再使用半透明的主题色淡染，深色主题下不再看不清。
+- **维护性清理** — 移除 `dsh.client.inject` 中未使用的 `@deepseek-ai/dsh-client-ui-renderer` 条目，并将插件自有 RPC 错误码对齐新版 harness 的命名规范。
+
 ### v0.2.2
 
 - **深色宿主表面全面主题化** — 消息气泡、设置框输入框/卡片、选择器、ghost/工具条按钮、module-platform 表面均补全了显式深色令牌，消除对话区、设置页与交互控件中的白底白字、白底白图标问题。
@@ -83,11 +90,6 @@
 - **占位符与正式输入区分** — 发送框占位符改用较弱的 caption 令牌并加斜体，空态不会被误认为已输入内容。
 - **双版本兼容** — `defineStore` 通过运行时适配器解析：优先使用新版 `@deepseek-ai/dsh-client-store`，缺失时回退到旧版 `@deepseek-ai/dsh-client-runtime/client`；同一份 bundle 同时兼容 npm 老版本与新版 deepseek-harness 源码，不再出现 "missed the module table" 启动失败。
 
-### v0.2.1
-
-- **导入即播视频壁纸** — 选中的视频立即通过本地对象 URL 开始播放，原始字节在后台流式落盘，下次刷新自动切回持久化服务地址，不再有「上传 + 首帧缓冲」的等待。
-- **选项框跟随卡片滑块** — 对话框周围的下拉菜单、斜杠命令菜单、模型选择器与弹层改为跟随「对话框中选项面板」透明度滑块；Cordis 插件面板保持自己的输入滑块绑定。
-
 ## 安装
 
 ### 方式一：npm 安装（推荐）

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) {
@@ -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 },