dsh-wisp 1.27.0 → 1.28.0

package/lib/client.template.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': '菜单分成折叠分组，另外多了「关于她」和「动作一览」两个弹窗。',
 }
 
 /* 更新这件事**这个插件自己做不到**，如实写在代码里，免得以后有人以为能：
@@ -564,6 +565,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) => {
@@ -618,6 +635,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 {
@@ -627,7 +655,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)
@@ -1468,6 +1498,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')
       }
 
@@ -1723,6 +1755,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)
@@ -1765,43 +1800,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，
@@ -1832,7 +2025,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()
@@ -1841,16 +2040,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')
@@ -1866,14 +2057,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'
 
@@ -1969,9 +2217,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))
         }
       })
@@ -2130,6 +2382,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),
@@ -2288,6 +2547,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 */ }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-wisp",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "description": "DeepSeek娘 — an unofficial floating desktop companion for the DeepSeek Harness UI. Zero dependencies; sprites inlined as data URIs; schedules on the Client timer service instead of the trapped browser timer globals.",
   "type": "module",
   "main": "lib/index.js",

package/tools/smoke.mjs

@@ -224,9 +224,28 @@ const cornerMenu = await page.evaluate(() => {
 })
 check(cornerMenu !== null, 'a menu can be opened near the bottom of her body',
   cornerMenu ? `pointer at y=${cornerMenu.pointerY}` : 'no candidate point hit her silhouette')
-check(cornerMenu !== null && cornerMenu.naiveBottom > 900,
-  'the case actually needs clamping (otherwise the next check is vacuous)',
-  cornerMenu ? `unclamped bottom would be ${cornerMenu.naiveBottom} > 900` : 'n/a')
+/* 顶层只有 7 项，"靠近底部"未必真的需要夹取 —— 原来那条 naiveBottom > 900 的守卫
+   在菜单变矮之后自己就失效了。改成：展开一个分组把菜单撑高，再验证同一个性质。
+   顺带这也是真浏览器里第一次验证折叠分组。 */
+const tallMenu = await page.evaluate(() => {
+  const row = [...document.querySelectorAll('.wisp-menu-item')].find((i) => i.dataset && i.dataset.group)
+  if (!row) return null
+  row.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  const menu = document.querySelector('.wisp-menu')
+  if (!menu) return null
+  const r = menu.getBoundingClientRect()
+  return {
+    items: menu.querySelectorAll('.wisp-menu-item').length,
+    left: r.left, top: r.top, right: r.right, bottom: r.bottom,
+    vw: window.innerWidth, vh: window.innerHeight,
+  }
+})
+check(tallMenu !== null && tallMenu.items > 7, 'a group expands inside the real menu',
+  tallMenu ? `${tallMenu.items} 项` : '没找到分组行')
+check(tallMenu !== null && tallMenu.left >= 0 && tallMenu.top >= 0
+  && tallMenu.right <= tallMenu.vw && tallMenu.bottom <= tallMenu.vh,
+  'and the expanded menu still stays inside the viewport',
+  tallMenu ? JSON.stringify(tallMenu) : 'n/a')
 check(cornerMenu !== null && cornerMenu.inside,
   'and the menu is clamped back inside the viewport',
   cornerMenu ? `bottom ${cornerMenu.bottom} (was ${cornerMenu.naiveBottom}), right ${cornerMenu.right}` : 'n/a')
@@ -239,8 +258,8 @@ const skinCount = await page.evaluate(() => {
   const s = window.__wisp.skins
   return Array.isArray(s) ? s.length : Object.keys(s ?? {}).length
 })
