dsh-shadertoy-skin 0.2.0 → 0.2.2

package/README.md

@@ -8,8 +8,23 @@
 
 Realtime [ShaderToy](https://www.shadertoy.com/) background skin for DeepSeek Harness (desktop & web): a zero-runtime-dependency WebGL2 player, a background library, and a translucent glass shell.
 
-![aurora](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/M0/aurora-default.png)
-![flow](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/M0/flow-default.png)
+> **推荐去 [www.shadertoy.com](https://www.shadertoy.com/) 逛逛** —— 插件自带的三个作品只是开胃菜。ShaderToy 上有几万个社区作品（搜 `background`、`seascape`、`raymarching` 这类关键词，或在 Browse 里按分类翻），挑喜欢的装进「背景库」、按自己的口味调亮度 / 速度 / 代码，就是一张专属桌面。
+> **改好了欢迎分享**：截图、参数、改进思路都可以提到 [Issues](https://github.com/zdjmrq/dsh-shadertoy-skin/issues)，或者直接 PR（作品代码要看原作者的许可证，默认 CC BY-NC-SA 3.0：署名、非商业、同样方式共享；本仓库本身只收录 MIT 代码）。
+>
+> **Recommended: browse [shadertoy.com](https://www.shadertoy.com/)** — import any piece into the background library, tune it to your taste, and feel free to share screenshots, settings or improvements via Issues / PRs.
+
+https://github.com/user-attachments/assets/c8801ca1-e96e-4bfe-83bc-6e99b5551cf4
+
+*演示 1 · 像素马里奥：静态画 + 一首歌 —— 音乐「只播一次」，放完画面常驻*
+
+https://github.com/user-attachments/assets/001acdf6-90e2-4b2c-85fc-e9d076678597
+
+*演示 2 · [Seascape](https://www.shadertoy.com/view/Ms2SD1)（© TDM，CC BY-NC-SA 3.0）的个人修改版：摄像机抬到近地轨道，只留海面*
+
+![马里奥像素画背景](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-mario.jpg)
+![代码页：查看 / 修改 / 保存并运行当前作品的着色器](https://raw.githubusercontent.com/zdjmrq/dsh-shadertoy-skin/main/docs/verify/readme-code.jpg)
+
+> 视频与截图里的 ShaderToy 作品版权归原作者：像素马里奥（作者见对应作品页）、Seascape（© TDM，CC BY-NC-SA 3.0）。**视频与截图仅作效果展示**，本仓库代码仍是 MIT，且不收录这些作品代码。
 
 ## 名字 / 包名（认准这两个）
 
@@ -24,6 +39,85 @@ npm 包名**没有 scope、也不带作者用户名**：不是 `@zdjmrq/dsh-shad
 npm view dsh-shadertoy-skin version   # 确认 npm 上真实存在的版本
 ```
 
+## 从 ShaderToy 装一个作品
+
+插件自带三个 MIT 自写着色器，但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法，任选一种：**
+
+> **推荐一试**：[`shadertoy.com/view/4dfXWj`](https://www.shadertoy.com/view/4dfXWj) —— 装进来效果挺带感，导入方式见下面任意一种。
+> 这只是个起点：**大家完全可以根据自己的喜好随便挑别的作品，也可以自己写着色器**（写好了走同样的导入流程）。ShaderToy 作品的许可证由原作者决定（默认 CC BY-NC-SA 3.0），装在本机自己玩没问题，但别把作品代码提交进仓库或随包再分发。
+
+### 1. 粘贴代码（最稳，不用抓网页）
+
+1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`，右上角 **Shader** 页签；
+2. 全选 `Image` 页签里的代码（如果作品用了 `Common`，把 Common 里的函数一起复制到开头；用了 Buffer 的作品暂不支持）；
+3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**；
+4. 列表里点 **使用** 即可，参数会即时生效。
+
+带声音的作品（代码里有 `mainSound`）把声音代码粘进 `Sound 代码`，切到它时会出声。声音签名支持这四种：
+
+```glsl
+vec2  mainSound(float time)            // 立体声
+float mainSound(float time)            // 单声道（自动复制到左右）
+vec2  mainSound(int samp, float time)  // 带采样序号
+float mainSound(int samp, float time)  // 单声道 + 采样序号
+```
+
+如果出声被浏览器拦住，点一下界面任意位置即可解锁（面板音量那一行也会提示）。
+
+### 2. 让 AI 帮你装（一条指令，把网址填进去就行）
+
+复制下面这段，把第一行的网址换成你要的作品链接，发给 DeepSeek Harness（或任何能操作文件的 AI）：
+
+```text
+帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
+
+插件：dsh-shadertoy-skin（npm 包名就是 dsh-shadertoy-skin，GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin）
+如果还没装：桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」；命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
+
+要装的作品链接：<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
+
+做法：
+1. 打开上面的链接，拿到 Image pass 的 GLSL（若用了 Common，把 Common 的函数一起带上），以及可选的 mainSound。
+2. 打开插件设置页（左栏「Shader 背景」）→ 背景库 → 「粘贴 ShaderToy 代码」：名字用作品名，Image 粘主代码，Sound 可空。
+3. 导入后把它设为当前背景，确认背景真的渲染出来（不是黑屏、不是编译报错）；若报编译错误，按错误行号修好再试。
+4. 如果页面抓不到代码（反爬/需要登录/只给 WebGL 不给源码），直接让我手动复制粘贴，不要猜代码。
+5. 该作品的许可由原作者决定（ShaderToy 默认 CC BY-NC-SA 3.0）：只装在本机，不要提交进 git、不要随包发布。
+
+装好后告诉我：装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
+```
+
+> AI 抓不到 ShaderToy 页面时（它经常挡爬虫），就走上面第 1 种的「手动粘贴」——一样能装好，而且不会有许可证问题。
+
+### 3. 从本地目录导入（批量最方便）
+
+把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进：
+
+```
+$DSH_HOME/shader-skin/presets/        （Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\）
+```
+
+设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
+
+## 参数与默认值
+
+默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json)，面板读它来渲染选项与「恢复默认」，Host 用它做兜底——**改一个文件就能改默认值**。
+
+| 参数 | 默认 | 可选 | 说明 |
+|---|---|---|---|
+| `enabled` | `true` | 开/关 | 关掉只移除背景层，设置页仍在 |
+| `glass` | `60` (%) | 20–95 | 玻璃不透明度：界面压住背景的程度。越高文字越清晰、背景越淡；越低背景越透亮 |
+| `brightness` | `100` (%) | 30–180 | 背景亮度（着色器输出乘数）。黄昏、夜景类作品看着太暗就调高 |
+| `panels` | `opaque` | opaque / half / clear | 卡片、代码块、弹层、**聊天输入框**、编辑器表面的底色：不透明 / 半透明 / 透明。想让背景从框里透出来就调它 |
+| `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
+| `scale` | `1`× | 0.25 / 0.35 / 0.4 / 0.5 / 0.6 / 0.75 / 1 / 1.25 / 1.5 / 1.75 / 2 | 渲染分辨率倍率（DPR 上限 1.5）。下拉里**直接写实际分辨率**，例如 `1280 × 810（1×）`、`320 × 203（0.25×）`，窗口变大后这些数字会跟着刷新；显卡弱/想省电选 0.25–0.5×，追求锐利选 1.5–2× |
+| `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限；聊天时 30 足够 |
+| `speed` | `1`× | 0–2 | 时间轴倍速 |
+| `loop` / `loopSeconds` | `false` / `20` s | 开/关 · 5–120 s | **画面循环**：有的作品播一次就不动了，打开后每个周期把 `iTime` 归零重播（只重置画面，不影响声音）。带淡入淡出的作品（如马里奥）每轮会重新淡入，这是作品本身的效果 |
+| `audioMode` / `audioSeconds` | `loop` / `60` s | loop / once · 10–600 s | **音乐播放方式**：ShaderToy 的曲子是有长度的（播完就静音），所以 `loop` = 每到「音乐时长」就把音乐时间轴归零重放（接缝有 40 ms 淡入淡出）；`once` = 放完「音乐时长」就停、**画面继续常驻**（马里奥这种静态图 + 一首歌正合适） |
+| `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声；浏览器可能拦截自动播放，点一下界面任意位置即可解锁 |
+
+> 两个滑块的分工：**玻璃不透明度**控制「界面压暗多少」，**背景亮度**控制「画面本身多亮」。前者影响可读性，后者只影响画面。背景看着黑，先加亮度；文字看着花，再加玻璃。
+
 ## 状态
 
 渲染器、插件骨架、设置页、背景库、音频都已完成，剩下的是增强项：
@@ -34,11 +128,15 @@ npm view dsh-shadertoy-skin version   # 确认 npm 上真实存在的版本
 - [x] Client 半：把播放器挂成 body 首子节点、转发 iMouse / 主题 / 可见性，全部资源走 `ctx.effect` 清理
 - [x] 玻璃壳：外壳表面（AppFrame / 侧栏 / 页面容器）全透明，**暗色滤镜只由播放器画一层**（`tintMix`），不再靠多层半透明 token 叠出来（叠 N 层会把背景压到几乎全黑，旧版就栽在这）
 - [x] 设置页：**左栏一行「Shader 背景」→ 主区域整页**（不是弹窗），带页头、参数 / 背景库 / 代码三个页签
-- [x] 参数：启用、作品切换、**玻璃不透明度**、**背景亮度**、模糊、渲染分辨率、帧率上限、播放速度、音量/静音、本背景恢复默认
+- [x] **参数**：启用、作品切换、玻璃不透明度、背景亮度、卡片透明度、模糊、分辨率、帧率、速度、**画面循环**、**音乐只播一次**、音量/静音、本背景恢复默认
+- [x] **音乐只播一次**：放完设定时长就停，画面继续常驻（适合马里奥这种静态图 + 一首歌）；`loop` 则是按「音乐时长」把音乐时间轴归零重放，有限长度的曲子也能一直循环
+- [x] **画面循环**：有些作品播一次就停住，可设周期把 `iTime` 归零重播（只重置画面）
+- [x] 设置页配色改用 **DSH 品牌蓝**（亮色 `#3568dc` / 暗色 `#7aaaff`），小字号数值也清楚
 - [x] **背景库**：内置 + 我的背景列表、切换、改名、删除；粘贴代码导入、文件导入（ShaderToy JSON / GLSL）、从 `$DSH_HOME/shader-skin/presets/` 导入
 - [x] **代码页**：查看当前运行作品的 Image / Sound 源码，直接改 → **保存并运行**（内置作品会自动另存为「我的副本」，原件不动；编辑器里 Ctrl/⌘+S 同样保存）
 - [x] **iMouse 只在「按住左键 + 从空白处开始拖动」时驱动**：点按钮、拖滚动条、选中/复制回复文字都不会再带动背景；松手发一次释放（`iMouse.z < 0`）
-- [x] **卡片透明度三档**（不透明 / 半透明 / 透明）：控制卡片、代码块、弹层、输入框的底色，让背景能透进这些「框」里
+- [x] **卡片透明度三档**（不透明 / 半透明 / 透明）：控制卡片、代码块、弹层、输入框、聊天输入栏的底色，让背景能透进这些「框」里
+- [x] **AI 回复里的「白块」也跟着透**：改动文件头、交付物卡片、markdown 代码块、行内代码、消息气泡原本直接读静态中性色（亮色下是不透明白），现在跟 `panels` 同档 alpha —— 亮色主题下不会再出现「别的卡片都透、就这几块死白」
 - [x] **每背景独立参数**（`overrides`）
 - [x] **`mainSound` 音频**：4096 采样块 → `readPixels` → WebAudio 前瞻调度 + Gain/限幅，音量与静音实时生效
 - [x] **音频签名全兼容**：ShaderToy 音频 pass 的四种写法都接受 —— `vec2`/`float` 返回值 × `(float time)`/`(int samp, float time)` 参数（单声道自动复制到左右；`samp` 传绝对采样序号）
@@ -48,24 +146,6 @@ npm view dsh-shadertoy-skin version   # 确认 npm 上真实存在的版本
 - [x] **启动自愈**：桌面端 client 插件行与服务是并发激活的，首次启动时 `theme`/`slots` 可能还没就绪（旧版因此「重启后要手动关开一次插件」）。现在服务现取 + 启动后 10 秒内多次自检（背景层缺失就重建、token 被重置就重设、播放器没 `ready` 就重发 init、侧栏没注册上就补注册），**装好重启即生效**
 - [ ] 多 pass（Buffer A–D）、音频可视化回馈、兼容性静态体检
 
-## 参数与默认值
-
-默认值集中在 [`native-dist/defaults.json`](native-dist/defaults.json)，面板读它来渲染选项与「恢复默认」，Host 用它做兜底——**改一个文件就能改默认值**。
-
-| 参数 | 默认 | 可选 | 说明 |
-|---|---|---|---|
-| `enabled` | `true` | 开/关 | 关掉只移除背景层，设置页仍在 |
-| `glass` | `60` (%) | 20–95 | 玻璃不透明度：界面压住背景的程度。越高文字越清晰、背景越淡；越低背景越透亮 |
-| `brightness` | `100` (%) | 30–180 | 背景亮度（着色器输出乘数）。黄昏、夜景类作品看着太暗就调高 |
-| `panels` | `opaque` | opaque / half / clear | 卡片、代码块、弹层、输入框的底色：不透明 / 半透明 / 透明。想让背景从框里透出来就调它 |
-| `blur` | `0` px | 0–12 | 只在 > 0 时启用 CSS `filter` |
-| `scale` | `1`× | 0.5 / 0.75 / 1 / 1.25 / 1.5 | 渲染分辨率倍率（DPR 上限 1.5） |
-| `fps` | `30` | 15 / 20 / 30 / 60 | 渲染帧率上限；聊天时 30 足够 |
-| `speed` | `1`× | 0–2 | 时间轴倍速 |
-| `volume` / `muted` | `60` / `false` | 0–100 / 开/关 | 带 `mainSound` 的作品默认出声；浏览器可能拦截自动播放，面板会给「开声音」 |
-
-> 两个滑块的分工：**玻璃不透明度**控制「界面压暗多少」，**背景亮度**控制「画面本身多亮」。前者影响可读性，后者只影响画面。背景看着黑，先加亮度；文字看着花，再加玻璃。
-
 ## 要求
 
 - DeepSeek Harness **0.2.x**（桌面版或 `dsh web`）
@@ -83,65 +163,59 @@ dsh plugin --profile desktop add dsh-shadertoy-skin
 dsh plugin --profile desktop add github:zdjmrq/dsh-shadertoy-skin#main
 ```
 
-安装后左侧栏会多一行 **「Shader 背景」**，点开在主区域就是整页设置（参数 / 背景库）；默认背景是「极光」。
-
-**开发期的安全阀**：如果界面出现卡死等异常，新建一个空文件 `$DSH_HOME/shader-skin.safe` 再刷新页面——客户端会跳过侧边栏入口与整页设置（只保留背景层），界面立刻可用；删掉该文件再重启即恢复。
+**Web 版（`dsh web`）**：把 `--profile desktop` 换成 `--profile web`，装完重启 `dsh web` 再刷新页面：
 
-## 从 ShaderToy 装一个作品
+```sh
+dsh plugin --profile web add dsh-shadertoy-skin
+```
 
-插件自带三个 MIT 自写着色器，但真正好玩的是把你喜欢的 ShaderToy 作品装进来。**三种做法，任选一种：**
+安装后左侧栏会多一行 **「Shader 背景」**，点开在主区域就是整页设置（参数 / 背景库）；默认背景是「极光」。升级到新版看下面「[更新](#更新)」。
 
-### 1. 粘贴代码（最稳，不用抓网页）
+**开发期的安全阀**：如果界面出现卡死等异常，新建一个空文件 `$DSH_HOME/shader-skin.safe` 再刷新页面——客户端会跳过侧边栏入口与整页设置（只保留背景层），界面立刻可用；删掉该文件再重启即恢复。
 
-1. 打开作品页 `https://www.shadertoy.com/view/xxxxxxxx`，右上角 **Shader** 页签；
-2. 全选 `Image` 页签里的代码（如果作品用了 `Common`，把 Common 里的函数一起复制到开头；用了 Buffer 的作品暂不支持）；
-3. 回到插件设置页 → **背景库** → 「粘贴 ShaderToy 代码」→ 填名字 → 粘进 `Image 代码` → **加入背景库**；
-4. 列表里点 **使用** 即可，参数会即时生效。
+## 更新
 
-带声音的作品（代码里有 `mainSound`）把声音代码粘进 `Sound 代码`，切到它时会出声。声音签名支持这四种：
+先确认 npm 上的最新版本（也可以在 DSH 侧栏「插件」里看已安装版本）：
 
-```glsl
-vec2  mainSound(float time)            // 立体声
-float mainSound(float time)            // 单声道（自动复制到左右）
-vec2  mainSound(int samp, float time)  // 带采样序号
-float mainSound(int samp, float time)  // 单声道 + 采样序号
+```sh
+npm view dsh-shadertoy-skin version
 ```
 
-如果出声被浏览器拦住，点一下界面任意位置即可解锁（面板音量那一行也会提示）。
+### 桌面版（DeepSeek Harness 客户端）
 
-### 2. 让 AI 帮你装（一条指令，把网址填进去就行）
+1. **完全退出客户端**（关窗口不算，要退出进程；插件命令会锁 profile）；
+2. 任意终端执行（`@latest` 才会跨小版本升级）：
 
-复制下面这段，把第一行的网址换成你要的作品链接，发给 DeepSeek Harness（或任何能操作文件的 AI）：
+```sh
+dsh plugin --profile desktop add dsh-shadertoy-skin@latest
+```
 
-```text
-帮我给 DeepSeek Harness 装一个 ShaderToy 背景皮肤。
+3. 重新打开客户端 —— 左栏「Shader 背景」和整页设置就是新版。
 
-插件：dsh-shadertoy-skin（npm 包名就是 dsh-shadertoy-skin，GitHub: https://github.com/zdjmrq/dsh-shadertoy-skin）
-如果还没装：桌面版走「插件 → 添加插件 → 填 dsh-shadertoy-skin → 装完完全退出并重启客户端」；命令行用 dsh plugin --profile desktop add dsh-shadertoy-skin。
+> 不习惯命令行：侧栏「插件」→「已安装」→ 卸载 `dsh-shadertoy-skin` → 再「添加插件」填一次包名 → **完全退出并重启**。DSH 插件管理器对第三方插件只提供卸载 / 安装，没有「更新」按钮。
+>
+> 本地背景库、参数、代码页改过的作品都在 `$DSH_HOME/shader-skin.json`，重装/升级**不会丢**。
 
-要装的作品链接：<把你复制的 https://www.shadertoy.com/view/xxxxxxxx 粘在这里>
+### Web 版（`dsh web`）
 
-做法：
-1. 打开上面的链接，拿到 Image pass 的 GLSL（若用了 Common，把 Common 的函数一起带上），以及可选的 mainSound。
-2. 打开插件设置页（左栏「Shader 背景」）→ 背景库 → 「粘贴 ShaderToy 代码」：名字用作品名，Image 粘主代码，Sound 可空。
-3. 导入后把它设为当前背景，确认背景真的渲染出来（不是黑屏、不是编译报错）；若报编译错误，按错误行号修好再试。
-4. 如果页面抓不到代码（反爬/需要登录/只给 WebGL 不给源码），直接让我手动复制粘贴，不要猜代码。
-5. 该作品的许可由原作者决定（ShaderToy 默认 CC BY-NC-SA 3.0）：只装在本机，不要提交进 git、不要随包发布。
+`dsh web` 用的是 **`web` profile**（等价于 `dsh --profile web`），和桌面版的 `desktop` profile 是**两套独立依赖**，更新命令也不同：
 
-装好后告诉我：装的是哪个作品、是否带声音、需不需要我调亮度/玻璃。
+```sh
+dsh plugin --profile web add dsh-shadertoy-skin@latest
 ```
 
-> AI 抓不到 ShaderToy 页面时（它经常挡爬虫），就走上面第 1 种的「手动粘贴」——一样能装好，而且不会有许可证问题。
+然后在跑 `dsh web` 的终端里 `Ctrl+C` 停掉、重新 `dsh web`，再刷新浏览器页面（Web 版的 client 插件在页面加载时注入，**重启服务 + 刷新页面**才完整生效）。
 
-### 3. 从本地目录导入（批量最方便）
+| 你用的 | profile | 更新命令 |
+|---|---|---|
+| 桌面客户端 | `desktop` | `dsh plugin --profile desktop add dsh-shadertoy-skin@latest` |
+| `dsh web` | `web` | `dsh plugin --profile web add dsh-shadertoy-skin@latest` |
 
-把 `ShaderToy 导出的 JSON`、或直接是 `.glsl` / `.txt` 的代码文件放进：
+两个 profile 别弄混：桌面客户端只读 `~/.dsh/profiles/desktop`，`dsh web` 只读 `~/.dsh/profiles/web`；给桌面装的插件 Web 版不会自动有，反之亦然。
 
-```
-$DSH_HOME/shader-skin/presets/        （Windows 默认 C:\Users\<你>\.dsh\shader-skin\presets\）
-```
+### 只改了前端资源？
 
-设置页 → 背景库 → 「从本地目录导入」→ 点 **导入**。这个目录不进包、不进 git。
+`player.html` / `panel.html` / `defaults.json` 由 Host 半**按请求读盘（no-cache）**，手动改这些文件后刷新页面即可；但 `index.js` / `client.js`（Host 半 / Client 半）的改动必须重启对应进程：桌面 = 退出重开客户端，Web = 重启 `dsh web` 并刷新页面。
 
 ## 改代码 / 微调作品
 
@@ -153,6 +227,7 @@ $DSH_HOME/shader-skin/presets/        （Windows 默认 C:\Users\<你>\.dsh\shad
 | 改几行立刻看效果 | 改完点 **「保存并运行」**（或 Ctrl/⌘+S）：保存状态 → 播放器重新编译 → 画面即时更新；编译错误会显示在按钮下方（带行号） |
 | 改坏了想还原 | 点 **「放弃修改」**，重新读取当前已保存的版本（想彻底恢复默认就去「参数 → 本背景恢复默认」，或从「背景库」重新导入） |
 | 内置作品能改吗 | 能改，但内置文件是只读的：保存时会自动另存为 **「<原名>（我的副本）」** 并切过去运行，内置原件不动 |
+| 代码框太小/太大 | 两个代码框（Image / Sound）下面都有一条**拖动把手**，上下拖动即可改高度（把手指到把手上按 ↑/↓ 也行）；调整后的高度会记住（下次打开还是这个高度） |
 
 > 注意：ShaderToy 的 WebGL2 着色器语言是 ESSL 3.00，**不支持 `precise` 限定符**（那是 GLSL 4.0 / ESSL 3.20 的东西，ShaderToy 的 Vulkan 后端才有）。需要「共享晶格点必须同哈希」这类修复时，用**整数哈希**（`uint` + 位混合）代替 `precise`——效果是确定的，也不会被驱动 FMA 收缩影响。
 

package/client.js

@@ -195,14 +195,36 @@ window.__ModuleLoader__.load({
             '--dsw-alias-bg-base': { light: 'rgba(255, 255, 255, 0)', dark: 'rgba(9, 12, 16, 0)' },
             '--dsw-specific-sidebar-fill': { light: 'rgba(255, 255, 255, 0)', dark: 'rgba(9, 12, 16, 0)' },
           }
-          // The boxes that stay opaque when the shell goes clear: cards, nested
-          // panels, code blocks, popovers/dialogs, menus and the composer input.
+          // The boxes that follow the `panels` level: cards, nested panels, code
+          // blocks, the composer/editor surface (`bg-module-platform`) and the
+          // message input (`specific-input-major`). Popovers/menus get a higher
+          // alpha below so they stay readable.
           const LAYER_TOKENS = [
             '--dsw-alias-bg-layer-1', '--dsw-alias-bg-layer-2',
             '--dsw-alias-bg-layer-3', '--dsw-alias-bg-layer-4',
+            '--dsw-alias-bg-module-platform', '--dsw-specific-input-major',
           ]
           const RAISED_TOKENS = [
-            '--dsw-alias-bg-overlay', '--dsw-specific-menu', '--dsw-specific-input-major',
+            '--dsw-alias-bg-overlay', '--dsw-specific-menu',
+          ]
+          /**
+           * Content fills that never go through the `bg-layer-*` tokens: the
+           * changed-files header strip, deliverable/plan cards, markdown code
+           * blocks + inline code, and the user-message bubble. In the light theme
+           * those default to opaque near-white (the static neutral-50/100 scale),
+           * which is what made some assistant replies look like solid white
+           * patches while every other card was translucent. Each entry is
+           * [token, weight]: the weight scales the current `panels` alpha.
+           */
+          const CONTENT_TOKENS = [
+            ['--dsw-static-neutral-50', 0.62],
+            ['--dsw-static-neutral-100', 0.62],
+            ['--dsw-static-neutral-800', 0.62],
+            ['--dsw-static-neutral-850', 0.62],
+            ['--dsw-alias-markdown-code-block', 0.9],
+            ['--dsw-alias-markdown-code-block-banner', 1],
+            ['--dsw-alias-markdown-inline-code', 0.7],
+            ['--dsw-specific-bubble', 1],
           ]
 
           /** `panels` = opaque (leave theme fills) | half | clear. */
@@ -227,6 +249,9 @@ window.__ModuleLoader__.load({
             const raised = Math.min(0.96, alpha + 0.32)
             for (const token of LAYER_TOKENS) tokens[token] = rgba('9, 12, 16', alpha)
             for (const token of RAISED_TOKENS) tokens[token] = rgba('9, 12, 16', raised)
+            for (const [token, weight] of CONTENT_TOKENS) {
+              tokens[token] = rgba('9, 12, 16', Math.min(0.96, alpha * weight))
+            }
             return tokens
           }
 

package/index.js

@@ -212,15 +212,16 @@ async function readJsonBody(req, limit = MAX_STATE_BYTES) {
 }
 
 /** Accept only the shape the client half writes; unknown keys are dropped. */
-const PARAM_KEYS = new Set(['enabled', 'glass', 'brightness', 'panels', 'blur', 'scale', 'fps', 'speed', 'volume', 'muted'])
+const PARAM_KEYS = new Set(['enabled', 'glass', 'brightness', 'panels', 'blur', 'scale', 'fps', 'speed', 'loop', 'loopSeconds', 'audioMode', 'audioSeconds', 'volume', 'muted'])
 const PANEL_LEVELS = new Set(['opaque', 'half', 'clear'])
+const AUDIO_MODES = new Set(['loop', 'once'])
 
 function sanitizeParams(raw) {
   const out = {}
   if (raw === null || typeof raw !== 'object' || Array.isArray(raw)) return out
   for (const [key, value] of Object.entries(raw)) {
     if (!PARAM_KEYS.has(key)) continue
-    if (key === 'enabled' || key === 'muted') {
+    if (key === 'enabled' || key === 'muted' || key === 'loop') {
       if (typeof value === 'boolean') out[key] = value
       continue
     }
@@ -228,6 +229,10 @@ function sanitizeParams(raw) {
       if (PANEL_LEVELS.has(value)) out[key] = value
       continue
     }
+    if (key === 'audioMode') {
+      if (AUDIO_MODES.has(value)) out[key] = value
+      continue
+    }
     if (typeof value === 'number' && Number.isFinite(value)) out[key] = value
   }
   return out

package/native-dist/defaults.json

@@ -8,6 +8,10 @@
     "scale": 1,
     "fps": 30,
     "speed": 1,
+    "loop": false,
+    "loopSeconds": 20,
+    "audioMode": "loop",
+    "audioSeconds": 60,
     "volume": 60,
     "muted": false
   },
@@ -17,8 +21,11 @@
     "panels": { "values": ["opaque", "half", "clear"] },
     "blur": { "min": 0, "max": 12, "step": 0.5, "unit": "px" },
     "fps": { "values": [15, 20, 30, 60] },
-    "scale": { "values": [0.5, 0.75, 1, 1.25, 1.5] },
+    "scale": { "values": [0.25, 0.35, 0.4, 0.5, 0.6, 0.75, 1, 1.25, 1.5, 1.75, 2] },
     "speed": { "min": 0, "max": 2, "step": 0.05, "unit": "x" },
+    "loopSeconds": { "min": 5, "max": 120, "step": 1, "unit": "s" },
+    "audioMode": { "values": ["loop", "once"] },
+    "audioSeconds": { "min": 10, "max": 600, "step": 5, "unit": "s" },
     "volume": { "min": 0, "max": 100, "step": 1, "unit": "%" }
   }
 }

package/native-dist/panel.html

@@ -13,8 +13,9 @@
     --line: rgba(15, 23, 42, .12);
     --field: rgba(15, 23, 42, .045);
     --field-hover: rgba(15, 23, 42, .09);
-    --accent: #0b8a80;
-    --accent-soft: rgba(11, 138, 128, .12);
+    /* DSH native brand blue (one step darker than #4176e6 so 11px values stay readable) */
+    --accent: #3568dc;
+    --accent-soft: rgba(53, 104, 220, .12);
     --pop: rgba(255, 255, 255, .99);
     --shadow: 0 18px 44px rgba(15, 23, 42, .18);
     --danger: #c0362c;
@@ -27,8 +28,9 @@
     --line: rgba(255, 255, 255, .13);
     --field: rgba(255, 255, 255, .06);
     --field-hover: rgba(255, 255, 255, .11);
-    --accent: #8fe9e4;
-    --accent-soft: rgba(143, 233, 228, .14);
+    /* DSH deepseek-400: the same blue the native dark UI uses */
+    --accent: #7aaaff;
+    --accent-soft: rgba(122, 170, 255, .16);
     --pop: rgba(18, 24, 32, .99);
     --shadow: 0 18px 50px rgba(0, 0, 0, .45);
     --danger: #ff8d7e;
@@ -64,8 +66,21 @@
   .panel.wide { width: 560px; }
   .panel.open { display: block; }
 
-  /* full-page mode (rendered in the main column through the sidebar entry) */
-  body.mode-main { overflow: auto; height: 100%; }
+  /* full-page mode (rendered in the main column through the sidebar entry).
+     `html` must carry the height too: a percentage height on `body` alone resolves
+     against `html`'s auto height, so the page just grew past the viewport and the
+     bottom of the settings was unreachable. */
+  html.mode-main, body.mode-main { height: 100%; }
+  body.mode-main { overflow-y: auto; overflow-x: hidden; }
+  /* standalone preview (parent === window): same fixed-height scrolling body */
+  html.standalone, body.standalone { height: 100%; }
+  body.standalone { overflow-y: auto; overflow-x: hidden; }
+  /* a visible (but unobtrusive) scrollbar so the page reads as scrollable */
+  body.mode-main::-webkit-scrollbar, body.standalone::-webkit-scrollbar { width: 10px; }
+  body.mode-main::-webkit-scrollbar-thumb, body.standalone::-webkit-scrollbar-thumb {
+    background: var(--line); border-radius: 99px; border: 3px solid transparent; background-clip: content-box;
+  }
+  body.mode-main::-webkit-scrollbar-track, body.standalone::-webkit-scrollbar-track { background: transparent; }
   body.mode-main .fab { display: none; }
   body.mode-main .panel {
     display: block; width: 100%; max-width: 960px; margin: 0 auto;
@@ -118,12 +133,28 @@
   input[type=text]:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
   textarea { resize: vertical; min-height: 92px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; line-height: 1.5; }
 
-  /* code tab: editable shader source of the running skin */
+  /* code tab: editable shader source of the running skin.
+     Both boxes are drag-resizable in height. The native textarea resizer is
+     disabled on purpose: it is a 15px invisible corner chrome that Electron
+     users never find (and hit-testing it through our padding is fiddly), so a
+     real, visible grip sits right under each box. Heights are remembered in
+     localStorage so the layout survives reloads. */
   .code-area {
-    min-height: 320px; max-height: 48vh; white-space: pre; overflow: auto;
-    tab-size: 2; font-size: 11.5px; line-height: 1.6; resize: vertical;
+    min-height: 240px; max-height: none; white-space: pre; overflow: auto;
+    tab-size: 2; font-size: 11.5px; line-height: 1.6; resize: none;
+  }
+  .code-area.sound { min-height: 90px; }
+  .code-grip {
+    display: flex; align-items: center; justify-content: center; gap: 4px;
+    height: 16px; margin: 2px 0 8px; border-radius: 6px; cursor: ns-resize;
+    touch-action: none; user-select: none; outline-offset: 2px;
+  }
+  .code-grip:hover { background: var(--field-hover); }
+  .code-grip:focus-visible { outline: 2px solid var(--accent); }
+  .code-grip::before, .code-grip::after {
+    content: ""; width: 14px; height: 2px; border-radius: 1px; background: var(--faint);
   }
-  .code-area.sound { min-height: 104px; max-height: 26vh; }
+  body.dragging-code { cursor: ns-resize; }
   #code-title { color: var(--accent); font-size: 11px; }
   #code-hint { margin: -2px 0 4px; }
 
@@ -264,6 +295,27 @@
       <input type="range" id="speed" min="0" max="2" step="0.05">
     </div>
 
+    <div class="row switch">
+      <label for="loop">画面循环</label>
+      <input type="checkbox" id="loop">
+    </div>
+    <div class="row" id="loop-seconds-row">
+      <div class="head"><label for="loop-seconds">循环周期</label><output id="loop-seconds-out"></output></div>
+      <input type="range" id="loop-seconds" min="5" max="120" step="1">
+      <div class="hint">有的作品播一次就停住了：打开后每到「循环周期」就把画面时间轴（iTime）归零重播，适合一次性的开场动画。带淡入淡出的作品（比如马里奥）每轮会看到它重新淡入，这是着色器本身的效果，不是没循环。只重置画面，不影响声音。</div>
+    </div>
+
+    <div class="row" id="audio-mode-row">
+      <div class="head"><label>音乐播放</label><output id="audio-mode-out"></output></div>
+      <div id="audio-mode-dd"></div>
+      <div class="hint">ShaderToy 的音乐通常是一段有长度的曲子（放完就静音），所以「循环重放」要配合下面的「音乐时长」：每到这个时长就把音乐时间轴归零再来一遍，接缝处做了 40ms 淡入淡出。「只播一次」= 放完就停，画面继续常驻。</div>
+    </div>
+    <div class="row" id="audio-seconds-row">
+      <div class="head"><label for="audio-seconds">音乐时长</label><output id="audio-seconds-out"></output></div>
+      <input type="range" id="audio-seconds" min="10" max="600" step="5">
+      <div class="hint">这首曲子有多长：循环重放时按它从头再来，只播一次时按它停止。从切到这个背景开始计时；开「画面循环」也建议把它设成和循环周期一致的时长。</div>
+    </div>
+
     <div class="row" id="volume-row">
       <div class="head"><label for="volume">音量</label><output id="volume-out"></output></div>
       <input type="range" id="volume" min="0" max="100" step="1">
@@ -319,11 +371,13 @@
     <div class="row">
       <div class="head"><label for="code-image">Image 代码</label><output id="code-image-info"></output></div>
       <textarea id="code-image" class="code-area" spellcheck="false" autocapitalize="off" autocorrect="off" wrap="off" placeholder="void mainImage(out vec4 fragColor, in vec2 fragCoord) { ... }"></textarea>
+      <div class="code-grip" data-code="code-image" role="separator" aria-orientation="horizontal" aria-label="拖动调整 Image 代码框高度（上下方向键也可以）" tabindex="0" title="拖动调整高度"></div>
     </div>
 
     <div class="row">
       <div class="head"><label for="code-sound">Sound 代码（可选，mainSound）</label><output id="code-sound-info"></output></div>
       <textarea id="code-sound" class="code-area sound" spellcheck="false" autocapitalize="off" autocorrect="off" wrap="off" placeholder="vec2 mainSound(float time) { ... }"></textarea>
+      <div class="code-grip" data-code="code-sound" role="separator" aria-orientation="horizontal" aria-label="拖动调整 Sound 代码框高度（上下方向键也可以）" tabindex="0" title="拖动调整高度"></div>
     </div>
 
     <div class="actions">
@@ -345,7 +399,7 @@
   const panel = $('panel')
 
   const state = { activeId: null, entries: [], overrides: {} }
-  let defaults = { params: { enabled: true, glass: 60, brightness: 100, panels: 'opaque', blur: 0, scale: 1, fps: 30, speed: 1, volume: 60, muted: true }, limits: {} }
+  let defaults = { params: { enabled: true, glass: 60, brightness: 100, panels: 'opaque', blur: 0, scale: 1, fps: 30, speed: 1, loop: false, loopSeconds: 20, audioMode: 'loop', audioSeconds: 60, volume: 60, muted: true }, limits: {} }
   let manifest = []
   let localPresets = null
   let open = MODE === 'main'
@@ -589,8 +643,10 @@
   let scaleDd
   let fpsDd
   let panelsDd
+  let audioModeDd
 
   const PANEL_KINDS = { opaque: '不透明', half: '半透明', clear: '透明' }
+  const AUDIO_MODES = { loop: '循环重放', once: '只播一次' }
 
   function sync() {
     const p = effective()
@@ -602,34 +658,77 @@
     $('panels-out').textContent = PANEL_KINDS[p.panels] ?? PANEL_KINDS.opaque
     $('blur').value = String(p.blur)
     $('blur-out').textContent = p.blur > 0 ? `${p.blur} px` : '关'
-    $('scale-out').textContent = `${p.scale}×`
+    $('scale-out').textContent = bufferSizeFor(p.scale)
     $('fps-out').textContent = `${p.fps} fps`
     $('speed').value = String(p.speed)
     $('speed-out').textContent = `${Number(p.speed).toFixed(2)}×`
+    $('loop').checked = p.loop === true
+    $('loop-seconds').value = String(p.loopSeconds ?? 20)
+    $('loop-seconds-out').textContent = `${Math.round(p.loopSeconds ?? 20)} s`
+    $('loop-seconds-row').hidden = p.loop !== true
     $('volume').value = String(p.volume)
     $('volume-out').textContent = `${Math.round(p.volume)}%`
     const sound = hasSound()
     $('volume-row').classList.toggle('dim', !sound)
     $('mute-row').classList.toggle('dim', !sound)
+    $('audio-mode-row').classList.toggle('dim', !sound)
+    $('audio-mode-out').textContent = AUDIO_MODES[p.audioMode] ?? AUDIO_MODES.loop
+    $('audio-seconds').value = String(p.audioSeconds ?? 60)
+    $('audio-seconds-out').textContent = `${Math.round(p.audioSeconds ?? 60)} s`
+    $('audio-seconds-row').hidden = !sound
     $('volume').disabled = !sound
     $('muted').disabled = !sound
     $('muted').checked = p.muted === true
     $('volume-hint').textContent = sound
-      ? (p.muted ? '已静音' : (audioState === 'running' ? '有声播放中' : audioState === 'suspended' ? '浏览器拦截了自动播放：点「开声音」，或点一下界面任意位置解锁' : '该作品带声音'))
+      ? (p.muted ? '已静音'
+        : audioState === 'running' ? '有声播放中'
+          : audioState === 'suspended' ? '浏览器拦截了自动播放：点「开声音」，或点一下界面任意位置解锁'
+            : audioState === 'ended' ? '音乐已播完（「只播一次」），画面照常'
+              : '该作品带声音')
       : '这个背景没有声音代码'
     $('audio').hidden = !(sound && audioState === 'suspended')
     if (presetDd) presetDd.setOptions(presetOptions(), state.activeId ?? '')
     if (scaleDd) scaleDd.setValue(String(p.scale))
     if (fpsDd) fpsDd.setValue(String(p.fps))
     if (panelsDd) panelsDd.setValue(p.panels ?? 'opaque')
-    $('scale-hint').textContent = `实际渲染缓冲：${bufferSize()}（DPR ≤ 1.5）`
+    if (audioModeDd) audioModeDd.setValue(p.audioMode === 'once' ? 'once' : 'loop')
+    $('scale-hint').textContent = `实际渲染缓冲：${bufferSizeFor(p.scale)}（窗口 ${viewportBasePixels().cssW} × ${viewportBasePixels().cssH}，DPR 上限 1.5；换窗口大小这里的数字会跟着变）`
     $('preset-kind').textContent = state.activeId ? (entryById(state.activeId) ? '我的' : '内置') : ''
   }
 
-  function bufferSize() {
-    const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
-    const scale = Number(effective().scale) || 1
-    return `${Math.round(window.innerWidth * dpr * scale)} × ${Math.round(window.innerHeight * dpr * scale)}`
+  /**
+   * The player iframe covers the whole app viewport, so the settings iframe has to
+   * ask its parent for the window size — `window.innerWidth` here is only the main
+   * column. DPR is capped at 1.5 by the player, match that.
+   */
+  function viewportBasePixels() {
+    let owner = window
+    try { if (!STANDALONE && parent) owner = parent } catch { /* cross-origin embed */ }
+    const cssW = Math.max(1, Math.round(Number(owner.innerWidth) || Number(window.innerWidth) || 1280))
+    const cssH = Math.max(1, Math.round(Number(owner.innerHeight) || Number(window.innerHeight) || 800))
+    const dpr = Math.min(Number(owner.devicePixelRatio) || Number(window.devicePixelRatio) || 1, 1.5)
+    return { cssW, cssH, dpr, w: Math.round(cssW * dpr), h: Math.round(cssH * dpr) }
+  }
+
+  /** "1280 × 810" — the drawing-buffer size this scale multiplies asks the player for. */
+  function bufferSizeFor(scale) {
+    const base = viewportBasePixels()
+    const factor = Math.min(2, Math.max(0.25, Number(scale) || 1))
+    return `${Math.round(base.w * factor)} × ${Math.round(base.h * factor)}`
+  }
+
+  function scaleOptions() {
+    const values = defaults.limits.scale?.values ?? [0.25, 0.35, 0.4, 0.5, 0.6, 0.75, 1, 1.25, 1.5, 1.75, 2]
+    return values.map(value => {
+      const note = value === 0.25 ? ' · 最省电' : value === 2 ? ' · 最吃显卡' : ''
+      return { value: String(value), text: `${bufferSizeFor(value)}（${value}×${note}）` }
+    })
+  }
+
+  /** Window size changes move every resolution label, so rebuild the list. */
+  function refreshScaleOptions() {
+    if (!scaleDd) return
+    scaleDd.setOptions(scaleOptions(), String(effective().scale))
   }
 
   function bindParams() {
@@ -638,9 +737,7 @@
       onChange: id => setActive(id),
     })
     scaleDd = makeDropdown($('scale-dd'), {
-      options: (defaults.limits.scale?.values ?? [0.5, 0.75, 1, 1.25, 1.5]).map(value => ({
-        value: String(value), text: value === 1 ? '1×（原生）' : `${value}×`,
-      })),
+      options: scaleOptions(),
       value: String(effective().scale),
       onChange: value => setParam('scale', Number(value)),
     })
@@ -658,12 +755,23 @@
       value: effective().panels ?? 'opaque',
       onChange: value => setParam('panels', value),
     })
+    audioModeDd = makeDropdown($('audio-mode-dd'), {
+      options: [
+        { value: 'loop', text: '循环重放（每「音乐时长」秒从头再来）' },
+        { value: 'once', text: '只播一次（播完停，画面常驻）' },
+      ],
+      value: effective().audioMode === 'once' ? 'once' : 'loop',
+      onChange: value => setParam('audioMode', value),
+    })
 
     $('enabled').addEventListener('change', event => setParam('enabled', event.target.checked))
     $('glass').addEventListener('input', event => setParam('glass', clamp(event.target.value, 20, 95, 60)))
     $('brightness').addEventListener('input', event => setParam('brightness', clamp(event.target.value, 30, 180, 100)))
     $('blur').addEventListener('input', event => setParam('blur', clamp(event.target.value, 0, 12, 0)))
     $('speed').addEventListener('input', event => setParam('speed', clamp(event.target.value, 0, 2, 1)))
+    $('loop').addEventListener('change', event => setParam('loop', event.target.checked))
+    $('loop-seconds').addEventListener('input', event => setParam('loopSeconds', clamp(event.target.value, 5, 120, 20)))
+    $('audio-seconds').addEventListener('input', event => setParam('audioSeconds', clamp(event.target.value, 10, 600, 60)))
     $('volume').addEventListener('input', event => setParam('volume', clamp(event.target.value, 0, 100, 60)))
     $('muted').addEventListener('change', event => setParam('muted', event.target.checked))
     $('reset').addEventListener('click', () => {
@@ -681,7 +789,7 @@
     document.addEventListener('keydown', event => {
       if (event.key === 'Escape' && MODE === 'popup' && open && !document.querySelector('.dd.open')) setOpen(false)
     })
-    window.addEventListener('resize', () => { sync(); reportSize() })
+    window.addEventListener('resize', () => { refreshScaleOptions(); sync(); reportSize() })
   }
 
   // ------------------------------------------------------------- library UI
@@ -872,6 +980,24 @@
 
   // ------------------------------------------------------------- code tab
   let codeLoadToken = 0
+  const CODE_HEIGHTS_KEY = 'shadertoy-skin.codeHeights'
+
+  /** Restore the user's own code-box heights (drag the bottom-right corner to change). */
+  function restoreCodeHeights() {
+    try {
+      const saved = JSON.parse(localStorage.getItem(CODE_HEIGHTS_KEY) ?? 'null')
+      if (!saved || typeof saved !== 'object') return
+      if (Number.isFinite(saved.image)) $('code-image').style.height = `${saved.image}px`
+      if (Number.isFinite(saved.sound)) $('code-sound').style.height = `${saved.sound}px`
+    } catch { /* storage may be blocked */ }
+  }
+
+  function saveCodeHeights() {
+    try {
+      const heights = { image: $('code-image').offsetHeight, sound: $('code-sound').offsetHeight }
+      localStorage.setItem(CODE_HEIGHTS_KEY, JSON.stringify(heights))
+    } catch { /* storage may be blocked */ }
+  }
 
   async function loadCode() {
     const token = ++codeLoadToken
@@ -895,9 +1021,9 @@
     $('code-image').value = image
     $('code-sound').value = sound
     $('code-title').textContent = name
-    $('code-hint').textContent = editable
+    $('code-hint').textContent = `${editable
       ? '正在编辑「我的」背景：保存后立刻重新编译运行，改动只存在本机。'
-      : '内置作品只读：保存会另存为「我的副本」并立刻运行，内置原件不动。'
+      : '内置作品只读：保存会另存为「我的副本」并立刻运行，内置原件不动。'} 两个代码框都能拖下面的把手调高度（聚焦把手后按 ↑/↓ 也行），会记住。`
     updateCodeInfo()
     setCodeNote('')
   }
@@ -956,6 +1082,52 @@
     }
   }
 
+  /** Visible drag grips under the code boxes (the native textarea resizer is off). */
+  function bindCodeGrips() {
+    for (const grip of document.querySelectorAll('.code-grip')) {
+      const area = $(grip.dataset.code)
+      if (!area) continue
+      const isSound = area.classList.contains('sound')
+      const minHeight = isSound ? 80 : 160
+      const maxHeight = () => Math.max(minHeight + 80, Math.round(window.innerHeight * 0.72))
+      const setHeight = (height) => {
+        const clamped = Math.min(maxHeight(), Math.max(minHeight, Math.round(height)))
+        area.style.height = `${clamped}px`
+      }
+      let startY = 0
+      let startHeight = 0
+      const stop = () => {
+        document.body.classList.remove('dragging-code')
+        window.removeEventListener('pointermove', onMove)
+        window.removeEventListener('pointerup', stop)
+        window.removeEventListener('pointercancel', stop)
+        saveCodeHeights()
+      }
+      const onMove = (event) => {
+        if (typeof event.clientY !== 'number') return
+        event.preventDefault()
+        setHeight(startHeight + (event.clientY - startY))
+      }
+      grip.addEventListener('pointerdown', (event) => {
+        if (event.button !== 0) return
+        event.preventDefault()
+        startY = event.clientY
+        startHeight = area.offsetHeight
+        document.body.classList.add('dragging-code')
+        try { grip.setPointerCapture(event.pointerId) } catch { /* older engines */ }
+        window.addEventListener('pointermove', onMove)
+        window.addEventListener('pointerup', stop)
+        window.addEventListener('pointercancel', stop)
+      })
+      grip.addEventListener('keydown', (event) => {
+        if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return
+        event.preventDefault()
+        setHeight(area.offsetHeight + (event.key === 'ArrowDown' ? (event.shiftKey ? 64 : 16) : (event.shiftKey ? -64 : -16)))
+        saveCodeHeights()
+      })
+    }
+  }
+
   function bindCode() {
     $('code-save').addEventListener('click', () => { void saveCode() })
     $('code-revert').addEventListener('click', () => {
@@ -963,6 +1135,8 @@
     })
     $('code-image').addEventListener('input', updateCodeInfo)
     $('code-sound').addEventListener('input', updateCodeInfo)
+    restoreCodeHeights()
+    bindCodeGrips()
     // Ctrl/Cmd+S inside the editor saves & runs instead of the browser dialog
     $('view-code').addEventListener('keydown', event => {
       if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
@@ -1002,6 +1176,10 @@
   async function boot() {
     applyTheme()
     watchParentTheme()
+    if (STANDALONE) {
+      document.documentElement.classList.add('standalone')
+      document.body.classList.add('standalone')
+    }
     try { defaults = await fetchJson('defaults.json') } catch { /* built-in defaults */ }
     try { manifest = await fetchJson(`${BASE}/presets/index.json`) } catch { manifest = [] }
     manifest = Array.isArray(manifest) ? manifest : []
@@ -1027,6 +1205,7 @@
     // shows, and a page refresh is enough to re-sync after an edit elsewhere.
     if (!STANDALONE) toParent({ type: 'params', params: effective() })
     if (MODE === 'main') {
+      document.documentElement.classList.add('mode-main')
       document.body.classList.add('mode-main')
       panel.classList.add('open')
     } else if (STANDALONE) {

package/native-dist/player.html

@@ -62,6 +62,10 @@
     tintMix: 0,    // 0..1   mix toward tint colour (this is the "glass" veil)
     tint: '#ececec',
     paused: false,
+    loop: false,        // wrap iTime every `loopSeconds` (shaders that only play once)
+    loopSeconds: 20,    // 5..120 loop period
+    audioMode: 'loop',  // 'loop' = music keeps playing | 'once' = stop after `audioSeconds`
+    audioSeconds: 60,   // 10..600 duration used by audioMode 'once'
     volume: 60,    // 0..100 mainSound output level
     muted: true,   // default muted; parent UI unmutes
   }
@@ -81,11 +85,16 @@
     if (!next || typeof next !== 'object') return
     const wasPaused = params.paused
     if ('speed' in next) params.speed = clamp(next.speed, 0, 2, 1)
-    if ('scale' in next) params.scale = clamp(next.scale, 0.5, 2, 1)
+    if ('scale' in next) params.scale = clamp(next.scale, 0.25, 2, 1)
     if ('blur' in next) params.blur = clamp(next.blur, 0, 12, 0)
     if ('fps' in next) params.fps = clamp(next.fps, 1, 120, 30)
     if ('dim' in next) { params.dim = clamp(next.dim, 0, 2, 1); lookExplicit = true }
     if ('tintMix' in next) { params.tintMix = clamp(next.tintMix, 0, 1, 0); lookExplicit = true }
+    if ('loop' in next) params.loop = Boolean(next.loop)
+    if ('loopSeconds' in next) params.loopSeconds = clamp(next.loopSeconds, 5, 120, 20)
+    const audioModeChanged = 'audioMode' in next || 'audioSeconds' in next
+    if (next.audioMode === 'loop' || next.audioMode === 'once') params.audioMode = next.audioMode
+    if ('audioSeconds' in next) params.audioSeconds = clamp(next.audioSeconds, 1, 600, 60)
     if ('volume' in next) params.volume = clamp(next.volume, 0, 100, 60)
     if ('muted' in next) params.muted = Boolean(next.muted)
     if (typeof next.tint === 'string' && /^#[0-9a-fA-F]{6}$/.test(next.tint)) {
@@ -103,6 +112,21 @@
       if (params.paused) stopAudioScheduler('paused')
       else if (audio.program && audio.ctx && audio.ctx.state === 'running') startAudioScheduler()
     }
+    // Switching between "music loops" and "music plays once" while running:
+    // re-evaluate immediately instead of waiting for the next preset switch.
+    if (audioModeChanged && audio.program && audio.ctx && audio.ctx.state === 'running' && !params.paused) {
+      if (params.audioMode === 'once' && audio.time >= params.audioSeconds) {
+        stopAudioScheduler('once')
+        setAudioState('ended', 'music played once')
+      } else if (params.audioMode === 'loop' && audioLoopPeriod() > 0 && audio.time >= params.audioSeconds) {
+        // once → loop after the piece already ended: play it again from the top
+        audio.time = 0
+        audio.chunks = 0
+        if (!audio.running) startAudioScheduler()
+      } else if (!audio.running) {
+        startAudioScheduler()
+      }
+    }
     resize()
   }
 
@@ -113,7 +137,7 @@
   function line() {
     const mode = DEBUG_BG ? 'debug-bg' : (program ? 'running' : 'idle')
     const note = diag.note ? ` · ${diag.note}` : ''
-    return `${mode} · gl=${diag.gl} · ${es3 ? 'es3' : 'es1'} · ${canvas.width}x${canvas.height} · ${state.fps}fps · frames=${state.frame} · audio=${audioStateLabel} · look=${params.dim.toFixed(2)}/${params.tintMix.toFixed(2)} · shader=${diag.preset}${note}`
+    return `${mode} · gl=${diag.gl} · ${es3 ? 'es3' : 'es1'} · ${canvas.width}x${canvas.height} · ${state.fps}fps · frames=${state.frame} · audio=${audioStateLabel} · look=${params.dim.toFixed(2)}/${params.tintMix.toFixed(2)} · loop=${params.loop ? `${params.loopSeconds.toFixed(0)}s` : 'off'} · music=${params.audioMode === 'once' ? `once/${params.audioSeconds.toFixed(0)}s` : `loop/${params.audioSeconds.toFixed(0)}s`} · shader=${diag.preset}${note}`
   }
   function refreshDiag() {
     diagBox.textContent = line()
@@ -539,8 +563,40 @@
     return true
   }
 
-  /** Render one chunk into the FBO and decode it into audio.left/right. */
-  function renderAudioChunk() {
+  /** Length of the music-loop seam fade, in seconds (keeps the repeat click-free). */
+  const AUDIO_SEAM_FADE = 0.04
+
+  /**
+   * Loop period for the *music* timeline. ShaderToy sound passes are finite pieces
+   * (they fade out and then stay silent), so "循环播放" cannot just keep feeding
+   * t=60,70,… — it has to wrap the audio clock at the configured length.
+   */
+  function audioLoopPeriod() {
+    const period = Number(params.audioSeconds)
+    return params.audioMode === 'loop' && Number.isFinite(period) && period > 0 ? period : 0
+  }
+
+  /** Per-sample gain that fades the music in/out at the loop seam and at "stop". */
+  function seamGain(time) {
+    let gain = 1
+    const period = audioLoopPeriod()
+    if (period > 0) {
+      if (time < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, time) / AUDIO_SEAM_FADE)
+      const left = period - time
+      if (left < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, left) / AUDIO_SEAM_FADE)
+    } else if (params.audioMode === 'once') {
+      const left = params.audioSeconds - time
+      if (left < AUDIO_SEAM_FADE) gain = Math.min(gain, Math.max(0, left) / AUDIO_SEAM_FADE)
+    }
+    return gain
+  }
+
+  /**
+   * Render one chunk that starts at `startTime` into the FBO and decode it into
+   * audio.left/right. The caller owns the clock (`audio.time` is not advanced here),
+   * so a chunk can be re-rendered at a wrapped time.
+   */
+  function renderAudioChunk(startTime, chunkSeconds) {
     if (!audio.program || !audio.sampleRate) return false
     if (!ensureAudioTarget()) return false
     const L = audio.locs
@@ -553,7 +609,7 @@
       gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)
       for (let i = 0; i < 4; i++) { gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, blackTex) }
       if (L.iResolution) gl.uniform3f(L.iResolution, AUDIO_CHUNK, 1, 1)
-      if (L.iTime) gl.uniform1f(L.iTime, audio.time)
+      if (L.iTime) gl.uniform1f(L.iTime, startTime)
       if (L.iTimeDelta) gl.uniform1f(L.iTimeDelta, 0)
       if (L.iFrame) gl.uniform1i(L.iFrame, audio.chunks)
       if (L.iMouse) gl.uniform4f(L.iMouse, 0, 0, 0, 0)
@@ -571,11 +627,14 @@
       gl.bindFramebuffer(gl.FRAMEBUFFER, null)
     }
     const bytes = audio.bytes
+    const perSample = chunkSeconds / AUDIO_CHUNK
     let peak = 0
     let sum = 0
     for (let i = 0; i < AUDIO_CHUNK; i++) {
-      const l = (((bytes[i * 4] << 8) | bytes[i * 4 + 1]) / 65535) * 2 - 1
-      const r = (((bytes[i * 4 + 2] << 8) | bytes[i * 4 + 3]) / 65535) * 2 - 1
+      const time = startTime + i * perSample
+      const gain = seamGain(time)
+      const l = ((((bytes[i * 4] << 8) | bytes[i * 4 + 1]) / 65535) * 2 - 1) * gain
+      const r = ((((bytes[i * 4 + 2] << 8) | bytes[i * 4 + 3]) / 65535) * 2 - 1) * gain
       audio.left[i] = l
       audio.right[i] = r
       const al = l < 0 ? -l : l
@@ -586,7 +645,6 @@
     }
     audio.peak = peak
     audio.rms = Math.sqrt(sum / (AUDIO_CHUNK * 2))
-    audio.time += audioChunkSeconds() * Math.max(params.speed, 0)
     if (AUDIOPROBE) window.__audioProbe = { peak, rms: audio.rms, chunks: audio.chunks }
     return true
   }
@@ -594,7 +652,13 @@
   function scheduleAudioChunk(when) {
     const ctx = audio.ctx
     if (!ctx || !audio.gain) return false
-    if (!renderAudioChunk()) return false
+    const chunkSeconds = audioChunkSeconds()
+    const period = audioLoopPeriod()
+    let start = audio.time
+    if (period > 0 && start >= period) start = start % period
+    if (params.audioMode === 'once' && start >= params.audioSeconds) return false
+    if (!renderAudioChunk(start, chunkSeconds)) return false
+    audio.time = start + chunkSeconds * Math.max(params.speed, 0)
     try {
       const buffer = ctx.createBuffer(2, AUDIO_CHUNK, audio.sampleRate)
       buffer.copyToChannel(audio.left, 0)
@@ -606,7 +670,7 @@
       source.start(when)
       audio.sources.add(source)
       audio.chunks++
-      audio.scheduledUntil = when + audioChunkSeconds()
+      audio.scheduledUntil = when + chunkSeconds
       return true
     } catch (error) {
       setAudioState('error', `audio schedule: ${error.message}`)
@@ -616,6 +680,15 @@
 
   function startAudioScheduler() {
     if (!audio.program || !audio.ctx || audio.ctx.state !== 'running' || audio.running) return
+    // "music plays once": never resurrect the scheduler after the duration ran out
+    if (params.audioMode === 'once' && audio.time >= params.audioSeconds) {
+      setAudioState('ended', 'music played once')
+      return
+    }
+    // music loop: switching modes (or shortening the length) may leave the clock
+    // past the new seam — restart the piece instead of playing silence forever
+    const period = audioLoopPeriod()
+    if (period > 0 && audio.time >= period) audio.time = audio.time % period
     audio.running = true
     const startAt = audio.ctx.currentTime + AUDIO_PREBUFFER
     audio.scheduledUntil = startAt
@@ -637,7 +710,7 @@
     }
     audio.sources.clear()
     audio.scheduledUntil = 0
-    if (audio.program && reason !== 'switch' && reason !== 'reset') {
+    if (audio.program && reason !== 'switch' && reason !== 'reset' && reason !== 'once') {
       setAudioState('suspended', reason)
     }
   }
@@ -647,6 +720,12 @@
     if (!ctx || !audio.program || audio.running !== true) return
     if (params.paused || document.hidden) { stopAudioScheduler('paused'); return }
     if (ctx.state !== 'running') { stopAudioScheduler('context'); return }
+    // music-once: the timeline passed the configured duration → stop for good
+    if (params.audioMode === 'once' && audio.time >= params.audioSeconds) {
+      stopAudioScheduler('once')
+      setAudioState('ended', 'music played once')
+      return
+    }
     if (audio.scheduledUntil < ctx.currentTime - 0.05) audio.scheduledUntil = ctx.currentTime + 0.15 // underrun: skip ahead
     for (let i = 0; i < 16 && audio.scheduledUntil < ctx.currentTime + AUDIO_LOOKAHEAD; i++) {
       if (!scheduleAudioChunk(audio.scheduledUntil)) return
@@ -730,8 +809,11 @@
 
   function resize() {
     const dpr = Math.min(window.devicePixelRatio || 1, 1.5)
-    const w = Math.max(1, Math.round((canvas.clientWidth || window.innerWidth) * dpr * params.scale))
-    const h = Math.max(1, Math.round((canvas.clientHeight || window.innerHeight) * dpr * params.scale))
+    // 2× on a big window can ask for an 8k-wide drawing buffer; clamp each side to
+    // the WebGL texture limit instead of letting the context fail.
+    const MAX_SIDE = 8192
+    const w = Math.min(MAX_SIDE, Math.max(1, Math.round((canvas.clientWidth || window.innerWidth) * dpr * params.scale)))
+    const h = Math.min(MAX_SIDE, Math.max(1, Math.round((canvas.clientHeight || window.innerHeight) * dpr * params.scale)))
     if (w !== canvas.width || h !== canvas.height) { canvas.width = w; canvas.height = h }
     diag.w = canvas.width
     diag.h = canvas.height
@@ -799,6 +881,11 @@
     state.last = now
     state.dt = dt
     state.time += dt * Math.max(params.speed, 0)
+    // Loop mode: shaders that animate once (and then sit still) replay from 0.
+    // Audio keeps its own realtime timeline, so looping is image-only.
+    if (params.loop && params.loopSeconds > 0 && state.time >= params.loopSeconds) {
+      state.time = state.time % params.loopSeconds
+    }
     draw()
     state.frame++
     diag.frames = state.frame
@@ -979,11 +1066,14 @@
   // ---------- boot
 
   // dev conveniences: ?dim= .9 &scale= .75 &speed= .5 &blur= 4 &fps= 60 &tintMix= .3
-  //                   &tint= 090c10 &volume= 70 &muted= 0
+  //                   &tint= 090c10 &volume= 70 &muted= 0 &loop= 1 &loopSeconds= 12
+  //                   &audioMode= once &audioSeconds= 2
   const overrides = {}
-  for (const key of ['dim', 'scale', 'speed', 'blur', 'fps', 'tintMix', 'volume']) {
+  for (const key of ['dim', 'scale', 'speed', 'blur', 'fps', 'tintMix', 'volume', 'loopSeconds', 'audioSeconds']) {
     if (q.has(key)) overrides[key] = Number(q.get(key))
   }
+  if (q.has('loop')) overrides.loop = q.get('loop') !== '0'
+  if (q.get('audioMode') === 'once' || q.get('audioMode') === 'loop') overrides.audioMode = q.get('audioMode')
   if (q.has('tint')) {
     const tint = q.get('tint').trim().replace(/^#/, '')
     if (/^[0-9a-fA-F]{6}$/.test(tint)) overrides.tint = `#${tint}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-shadertoy-skin",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Realtime ShaderToy background skin for DeepSeek Harness — a zero-runtime-dependency WebGL2 player, background library and glass UI integration.",
   "type": "module",
   "license": "MIT",