dsh-any-background 0.1.8 → 0.2.1

package/README.md

@@ -33,7 +33,7 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 <p align="center">
   <img src="example_img/image-4.png" alt="Background editor" width="720">
   <br/>
-  <em>Background editor · image wallpapers support drag-to-pan and scroll-to-zoom</em>
+  <em>Background editor · image/video wallpapers support drag-to-pan and scroll-to-zoom</em>
 </p>
 
 <p align="center">
@@ -58,24 +58,39 @@ A **DeepSeek Harness** appearance plugin that lets you fully customize the Web U
 
 - **PS-style Color Wheel** — Pick hue on the ring, adjust saturation & lightness in the inscribed square. Generates 30+ CSS design tokens in real time.
 - **Precise HSL / RGB Input** — Enter exact color values numerically with instant bidirectional sync to the wheel.
-- **Smart Color Extraction** — One click derives a theme color from your wallpaper by sampling the visible region, quantizing, and filtering out gray / near-black / near-white pixels. Fully client-side.
+- **Smart Color Extraction** — One click derives a theme color from your wallpaper by sampling the visible region, quantizing, and filtering out gray / near-black / near-white pixels. Video wallpapers contribute via an auto-captured frame. Fully client-side.
 - **Eyedropper** — Hover the wallpaper to preview a color and click to pick it as the theme color.
 - **Background Wallpaper** — Upload any image as your wallpaper. Drag to pan and scroll to zoom inside a viewport-proportional editor.
+- **Video Wallpaper** — Use a video as a live wallpaper: muted looping playback that survives refreshes (file persistence + HTTP streaming with Range seek), with an auto-captured frame powering the preview, theme-color extraction, and the position editor.
+- **Position Editor** — One shared editor for images and videos: drag to pan, scroll to zoom, one-click reset. Image and video placements are stored separately and never overwrite each other.
+- **Layout Modes** — Fit / Fill / Stretch / Tile / Center for both images and videos; in Fit mode the editor-committed framing stays consistent across window resizes and cross-monitor moves.
 - **Generated Dynamic Backgrounds** — Choose mesh gradient, Shader, or geometric patterns with adjustable spread, intensity, and seed locking.
-- **Per-part Interface Opacity** — Independent sliders for main background, sidebar, cards & panels, plus the settings panel and wallpaper.
-- **Per-part Interface Blur** — Frosted-glass `backdrop-filter` blur (0–60 px) for each interface part.
-- **Theme Export / Import** — One-click export to a self-contained `dsh-any-theme.json` (config + wallpaper) and import to restore it anywhere.
+- **Per-part Interface Opacity** — Independent sliders for the main background, sidebar, cards & panels (including the dropdowns and menus around the dialog), the input & controls (composer box, Cordis panel), plus the settings panel and wallpaper.
+- **Per-part Interface Blur** — Frosted-glass `backdrop-filter` blur (0–60 px) for each interface part, including a real backdrop on the composer and Cordis panel via stable host selectors.
+- **Conversation View Cards** — The message list is wrapped in a translucent card automatically, and the trajectory page gets whole-page opacity & blur controls, letting the wallpaper shine through the content.
+- **Theme Export / Import** — One-click export to a self-contained `dsh-any-theme.json` (config + wallpaper, video embedded as a data URL) and import to restore it anywhere.
 - **File-based Persistence** — All settings are stored on the filesystem under `~/.dsh/.dsh-any-background-data/`, not `localStorage`.
 - **Bilingual** — Full Chinese / English UI with automatic locale detection.
 - **Theme Watchdog** — Re-asserts the custom theme if the host resets it.
 
 ## Recent Optimizations
 