-check(menu !== null && menu.items.length === 14 + skinCount, 'the menu lists every entry',
-  `${menu?.items.length} items = 14 + ${skinCount} skin(s)`)
+check(menu !== null && menu.items.length === 7, 'the menu lists every entry',
+  `${menu?.items.length} items at the top level`)
 
 // 键盘：打开即聚焦第一项，方向键移动，Esc 关闭并把焦点还给她
 const kbd = await page.evaluate(() => {
@@ -266,6 +285,9 @@ check(kbd.focusAfter === 'wisp-body', 'and focus lands back on her, not on <body
 const openedAgain = await openMenu()
 check(openedAgain !== null, 'the menu reopens for the activation check')
 const zoomed = await page.evaluate(() => {
+  /* 大小两项收在「外观」组里：先展开，再点。 */
+  const group = [...document.querySelectorAll('.wisp-menu-item')].find((i) => i.dataset && i.dataset.group === '外观')
+  if (group) group.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
   const item = [...document.querySelectorAll('.wisp-menu-item')].find((i) => i.textContent === '放大一点')
   if (!item) return { missing: true }
   item.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
@@ -274,6 +296,58 @@ const zoomed = await page.evaluate(() => {
 check(zoomed.width === '630px' && zoomed.menuGone, 'a menu item runs and closes the menu',
   zoomed.missing ? 'the item was not found' : `width=${zoomed.width}`)
 
+/* 两个弹窗在真浏览器里的样子 —— 可见性、图片真的解码出来，这些假 DOM 测不到。
+   注意位置：必须放在键盘那一段**之后**。放前面会扰动它依赖的焦点状态
+   （实测：键盘段会退化成"焦点在哪都行"然后连挂三条）。 */
+const aboutView = await page.evaluate(() => {
+  window.__wisp.openAbout()
+  const card = document.querySelector('.wisp-dialog')
+  const back = document.querySelector('.wisp-dialog-backdrop')
+  if (!card) return { missing: true }
+  const r = card.getBoundingClientRect()
+  const text = [...card.querySelectorAll('.wisp-dialog-p, .wisp-dialog-foot-l, .wisp-dialog-foot-r')]
+    .map((el) => el.textContent).join(' ')
+  return {
+    visible: r.width > 200 && r.height > 80,
+    inView: r.left >= 0 && r.top >= 0 && r.right <= window.innerWidth && r.bottom <= window.innerHeight,
+    hasBackdrop: back !== null,
+    text,
+  }
+})
+check(aboutView.visible === true && aboutView.inView === true, 'the about dialog is really on screen',
+  JSON.stringify(aboutView))
+check(aboutView.hasBackdrop === true && (aboutView.text || '').includes('DeepSeek娘'),
+  'with a backdrop and her name in it', String((aboutView.text || '').slice(0, 48)))
+
+const actionsView = await page.evaluate(async () => {
+  window.__wisp.openActions()
+  const cells = [...document.querySelectorAll('.wisp-cell')]
+  await new Promise((resolve) => setTimeout(resolve, 400))
+  const loaded = cells.filter((c) => {
+    const im = c.querySelector('img')
+    return im && im.complete && im.naturalWidth > 0
+  }).length
+  const r = document.querySelector('.wisp-dialog').getBoundingClientRect()
+  return {
+    cells: cells.length, loaded,
+    inView: r.left >= 0 && r.top >= 0 && r.right <= window.innerWidth && r.bottom <= window.innerHeight,
+  }
+})
+check(actionsView.cells === 8, 'the action preview lists eight cells', String(actionsView.cells))
+check(actionsView.loaded === 8, 'and every sprite in it actually decoded',
+  actionsView.loaded + '/' + actionsView.cells)
+check(actionsView.inView === true, 'and it fits on screen', String(actionsView.inView))
+
+const previewed = await page.evaluate(() => {
+  const cell = [...document.querySelectorAll('.wisp-cell')].find((c) => c.dataset.mood === 'proud')
+  cell.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }))
+  return { dialog: window.__wisp.dialog, mood: window.__wisp.currentMood }
+})
+check(previewed.dialog === null && previewed.mood === 'proud',
+  'clicking a cell closes the dialog and poses her', JSON.stringify(previewed))
+
+
+
 /* 键盘入口：假 DOM 证明不了原生按键处理与事件冒泡（窗口上的捕获监听会先看到 keydown），
    所以这里用真实按键事件走一遍。 */
 const focusHer = await page.evaluate(() => {