dsh-wisp 1.27.0 → 1.28.0

package/README.md

@@ -448,6 +448,61 @@ node tools/audit-log.mjs --confirm <manifest>     # 生成后：并入代理登
 
 ## 变更
 
+### 1.28.0
+
+- **菜单不再是 19 个同级条目。** 原来 6 个动作 + 4 个开关 + 4 个角落 + 5 套皮肤全平铺，
+  只有三行**不可点**的小标题当分区 —— 那不是结构，是排版。
+
+  现在顶层 **7 项**，其余收进**可折叠分组**（点一下在原地展开/收起，带
+  `aria-expanded`）：
+
+  ```
+  关于她…
+  动作一览…
+  ▸ 外观     5 套皮肤 + 放大 / 缩小
+  ▸ 行为     说句话 / 睡一会儿 / 自己溜达 / 跟随状态 / 跑完撒花 / 饿了会说话
+  ▸ 位置     四个角落
+  版本与更新
+  先躲起来
+  ```
+
+  新手势打开菜单时分组一律收起（**展开动作不能被自己的重开清掉** —— 这条写错过一次：
+  清状态原来放在 `closeMenu()` 里，而"在原地重开"正是先 close 再 open，于是刚展开的分组
+  立刻被自己收回去）。
+
+- **两个真弹窗**（不再是塞进菜单的长条目）：
+
+  - **「关于她」** —— 她是谁、为什么长这样（社区规范：深蓝渐变长直发 / 大圆环呆毛 /
+    鲸鳍耳 / 女仆装）、白米饭的来由、这一版做了什么、版本号，以及"非官方同人、与官方无关"
+    和社区项目的出处。**介绍写进插件里**，别人装完不用翻仓库；
+  - **「动作一览」** —— 当前皮肤八个动作的缩略图 + 中文名，**点一下就让她当场做给你看**
+    （先关弹窗再摆姿势，否则弹窗正好盖着她）。预览用一个到期时间挡住稳态轮询
+    （`previewUntil`），所以刚摆的表情不会在同一轮里被算回去。
+
+  三种关法：**×** / **Esc** / **点背景**。关掉即从 DOM 移除，不常驻、不参与轮询。
+
+- **修掉两个真 bug**：
+
+  - 文档级 Esc 监听原本每次开弹窗都挂一个、而且**摘不掉**（清理函数是个空壳）——
+    改成全程只有一个，随实例销毁；
+  - 点预览格或点背景关掉弹窗后**焦点掉进 `<body>`** ✗（下一按 Enter 打不开菜单了）。
+    现在关弹窗一律把焦点交还给她 —— 这条是**真浏览器冒烟**抓到的，假 DOM 看不出来。
+
+- 预检 400 → **410 项**，冒烟 46 → **53 项**（真浏览器里新增：分组能展开、展开后菜单仍在
+  视口内、关于弹窗真的在屏幕上、动作一览八张图**真的解码完成 8/8**、点格子会关弹窗并摆姿势）。
+
+- 这一轮踩的坑（都记在这里，免得下次重演）：
+  1. 简化 DOM **不会汇总子节点的 `textContent`** —— 分组名、弹窗段落、页脚都因此读成空串，
+     改成"文本写在带类名的元素上"；
+  2. 替身的 `find()` / `all()` **会把已移除的节点也返回**，判断"弹窗关没关"必须显式认
+     `removed`；
+  3. 替身的 `all('wisp-menu-item')` 是**类名精确匹配**，多挂一个类就选不中了 ——
+     分组标记因此改放 `dataset`；
+  4. 测试里用了文件后半部分才定义的 helper（`ctxEvent`）→ TDZ，把整段套件截断过一次；
+  5. 冒烟里新插入的检查放在键盘段**之前**会扰动它依赖的焦点状态 → 挪到键盘段之后。
+
+### 1.27.0
+
 ### 1.27.0
 
 - **第八个情绪 `eat`：干饭。** 五套皮肤各一张，双手捧着一碗白米饭，眯眼笑。

package/lib/client.js