+- **Video wallpaper end-to-end** — Videos are stored under MIME-derived names (`wallpaper.mp4/webm/...`) and streamed over the plugin's own HTTP route; they restore automatically after refresh or restart and travel inside exported configs.
+- **Binary upload for large videos** — Uploads stream raw bytes over an HTTP POST straight to disk instead of a base64 detour through RPC (no channel body limit, any size works); aborted transfers clean up after themselves.
+- **Video position editing** — The placement editor works on a captured frame reference with zoom/pan, adapted to all five layout modes; image and video framings persist independently.
+- **Conversation view cards** — The message column gains an automatic card (border/radius/padding) and the trajectory page gets whole-page opacity & blur; switching views restores the previous host.
 - **Boot flicker eliminated** — Theme tokens are injected through a dedicated `!important` stylesheet instead of inline `body` styles, surviving host theme service resets.
 - **Color wheel overlap fixed** — The hue ring is drawn on top of the saturation/lightness square so the square corners no longer cover the ring.
 - **Inspiration palette selection cleared** — Picking a theme color from the wheel deselects any previously selected inspiration swatch.
 - **Debug telemetry removed** — Temporary boot-time logging and `MutationObserver` instrumentation have been cleaned out.
 - **Per-part blur isolated** — Blur is applied on `::before` underlays so it never traps the host's fixed-position settings dialog.
+- **New "Input & controls" part** — The composer box, slash menu, and Cordis plugin panel own a dedicated opacity slider; their translucent surfaces get real frosted-glass backdrop blur attached through stable host data attributes (`[data-composer-card]`, `[data-cordis-panel]`).
+- **Native control contrast fixed** — Solid surface tokens (composer, menus, Cordis panel) now carry per-part alpha, and a forced `color-scheme` keeps native `<select>` popups legible — no more white-on-white when the wallpaper brightness verdict flips labels to white.
+- **Translucency without self-damage** — The "Input & controls" opacity slider is deliberately decoupled from the settings panel's own controls (which share the same button tokens), so adjusting it can never bleach the plugin's own sliders and buttons.
+- **Drag-time performance** — Opacity tokens are written as CSS variables on `<html>` instead of rebuilding the whole token stylesheet per tick; slider updates are coalesced to one rAF per frame; the main-background columns are only retinted when their own slider changes.
+- **Drag-time wallpaper downscaling** — While any slider is being dragged the wallpaper swaps to a (~720px) low-res copy for cheap rasterization over large images, then restores full resolution on release.
+- **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 more 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
 

package/README.zh.md

@@ -33,7 +33,7 @@
 <p align="center">
   <img src="example_img/image-4.png" alt="背景编辑器" width="720">
   <br/>
-  <em>背景编辑器 · 图片壁纸支持拖动平移与滚轮缩放</em>
+  <em>背景编辑器 · 图片/视频壁纸支持拖动平移与滚轮缩放</em>
 </p>
 
 <p align="center">
@@ -58,24 +58,39 @@
 
 - **PS 风格色轮** — 在色相环上选取色相，在内嵌方形中调整饱和度与明度，实时生成 30+ 个 CSS 设计令牌。
 - **精确 HSL / RGB 输入** — 通过数值精确输入颜色，与色轮实时双向同步。
-- **智能取色** — 一键从壁纸提取主题色：采样可见区域、量化像素、剔除灰色/近黑/近白，选出现量最大的鲜亮色。纯客户端完成。
+- **智能取色** — 一键从壁纸提取主题色：采样可见区域、量化像素、剔除灰色/近黑/近白，选出现量最大的鲜亮色。视频壁纸自动截帧参与取色。纯客户端完成。
 - **吸管取色** — 在壁纸上悬停预览颜色，点击即可选为主题色。
 - **背景壁纸** — 上传任意图片作为壁纸，在视口比例的编辑器中拖动平移、滚轮缩放。
+- **视频壁纸** — 上传视频作为动态壁纸：静音循环播放、刷新不丢失（落盘持久化 + HTTP 流式播放，支持 Range seek）；自动截取一帧用于预览、主题色提取与位置编辑参考。
+- **位置编辑器** — 图片与视频共用同一套编辑器：拖动平移、滚轮缩放、一键重置；图片与视频的位置状态各自独立保存，互不覆盖。
+- **布局模式** — 适应 / 填充 / 拉伸 / 平铺 / 居中五种排布，图片与视频通用；「适应」模式下编辑器提交的构图在窗口缩放、跨屏移动后保持一致。
 - **动态生成背景** — 支持网格渐变、Shader、几何图案，可调节扩散范围、色彩强度并锁定种子。
-- **分部位界面透明度** — 主背景、侧边栏、卡片面板、设置面板与壁纸各自独立滑块。
-- **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊（0–60 px）。
-- **主题导出 / 导入** — 一键导出为自包含的 `dsh-any-theme.json`（配置 + 壁纸），可随时导入还原。
+- **分部位界面透明度** — 主背景、侧边栏、卡片面板（含对话框周围的选项框/菜单）、输入框与控件（发送框、Cordis 插件面板）、设置面板与壁纸各自独立滑块。
+- **分部位界面模糊度** — 每个界面部位可独立调整毛玻璃 `backdrop-filter` 模糊（0–60 px），并通过宿主的稳定选择器为发送框与 Cordis 面板提供真实背景模糊。
+- **对话视图卡片** — 消息列表自动包裹为半透明卡片，轨迹页可整页调节透明度与模糊，让壁纸从内容后方透出来。
+- **主题导出 / 导入** — 一键导出为自包含的 `dsh-any-theme.json`（配置 + 壁纸，视频以 data URL 内嵌），可随时导入还原。
 - **文件持久化** — 所有设置保存到文件系统 `~/.dsh/.dsh-any-background-data/`，不再依赖 `localStorage`。
 - **中英双语** — 完整的中英文界面，自动跟随语言设置。
 - **主题守护** — 宿主重置主题后自动重新激活自定义主题。
 
 ## 近期优化
 
+- **视频壁纸全链路** — 视频按 MIME 改名落盘（`wallpaper.mp4/webm/...`），经插件自建 HTTP 路由流式播放；刷新、重启后自动恢复，导出配置时视频一并内嵌分享。
+- **大视频二进制直传** — 上传改走 HTTP 二进制 POST 流式落盘，不再 base64 绕行 RPC（突破通道 body 上限，任意大小可传），中断自动清理临时文件。
+- **视频位置编辑** — 以截帧为参考图的位置编辑器，支持缩放/移动，与五种布局模式适配；图片与视频构图各自独立持久化。
+- **对话视图卡片化** — 消息列自动上卡片（边框/圆角/内边距），轨迹页整页透明度与模糊可控，视图切换时旧宿主自动还原。
 - **消除启动闪屏** — 主题令牌改为通过独立的 `!important` 样式表注入，可抵御宿主主题服务的重置。
 - **修复色轮覆盖** — 色相环绘制在饱和度/明度方形之上，方形四角不再遮挡色环。
 - **灵感色板选中重置** — 在色轮中选取主题色后，灵感色板中的之前选中状态自动清除。
 - **移除调试埋点** — 清理了临时的启动日志与 `MutationObserver` 探针代码。
 - **分部位模糊隔离** — 模糊效果施加在 `::before` 伪元素上，避免影响宿主固定定位的设置弹窗。
+- **新增「输入框与控件」部件** — 发送框、斜杠菜单、Cordis 插件面板拥有独立的透明度滑块；半透明表面通过宿主的稳定 data 属性（`[data-composer-card]`、`[data-cordis-panel]`）获得真正的毛玻璃背景模糊。
+- **修复原生控件明暗对比** — 实心表面令牌（发送框、菜单、Cordis 面板）现在参与分部位 alpha，并强制 `color-scheme` 让原生 `<select>` 弹层保持可读——消除壁纸判暗把标签转白后出现的白底白字。
+- **透明化不反噬自身** — 「输入框与控件」透明度滑块刻意与该面板自己的控件（共享同一批按钮令牌）解绑，调节它不会把插件自身的滑块和按钮也变透明。
+- **拖动性能优化** — 透明度令牌改为写 `<html>` 上的 CSS 变量（拖动时不再整表重建），滑块更新按 rAF 合帧为每帧一次；「主背景」列仅在自身滑块变化时才重染。
+- **拖动时壁纸降采样** — 拖动任意滑块期间，壁纸临时切换到（~720px）低清副本以降低大图上的合成成本，松手后恢复全分辨率。
+- **导入即播视频壁纸** — 选中的视频立即通过本地对象 URL 开始播放，原始字节在后台流式落盘，下次刷新自动切回持久化服务地址——不再有「上传 + 首帧缓冲」的等待。
+- **选项框跟随卡片滑块** — 对话框周围的下拉菜单、斜杠命令菜单、模型选择器与弹层现在跟随「对话框中选项面板」透明度滑块，而非「输入框与控件」；Cordis 插件面板保持自己的输入滑块绑定。
 
 ## 安装