@@ -51,7 +51,7 @@ window.__ModuleLoader__.load({
     var exports = module.exports
     Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
 
-    const VERSION = '1.27.0'
+    const VERSION = '1.28.0'
 
 /* 每一版一句话。**必须写当前版本** —— 预检里有一条断言盯着它，
    忘了更新就会红，不会静默过期。 */
@@ -68,6 +68,7 @@ const WHATS_NEW = {
   '1.25.1': '内容与 1.25.0 相同，重新发布以修好安装源。',
   '1.26.0': '检查更新同时读 npm 和 GitHub，取更高的那个版本。',
   '1.27.0': '她饿了会捧出一碗白米饭，还有第八个表情。',
+  '1.28.0': '菜单分成折叠分组，另外多了「关于她」和「动作一览」两个弹窗。',
 }
 
 /* 更新这件事**这个插件自己做不到**，如实写在代码里，免得以后有人以为能：
@@ -615,6 +616,22 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
 .wisp-tab img{width:100%;height:100%;object-fit:contain;object-position:bottom center;pointer-events:none}
 @keyframes wisp-menu{0%{opacity:0;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
 @keyframes wisp-say{0%{opacity:0;transform:translate(-50%,-100%) translateY(6px) scale(.94)}12%{opacity:1;transform:translate(-50%,-100%) translateY(0) scale(1)}82%{opacity:1;transform:translate(-50%,-100%) translateY(0) scale(1)}100%{opacity:0;transform:translate(-50%,-100%) translateY(-6px) scale(.98)}}
+.wisp-menu-item[data-group]{display:flex;align-items:center;justify-content:space-between;gap:10px}
+.wisp-menu-caret{opacity:.55;font-size:10px}
+.wisp-menu-sub{padding-left:10px}
+.wisp-menu-sub .wisp-menu-item{padding-left:12px;opacity:.94}
+.wisp-dialog-backdrop{position:absolute;inset:0;background:rgba(6,12,26,.34);pointer-events:auto;animation:wisp-menu .16s ease}
+.wisp-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(340px,calc(100vw - 28px));max-height:min(440px,calc(100vh - 36px));overflow:auto;padding:14px 14px 10px;border-radius:14px;font-size:12.5px;line-height:1.6;color:var(--dsw-alias-label-primary,var(--wisp-say-fg));background:var(--dsw-alias-bg-overlay,var(--wisp-say-bg));border:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));box-shadow:0 18px 50px rgba(0,0,0,.34);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);pointer-events:auto;animation:wisp-menu .16s ease}
+.wisp-dialog-title{font-size:13.5px;font-weight:600;margin:0 22px 8px 0}
+.wisp-dialog p,.wisp-dialog .wisp-dialog-p{margin:0 0 8px}
+.wisp-dialog-x{position:absolute;right:8px;top:7px;width:22px;height:22px;border:0;border-radius:6px;background:none;color:inherit;font:inherit;font-size:15px;line-height:1;cursor:pointer;opacity:.7}
+.wisp-dialog-x:hover{opacity:1;background:var(--dsw-alias-bg-layer-2,rgba(120,170,255,.22))}
+.wisp-dialog-foot{display:flex;justify-content:space-between;gap:10px;margin-top:8px;padding-top:8px;border-top:1px solid var(--dsw-alias-border-l1,var(--wisp-say-line));font-size:11px;opacity:.72}
+.wisp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:2px 0 6px}
+.wisp-cell{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 5px;border:1px solid transparent;border-radius:9px;background:none;color:inherit;font:inherit;font-size:10.5px;cursor:pointer}
+.wisp-cell:hover{border-color:var(--dsw-alias-border-l1,var(--wisp-say-line));background:var(--dsw-alias-bg-layer-2,rgba(120,170,255,.18))}
+.wisp-cell img{width:100%;height:52px;object-fit:contain;object-position:bottom center;pointer-events:none}
+.wisp-credits{font-size:11px;opacity:.8;margin:6px 0 0}
 @media (prefers-reduced-motion:reduce){.wisp-body{animation:none!important}}`
 
     const installStyles = (styles) => {
@@ -669,6 +686,17 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
       return out
     }
 
+    /* 经 window 取 Image，而不是裸的全局名：这个半包在壳里由 new Function 求值，
+       裸名解析到的是**外层的全局作用域**，那里未必有 Image —— 实测在预检环境里就是
+       `TypeError: Image is not a constructor`（点动作预览换到新精灵图键时才踩出来）。
+       这个文件读时钟、读性能也是同样的规矩：一切经 window。
+       两处用它：命中蒙版、以及换皮肤后的预热。 */
+    const imageCtor = () => {
+      if (typeof window !== 'undefined' && window && typeof window.Image === 'function') return window.Image
+      if (typeof Image === 'function') return Image
+      return null
+    }
+
     const buildMask = (key, url) => {
       if (masks[key]) return
       try {
@@ -678,7 +706,9 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         if (!ctx || typeof ctx.drawImage !== 'function' || typeof ctx.getImageData !== 'function') return
         canvas.width = MASK_W
         canvas.height = MASK_H
-        const probe = new Image()
+        const ImageCtor = imageCtor()
+        if (ImageCtor === null) return
+        const probe = new ImageCtor()
         probe.onload = () => {
           try {
             ctx.drawImage(probe, 0, 0, MASK_W, MASK_H)
@@ -1519,6 +1549,8 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         // 否则刚摆出的表情在同一个 poll 周期里就被 setMood('idle') 抹掉了。
         if (mood === 'sleep' || mood === 'happy' || mood === 'poked' || mood === 'proud' || mood === 'care'
           || mood === 'eat' || mood === 'worried') return
+        /* 动作预览期间也要挡住稳态赋值，否则刚摆的表情在同一轮里被算回去 */
+        if (nowMs() < previewUntil) return
         setMood((busy || typing) ? 'alert' : 'idle')
       }
 
@@ -1774,6 +1806,9 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
       const MENU_PAD = 10
       let menuEl = null
       let menuOff = null
+      /* 折叠分组要"在原地重开"，所以记住这次的落点 */
+      let menuAtX = 0
+      let menuAtY = 0
 
       const closeMenu = () => {
         if (menuEl && menuEl.parentNode) menuEl.parentNode.removeChild(menuEl)
@@ -1816,43 +1851,201 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         { key: 'hungry', label: '饿了会说话' },
       ]
 
-      const menuItems = () => {
-        const items = [
-          { label: '说句话', run: () => { wake(true); say(pick(LINES.click)) } },
-          { label: '放大一点', run: () => applyConfig({ size: cfg.size + 0.5 }) },
-          { label: '缩小一点', run: () => applyConfig({ size: cfg.size - 0.5 }) },
-          /* 一个开关，不是一个单向动作：从迷你按钮右键打开菜单时，它必须能把她叫回来。 */
-          { label: hidden ? '回来吧' : '先躲起来', run: () => setHidden(!hidden) },
-          { label: '睡一会儿', run: () => setMood('sleep') },
-          { label: '版本与更新', run: () => showUpdate() },
-          { header: '行为' },
-        ]
-        for (const toggle of TOGGLES) {
-          const on = cfg[toggle.key] === true
-          items.push({
-            label: (on ? '✓ ' : '　') + toggle.label,
-            run: () => applyConfig({ [toggle.key]: !on }),
-          })
-        }
-        items.push({ header: '位置' })
-        for (const corner of CORNERS) {
-          items.push({ label: corner.label, run: () => goCorner(corner.label) })
-        }
-        items.push({ header: '皮肤' })
-        for (const id of SKIN_IDS) {
-          items.push({
-            label: (id === activeSkin ? '✓ ' : '　') + skinLabel(id),
-            skin: id,
-            run: () => {
-              if (id === activeSkin) return
-              applySkin(id)
-              say('换成' + skinLabel(id) + '了。')
-            },
-          })
+      /* ---- 弹窗 ----------------------------------------------------------------
+         菜单是"做事"的地方，不是"看东西"的地方：19 个同级条目，谁也找不到谁。
+         所以顶层只留动作，"她是谁"和"她有哪些动作"放进弹窗 —— 关掉即从 DOM 移除，
+         不常驻、不参与轮询。 */
+      let dialogEl = null
+      let dialogKind = null
+      let dialogKeyOff = null
+      let activeGroup = ''
+      /* 预览锁：动作预览要摆出某个表情给你看，而稳态轮询每一轮都会把它算回去。
+         用一个到期时间挡住轮询，比给每个情绪再加一个瞬时标记干净。 */
+      let previewUntil = 0
+      let previewHandle = null
+
+      const closeDialog = () => {
+        if (dialogEl && dialogEl.parentNode) dialogEl.parentNode.removeChild(dialogEl)
+        dialogEl = null
+        dialogKind = null
+      }
+
+      /* 弹窗不抢焦点，所以 Esc 只能靠一个常驻监听 —— 而且必须是**一个**：
+         每次开弹窗都挂一个新的会越积越多，引用还拿不回来，销毁时摘不掉。 */
+      const onDialogKey = (ev) => {
+        if (ev.key !== 'Escape' || dialogEl === null) return
+        ev.preventDefault()
+        closeDialog()
+        focusHer()
+      }
+      /* 文档级监听：真 document 一定有，但这里仍然判断一下 ——
+         "环境少一个方法"不该让整个插件起不来（预检的替身就少了它）。 */
+      if (typeof document.addEventListener === 'function') {
+        document.addEventListener('keydown', onDialogKey, true)
+      }
+
+      const para = (text) => {
+        const p = document.createElement('p')
+        p.className = 'wisp-dialog-p'
+        p.textContent = text
+        return p
+      }
+
+      const dialogFoot = (left, right) => {
+        const row = document.createElement('div')
+        row.className = 'wisp-dialog-foot'
+        const a = document.createElement('span')
+        /* 两个 span 各带类名：真 DOM 从父节点就能读到汇总文本，
+           简化 DOM 不能 —— 带类名意味着两边都能定位到这段文字。 */
+        a.className = 'wisp-dialog-foot-l'
+        a.textContent = left
+        const b = document.createElement('span')
+        b.className = 'wisp-dialog-foot-r'
+        b.textContent = right
+        row.appendChild(a)
+        row.appendChild(b)
+        return row
+      }
+
+      const openDialog = (kind, title, rows) => {
+        closeMenu()
+        closeDialog()
+        const back = document.createElement('div')
+        back.className = 'wisp-dialog-backdrop'
+        back.addEventListener('pointerdown', () => { closeDialog(); focusHer() })
+        const card = document.createElement('div')
+        card.className = 'wisp-dialog'
+        card.setAttribute('role', 'dialog')
+        card.setAttribute('aria-modal', 'true')
+        card.setAttribute('aria-label', title)
+        card.addEventListener('pointerdown', (ev) => ev.stopPropagation())
+        const head = document.createElement('div')
+        head.className = 'wisp-dialog-title'
+        head.textContent = title
+        card.appendChild(head)
+        const x = document.createElement('button')
+        x.className = 'wisp-dialog-x'
+        x.setAttribute('type', 'button')
+        x.setAttribute('aria-label', '关闭')
+        x.textContent = '×'
+        x.addEventListener('click', (ev) => { ev.preventDefault(); closeDialog(); focusHer() })
+        card.appendChild(x)
+        for (let i = 0; i < rows.length; i++) card.appendChild(rows[i])
+        back.appendChild(card)
+        layer.appendChild(back)
+        dialogEl = back
+        dialogKind = kind
+        return card
+      }
+
+      /* 八个动作。key 是精灵图名，mood 是运行时该摆的状态 —— 两者不一样：
+         "干活中"的图叫 work，但状态是 alert；"待机"两者都是 idle。 */
+      const ACTION_ROWS = [
+        { key: 'idle', mood: 'idle', label: '待机', say: '平时就是这样。' },
+        { key: 'happy', mood: 'happy', label: '开心', say: '嗯，开心。' },
+        { key: 'sleepy', mood: 'sleep', label: '打盹', say: '困了……' },
+        { key: 'work', mood: 'alert', label: '干活中', say: '在跑呢，别催。' },
+        { key: 'attn', mood: 'attn', label: '有动静', say: '我注意到了。' },
+        { key: 'poked', mood: 'poked', label: '被戳', say: '干嘛。' },
+        { key: 'proud', mood: 'proud', label: '得意', say: '跑完了，不错吧。' },
+        { key: 'eat', mood: 'eat', label: '干饭', say: '先吃一碗。' },
+      ]
+
+      const previewMood = (key) => {
+        const row = ACTION_ROWS.find((r) => r.key === key)
+        if (!row) return false
+        closeDialog()
+        /* 被点掉的那个格子随弹窗一起消失了，焦点必须有人接 —— 否则掉进 <body>。 */
+        focusHer()
+        previewUntil = nowMs() + 6000
+        setMood(row.mood)
+        /* 预览必须**自己有到期时间**：预览的姿势可能在"稳态轮询不许覆盖"的名单里
+           （干饭就在），光靠 previewUntil 挡住轮询的话，锁一过期她就被永久卡在那个表情上。
+           到点主动交还稳态，之后该是什么由轮询说了算。 */
+        if (previewHandle) clock.cancel(previewHandle)
+        previewHandle = clock.after(6200, () => { setMood('idle') })
+        say(row.say)
+        return true
+      }
+
+      const actionsDialog = () => {
+        const grid = document.createElement('div')
+        grid.className = 'wisp-grid'
+        for (const row of ACTION_ROWS) {
+          const cell = document.createElement('button')
+          cell.className = 'wisp-cell'
+          cell.setAttribute('type', 'button')
+          cell.setAttribute('aria-label', '预览' + row.label)
+          cell.dataset.mood = row.key
+          const im = document.createElement('img')
+          im.setAttribute('alt', '')
+          im.src = resolveSprite(spriteOf(row.key))
+          const cap = document.createElement('span')
+          cap.textContent = row.label
+          cell.appendChild(im)
+          cell.appendChild(cap)
+          cell.addEventListener('click', (ev) => { ev.preventDefault(); previewMood(row.key) })
+          grid.appendChild(cell)
         }
-        return items
+        return openDialog('actions', '动作一览', [
+          para('点一个动作，她就当场做给你看。（图都是当前皮肤 ' + skinLabel(activeSkin) + '）'),
+          grid,
+          dialogFoot('共 ' + ACTION_ROWS.length + ' 个动作', '按 Esc 关闭'),
+        ])
       }
 
+      const aboutDialog = () => {
+        const note = WHATS_NEW[VERSION]
+        return openDialog('about', '关于她', [
+          para('DeepSeek娘 —— DSH 界面上的浮动桌宠。她会跟着你的状态换表情：你打字她在忙，你闲着她在晃，你跑完一轮她替你高兴。'),
+          para('她的样子照社区规范来：深蓝色渐变长直发、头顶一个大圆环呆毛、两片鲸鳍耳、女仆装。'),
+          para('白米饭是算力的硬通货 —— 所以她每隔一阵会捧碗出来补点碳水。'),
+          para('这一版：' + (note || VERSION)),
+          para('形象与设定参考社区项目 Neko3000/deepseek-whalechan（设定文档 CC BY-NC-SA 4.0，原作者 B站 ZipZipPipe、上善无形）。'),
+          dialogFoot('非官方同人作品，与 DeepSeek 官方无关', 'v' + VERSION),
+        ])
+      }
+
+      /* 顶层只放"做什么"，外观/行为/位置收进可折叠的分组 —— 19 个同级条目等于没有结构。 */
+      const menuItems = () => [
+        { label: '关于她…', run: () => aboutDialog() },
+        { label: '动作一览…', run: () => actionsDialog() },
+        {
+          group: '外观',
+          children: [
+            ...SKIN_IDS.map((id) => ({
+              label: (id === activeSkin ? '✓ ' : '　') + skinLabel(id),
+              skin: id,
+              run: () => {
+                if (id === activeSkin) return
+                applySkin(id)
+                say('换成' + skinLabel(id) + '了。')
+              },
+            })),
+            { label: '放大一点', run: () => applyConfig({ size: cfg.size + 0.5 }) },
+            { label: '缩小一点', run: () => applyConfig({ size: cfg.size - 0.5 }) },
+          ],
+        },
+        {
+          group: '行为',
+          children: [
+            { label: '说句话', run: () => { wake(true); say(pick(LINES.click)) } },
+            { label: '睡一会儿', run: () => setMood('sleep') },
+            ...TOGGLES.map((t) => ({
+              label: (cfg[t.key] === true ? '✓ ' : '　') + t.label,
+              run: () => applyConfig({ [t.key]: cfg[t.key] !== true }),
+            })),
+          ],
+        },
+        {
+          group: '位置',
+          children: CORNERS.map((c) => ({ label: c.label, run: () => goCorner(c.label) })),
+        },
+        { label: '版本与更新', run: () => showUpdate() },
+        /* 一个开关，不是一个单向动作：从迷你按钮右键打开菜单时，它必须能把她叫回来。 */
+        { label: hidden ? '回来吧' : '先躲起来', run: () => setHidden(!hidden) },
+      ]
+
       /* ---- 菜单的键盘驱动 ----
          菜单已经声明了 role="menu"，没有键盘支持的话，对屏幕阅读器来说比不声明更糟 ——
          它宣布了一个你无法操作的菜单。采用 roving tabindex：只有当前项 tabindex=0，
@@ -1883,7 +2076,13 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         }
       }
 
-      const openMenu = (x, y) => {
+      /* keepGroup：点分组是"在原地重开"，得把刚设好的分组带过去。
+         其他入口都是新手势，一律回到收起状态 —— 所以这个重置放在这里，
+         而不是 closeMenu 里（放那里会让展开动作把自己清掉）。 */
+      const openMenu = (x, y, keepGroup) => {
+        menuAtX = x
+        menuAtY = y
+        if (keepGroup !== true) activeGroup = ''
         closeMenu()
         stopGlide()
         const items = menuItems()
@@ -1892,16 +2091,8 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         menu.className = 'wisp-menu'
         menu.setAttribute('role', 'menu')
         menu.style.position = 'absolute'
-        for (let i = 0; i < items.length; i++) {
-          const spec = items[i]
-          if (spec.header !== undefined) {
-            // 小标题是分组标签，不是菜单项 —— 不能被聚焦，否则键盘用户会停在一个按不动的东西上
-            const head = document.createElement('div')
-            head.className = 'wisp-menu-head'
-            head.textContent = spec.header
-            menu.appendChild(head)
-            continue
-          }
+        let heads = 0
+        const addItem = (spec, sub) => {
           const btn = document.createElement('button')
           btn.className = 'wisp-menu-item'
           btn.setAttribute('type', 'button')
@@ -1917,14 +2108,71 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
           })
           menu.appendChild(btn)
           menuButtons.push(btn)
+          return btn
+        }
+        for (let i = 0; i < items.length; i++) {
+          const spec = items[i]
+          if (spec.header !== undefined) {
+            // 小标题是分组标签，不是菜单项 —— 不能被聚焦，否则键盘用户会停在一个按不动的东西上
+            const head = document.createElement('div')
+            head.className = 'wisp-menu-head'
+            head.textContent = spec.header
+            menu.appendChild(head)
+            heads++
+            continue
+          }
+          if (spec.group !== undefined) {
+            /* 折叠分组：一行标题，点一下在原地展开/收起（重开同一个坐标，不是新开一个菜单）。 */
+            const open = activeGroup === spec.group
+            const btn = document.createElement('button')
+            btn.className = 'wisp-menu-item'
+            btn.setAttribute('type', 'button')
+            btn.setAttribute('role', 'menuitem')
+            btn.setAttribute('tabindex', '-1')
+            btn.setAttribute('aria-expanded', open ? 'true' : 'false')
+            btn.dataset.group = spec.group
+            btn.dataset.open = open ? 'true' : 'false'
+            /* 文字直接写在按钮上，不拆成子 span：真 DOM 会汇总子节点的 textContent，
+               但简化 DOM（预检的替身）不会 —— 依赖那种汇总会让分组名在替身里变成空串。 */
+            btn.textContent = (open ? '▾ ' : '▸ ') + spec.group
+            btn.addEventListener('pointerdown', (ev) => ev.stopPropagation())
+            btn.addEventListener('click', (ev) => {
+              ev.preventDefault(); ev.stopPropagation()
+              activeGroup = open ? '' : spec.group
+              openMenu(menuAtX, menuAtY, true)
+            })
+            menu.appendChild(btn)
+            menuButtons.push(btn)
+            if (!open) continue
+            const wrap = document.createElement('div')
+            wrap.className = 'wisp-menu-sub'
+            for (const child of spec.children) {
+              const cb = document.createElement('button')
+              cb.className = 'wisp-menu-item'
+              cb.setAttribute('type', 'button')
+              cb.setAttribute('role', 'menuitem')
+              cb.setAttribute('tabindex', '-1')
+              cb.textContent = child.label
+              cb.addEventListener('pointerdown', (ev) => ev.stopPropagation())
+              cb.addEventListener('click', (ev) => {
+                ev.preventDefault(); ev.stopPropagation()
+                closeMenu()
+                try { child.run() } catch (err) { /* 同上 */ }
+              })
+              wrap.appendChild(cb)
+              menuButtons.push(cb)
+            }
+            menu.appendChild(wrap)
+            continue
+          }
+          addItem(spec, false)
         }
         // 先挂上去再定位：定位要用最终尺寸，而尺寸只有渲染后才知道
         layer.appendChild(menu)
         menuEl = menu
         const w = MENU_W
-        // 高度只用于夹取落点，所以按条目类型估算即可（假 DOM 里没有布局可测）
-        let hs = MENU_PAD
-        for (const it of items) hs += it.header !== undefined ? 22 : MENU_ITEM_H
+        // 高度只用于夹取落点，所以按**实际渲染出来的行数**估算即可（假 DOM 里没有布局可测）
+        const hs = MENU_PAD + heads * 22 + menuButtons.length * MENU_ITEM_H
         menu.style.left = Math.round(clamp(x, 8, Math.max(8, vw() - w - 8))) + 'px'
         menu.style.top = Math.round(clamp(y, 8, Math.max(8, vh() - hs - 8))) + 'px'
 
@@ -2020,9 +2268,13 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
       /* warm the other sprites after the first frame so mood changes never blink */
       clock.after(1500, () => {
         if (destroyed) return
+        /* 预热其余的精灵图。没有 Image 构造函数的地方（简化 DOM）就跳过，
+           预热本来就是锦上添花，不该把整只宠物带崩 —— 这里原来硬用裸的 new Image()。 */
+        const ImageCtor = imageCtor()
+        if (ImageCtor === null) return
         for (const key in SPRITES[activeSkin]) {
           if (key === currentSprite) continue
-          const pre = new Image()
+          const pre = new ImageCtor()
           pre.src = resolveSprite(spriteOf(key))
         }
       })
@@ -2181,6 +2433,13 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
         setSkin: applySkin,
         showUpdate,
         checkForUpdate,
+        /* 弹窗与折叠分组：菜单结构变了之后，测试要能问"现在开着哪个弹窗 / 哪个分组"。 */
+        openAbout: () => aboutDialog(),
+        openActions: () => actionsDialog(),
+        closeDialog,
+        previewMood,
+        get dialog() { return dialogKind },
+        get menuGroup() { return activeGroup },
         get updateCheck() { return { ...updateCheck } },
         get hidden() { return hidden },
         hide: () => setHidden(true),
@@ -2339,6 +2598,8 @@ body[data-ds-dark-theme] .wisp-layer{--wisp-say-fg:#eaf2f8;--wisp-say-bg:rgba(20
           bodyEl.removeEventListener('keydown', onBodyKey)
           bodyEl.removeEventListener('contextmenu', onContext)
           closeMenu()
+          closeDialog()
+          if (dialogKeyOff) { dialogKeyOff(); dialogKeyOff = null }
           hideTab()
           if (typeof offTheme === 'function') {
             try { offTheme() } catch (e) { /* ignore */ }