dsh-design-studio 0.7.1 → 0.9.0

package/lib/picker.js

@@ -707,6 +707,8 @@
       dark: hasDark(),
       changes: pending ? { count: pending.count, whole: pending.whole } : null,
     })
+    postTop()
+    if (document.readyState !== 'complete') addEventListener('load', postTop, { once: true }) // 顶栏的底色可能等样式表 / 字体载完才定
     if (shown) reveal()
   }
 
@@ -1429,7 +1431,18 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       return !c || c === 'transparent' || /^rgba\(.*,\s*0\)$/.test(c) ? '' : c
     }
     const de = document.documentElement
-    return bg(de) || bg(document.body) || (/dark/.test(getComputedStyle(de).colorScheme) ? '#121212' : '#fff')
+    return bg(de) || bg(document.body) || (schemeDark() ? '#121212' : '#fff')
+  }
+
+  /**
+   * 页面实际用的是深色配色吗（决定没写底色时画布是白的还是深的）：color-scheme（没写看 <meta name="color-scheme">）只有 dark，
+   * 或 light、dark 都写了而系统偏好深色
+   */
+  function schemeDark() {
+    let s = String(getComputedStyle(document.documentElement).colorScheme || 'normal')
+    if (s === 'normal') { const m = document.querySelector('meta[name="color-scheme"]'); s = m ? String(m.getAttribute('content') || '') : '' }
+    if (!/dark/.test(s)) return false
+    return !/light/.test(s) || matchMedia('(prefers-color-scheme: dark)').matches
   }
 
   async function capture(opts) {
@@ -1578,6 +1591,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
 
     try {
+      const top = topDark() // 和复制页面同一刻量（后面等图片、字体时页面可能又变了）
       const root = walk(de)
       // 字体：页面样式表里的 @font-face，只带用到的字族
       const faces = []
@@ -1621,7 +1635,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       ctx.fillRect(0, 0, canvas.width, canvas.height)
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
       const png = await new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob 失败'))), 'image/png'))
-      return { png, w: W, h: H, scale }
+      return { png, w: W, h: H, scale, top }
     } finally {
       box.remove()
     }
@@ -1633,7 +1647,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 整页图从文档顶上画起，链接加上滚动距离；只截视口时就是视口里的位置
       const links = linksOf().map((l) => (d.full ? { ...l, x: l.x + scrollX, y: l.y + scrollY } : l))
         .filter((l) => l.x < r.w && l.y < r.h && l.x + l.w > 0 && l.y + l.h > 0)
-      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links })
+      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links, top: r.top })
     } catch (e) {
       post({ type: 'captured', id: d.id, error: String((e && e.message) || e) })
     }
@@ -1644,12 +1658,24 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   //   hscroll 超出屏幕（会横向滚动 / 被切掉） · clipped 文字被截断 · overflow 文字超出框 · overlap 文字叠在一起
   //   contrast 对比度不够 · tap 点击区太小 · tiny 字太小 · img 图片没加载出来 · fonts 字号太杂
   //   covered 被固定栏压住（滚到底也看不全） · tight 离固定栏太近 · jserr 页面脚本报错 · missing 样式表 / 脚本 / 字体没载出来
+  //   capsule 小程序右上角的胶囊（微信画的，页面盖不住）挡住了字或按钮
+  //   island 灵动岛挡住了字或按钮 · homebar 底栏里的字、图标伸进底部横条区 · tabbar 标签栏超过 5 项 · navbar 小程序这屏没有导航栏
+  //   winctl 桌面软件的窗口按钮（Mac 红绿灯 / Windows 右上角三个）挡住了字或按钮
   // 有意为之的不报：省略号（text-overflow: ellipsis）、行数截断（line-clamp）、可以滚动的区域（轮播）、很淡的装饰大字。
 
   const CHECK_PER = 8 // 每类最多报几条
   const CHECK_MAX = 40
   const CHECK_ATOMS = 600 // 最多看多少个带字的元素
   const CLICKABLE = 'a[href],button,[role="button"],[role="tab"],[role="link"],input:not([type="hidden"]),select,textarea,summary,[onclick],[data-href]'
+  // 小程序右上角的胶囊：离屏幕顶 48（状态栏 44 + 4）、离右边 7、87×32（和右侧栏外框画的一样）
+  const CAP = { top: 48, right: 7, w: 87, h: 32 }
+  // 预览手机的灵动岛：离顶 11、118×34、居中（和外框 .ddp-island 一样）；矮的手机（高不到宽的 1.9 倍）没有，也没有底部横条
+  const ISLAND = { top: 11, w: 118, h: 34 }
+  const HOMEBAR = 34 // 底部横条区（home indicator）的高
+  const NAVBAR = { top: 44, h: 44 } // 小程序导航栏：状态栏 44 下面那 44
+  // 桌面软件的窗口按钮（和右侧栏外框画的一样）：Mac 红绿灯在左上 x 20、y 20 起，三个 12px 圆点隔 8；Windows 最小化 / 最大化 / 关闭在右上角，各 46×32
+  const LIGHTS = { x: 20, y: 20, d: 12, gap: 8 }
+  const WINBTN = { w: 46, h: 32 }
   let checkMarks = []
 
   const isOurs = (el) => SIG_SKIP.has(el.tagName)
@@ -1672,13 +1698,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     return o
   }
 
-  /** 'rgb(1, 2, 3)' / 'rgba(1, 2, 3, .5)' / 'color(srgb …)' → [r, g, b, a]；别的写法（oklch 之类浏览器已经换算过）认不出就 null */
+  /**
+   * 'rgb(1, 2, 3)' / 'rgba(1, 2, 3, .5)' / 'color(srgb …)' → [r, g, b, a]。
+   * oklch()、oklab()、lab()、lch()、hwb()、color(display-p3 …) 这些（算好的值保留原写法，Tailwind 4 默认就是 oklch）：交给 canvas 换成 sRGB。认不出就 null
+   */
+  const colorMemo = new Map()
+  let colorCtx = null
   function rgba(s) {
     const m = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/.exec(s)
     if (m) return [+m[1], +m[2], +m[3], m[4] == null ? 1 : m[4].endsWith('%') ? parseFloat(m[4]) / 100 : +m[4]]
     const c = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/.exec(s)
     if (c) return [c[1] * 255, c[2] * 255, c[3] * 255, c[4] == null ? 1 : c[4].endsWith('%') ? parseFloat(c[4]) / 100 : +c[4]]
-    return null
+    if (typeof s !== 'string' || !/^(?:oklch|oklab|lab|lch|hwb|hsla?|color)\(/.test(s)) return null
+    if (colorMemo.has(s)) return colorMemo.get(s)
+    let out = null
+    try {
+      if (!colorCtx) { const cv = document.createElement('canvas'); cv.width = cv.height = 1; colorCtx = cv.getContext('2d', { willReadFrequently: true }) }
+      const g = colorCtx
+      g.fillStyle = '#010203'
+      g.fillStyle = s
+      if (g.fillStyle !== '#010203') {
+        g.clearRect(0, 0, 1, 1)
+        g.fillRect(0, 0, 1, 1)
+        const d = g.getImageData(0, 0, 1, 1).data
+        out = [d[0], d[1], d[2], d[3] / 255]
+      }
+    } catch { out = null }
+    if (colorMemo.size > 500) colorMemo.clear()
+    colorMemo.set(s, out)
+    return out
   }
   const over = (top, under) => {
     const a = top[3]
@@ -1693,37 +1741,158 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   const MEDIA = new Set(['IMG', 'VIDEO', 'CANVAS', 'IFRAME', 'PICTURE', 'OBJECT', 'EMBED'])
   /**
-   * 字背后的底色：从字往下一层层叠背景色，遇到不透明的为止；中间有背景图、渐变、图片视频就说不准，返回 null。
-   * 字在屏幕里时按实际叠放顺序找（字下面压着的可能不是祖先，比如首屏背景视频）；不在屏幕里就顺着祖先找
+   * 字背后的底色，和字叠上去以后的颜色：从字往下一层层叠背景色，遇到不透明（且不在半透明的组里）的为止；
+   * 透明度按组算（见 compose），字的透明度也一样。中间有背景图、渐变、图片视频就说不准，返回 null。
+   * 字在屏幕里时按实际叠放顺序找（字下面压着的可能不是祖先，比如首屏背景视频、不可点的装饰底）；
+   * 不在屏幕里、或被滚动区裁掉的按位置找（paintedBelow）。pool：页面上画了底的元素（见 paintPool）
    */
-  function backdrop(el, pt) {
+  function backdrop(el, pt, fg, pool) {
     let chain = null
-    if (pt && pt.x >= 0 && pt.y >= 0 && pt.x < innerWidth && pt.y < innerHeight) {
-      const stack = document.elementsFromPoint(pt.x, pt.y)
+    if (pt.x >= 0 && pt.y >= 0 && pt.x < innerWidth && pt.y < innerHeight) {
+      const stack = paintedAt(pt.x, pt.y) // 不可点的背景层（装饰底图、卡片底色）也算
       const i = stack.indexOf(el)
       if (i >= 0) chain = stack.slice(i)
     }
-    if (!chain) { chain = []; for (let e = el; e && e.nodeType === 1; e = e.parentElement) chain.push(e) }
+    if (!chain) chain = paintedBelow(el, pt.x, pt.y, pool())
+    if (!chain) return null
+    const { base, explicit, onCanvas } = canvasBase()
     const layers = []
-    let base = null
+    let floor = false
     for (const e of chain) {
       if (isOurs(e)) continue
+      if (e !== el && !e.contains(el) && opacityChain(e) <= 0.01) continue // 整个透明的装饰层（淡入前、藏起来的）什么都没画
       if (MEDIA.has(e.tagName) || (e instanceof SVGElement && e.tagName.toLowerCase() !== 'svg')) return null
       const cs = getComputedStyle(e)
       if (cs.backgroundImage && cs.backgroundImage !== 'none') return null
       const c = rgba(cs.backgroundColor)
       if (!c) return null
-      if (c[3] > 0) {
-        if (c[3] >= 0.999) { base = c; break }
-        layers.push(c)
+      if (onCanvas(e) || c[3] <= 0) continue
+      layers.push([e, c])
+      if (c[3] >= 0.999 && opacityChain(e) >= 0.999) { floor = true; break }
+    }
+    if (!floor && darkOn && !explicit) return null // 深色模式下画布底色不一定是白的
+    layers.reverse()
+    return { color: compose(layers, base), fg: fg ? compose([...layers, [el, fg]], base) : null }
+  }
+
+  /**
+   * 页面上画了东西、看得见的元素（底色、背景图、图片视频、SVG 图形）和它们现在的框，按位置找背景用。
+   * 按最近的固定 / 吸顶那层（自己或祖先，没有是 null）分组，组里按竖直位置分段放（rows，每段 POOL_ROW px）
+   */
+  const POOL_ROW = 256
+  function paintPool() {
+    const groups = new Map()
+    const pins = new Map()
+    const held = new Map() // 祖先里有给固定定位当包含块的（transform 之类）：里面的 fixed 其实跟着它走
+    const heldIn = (e) => {
+      if (!e || e.nodeType !== 1) return false
+      if (!held.has(e)) held.set(e, holds(getComputedStyle(e), true) || heldIn(e.parentElement))
+      return held.get(e)
+    }
+    const pinOf = (e) => {
+      if (!e || e.nodeType !== 1) return null
+      if (pins.has(e)) return pins.get(e)
+      const pos = getComputedStyle(e).position
+      const v = pos === 'sticky' || (pos === 'fixed' && !heldIn(e.parentElement)) ? e : pinOf(e.parentElement)
+      pins.set(e, v)
+      return v
+    }
+    const all = [document.documentElement, ...(document.body ? [document.body, ...document.body.getElementsByTagName('*')] : [])]
+    for (const e of all) {
+      if (isOurs(e)) continue
+      const svg = e instanceof SVGElement && e.tagName.toLowerCase() !== 'svg'
+      const cs = getComputedStyle(e)
+      if (cs.visibility !== 'visible') continue
+      const c = rgba(cs.backgroundColor)
+      if (!svg && !MEDIA.has(e.tagName) && c && c[3] <= 0 && cs.backgroundImage === 'none') continue
+      const r = e.getBoundingClientRect()
+      if (r.width < 1 || r.height < 1) continue
+      const pin = pinOf(e)
+      if (!groups.has(pin)) groups.set(pin, { rows: new Map(), all: [] })
+      const g = groups.get(pin)
+      g.all.push([e, r])
+      for (let k = Math.floor(r.top / POOL_ROW), n = Math.floor(r.bottom / POOL_ROW); k <= n; k++) {
+        if (!g.rows.has(k)) g.rows.set(k, [])
+        g.rows.get(k).push([e, r])
       }
     }
-    if (!base) {
-      if (darkOn) return null // 深色模式下画布底色不一定是白的
-      base = [255, 255, 255, 1]
+    // 固定 / 吸顶的那些对这个字来说看得见吗：整体透明的不算（量过记着）；被它自己那一支（不包着字的那几层）裁光的不算，
+    // 和字共用的滚动区暂时裁掉的照算（字滚进来时它也跟着进来）
+    const gone = new Map()
+    const clear = (e) => {
+      if (!gone.has(e)) gone.set(e, opacityChain(e) <= 0.01)
+      return gone.get(e)
+    }
+    const shown = (e, r, el) => !clear(e) && !!restBox(e, true, el)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+    return { groups, pinOf, shown, clear }
+  }
+
+  /** 底色不透明、没有背景图、不在半透明组里：叠到它就到底了 */
+  function solidFloor(e) {
+    if (MEDIA.has(e.tagName) || e instanceof SVGElement) return false
+    const cs = getComputedStyle(e)
+    const c = rgba(cs.backgroundColor)
+    return !!c && c[3] >= 0.999 && cs.backgroundImage === 'none' && opacityChain(e) >= 0.999
+  }
+
+  /**
+   * 字所在这一点（视口坐标，可以在屏幕外、被滚动区裁掉）下面画着的，从字往下排：框盖住这一点、画在字下面的（祖先，或按层叠顺序在它下面的）；
+   * 只算它自己那一支的裁剪。字在能滚的区域（main、横向轮播）里没滚进来时，对那个区域外面的东西（和区域自己的底）来说，
+   * 字滚进来以后在区域露出来的那块里——按就近滚进来算位置（由里往外一层层挪进去）。
+   * 和字不在同一个固定 / 吸顶层里的跟着窗口走，字滚进来以后它在哪说不准：横向盖得住、画在字下面、又不在到底那层（字自己的底也算）下面的，
+   * 返回 null（不查）。不滚页面（滚了会打断页面自己的滚动、带着外层画布一起滚）
+   */
+  function paintedBelow(el, x, y, pool) {
+    const mine = new Set([null]) // 和字一起动的：不固定的，和字所在的各层固定 / 吸顶
+    for (let p = pool.pinOf(el); p; p = pool.pinOf(p.parentElement)) mine.add(p)
+    // 字外面会裁的各层（由里往外）和字一层层挪进去以后的位置：pts[j] = 挪进了前 j 层
+    const boxes = []
+    const pts = [{ x, y }]
+    for (let e = el.parentElement; e && e !== document.body && e !== document.documentElement; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      const cx = cs.overflowX !== 'visible', cy = cs.overflowY !== 'visible'
+      if (!cx && !cy) continue
+      const r = e.getBoundingClientRect()
+      const kx = e.offsetWidth ? r.width / e.offsetWidth : 1 // 这层实际的缩放（transform、zoom），和 restBox 一样换成视口像素
+      const ky = e.offsetHeight ? r.height / e.offsetHeight : 1
+      const l = r.left + e.clientLeft * kx, t = r.top + e.clientTop * ky
+      const q = pts[pts.length - 1]
+      boxes.push(e)
+      pts.push({ x: cx ? Math.min(Math.max(q.x, l + 1), l + e.clientWidth * kx - 1) : q.x, y: cy ? Math.min(Math.max(q.y, t + 1), t + e.clientHeight * ky - 1) : q.y })
+    }
+    // c 看到的字在哪：c 外面那几层（c 自己能滚的话也算，它的底不跟着内容走）挪进去以后
+    const ptFor = (c) => { let j = 0; while (j < boxes.length && (boxes[j] === c || !boxes[j].contains(c))) j++; return pts[j] }
+    const near = new Set()
+    for (const pin of mine) {
+      const g = pool.groups.get(pin)
+      if (!g) continue
+      for (const k of new Set(pts.map((p) => Math.floor(p.y / POOL_ROW)))) for (const it of g.rows.get(k) || []) near.add(it)
+    }
+    const below = []
+    for (const [c, r] of near) {
+      if (c === el || el.contains(c)) continue
+      const p = ptFor(c)
+      if (p.x < r.left || p.x > r.right || p.y < r.top || p.y > r.bottom) continue
+      if (!paintsOver(el, c)) continue // 盖在字上面的不算
+      if (!c.contains(el)) {
+        const vis = restBox(c, true, el)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+        if (!vis || p.x < vis.l || p.x > vis.r || p.y < vis.t || p.y > vis.b) continue
+      }
+      below.push(c)
+    }
+    below.sort((a, b) => (paintsOver(a, b) ? -1 : paintsOver(b, a) ? 1 : 0))
+    const { onCanvas } = canvasBase()
+    const floor = [el, ...below].find((c) => !onCanvas(c) && solidFloor(c))
+    const out = pts[pts.length - 1].x // 各层都挪进去以后的横向位置
+    for (const [pin, g] of pool.groups) {
+      if (mine.has(pin)) continue
+      for (const [c, r] of g.all) {
+        if (out < r.left || out > r.right || pool.clear(c) || el.contains(c)) continue
+        if (floor && paintsOver(floor, c)) continue // 在到底那层下面（同一层的字都一样，记着）
+        if (paintsOver(el, c) && pool.shown(c, r, el)) return null
+      }
     }
-    for (let i = layers.length - 1; i >= 0; i--) base = over(layers[i], base)
-    return { color: base }
+    return [el, ...below]
   }
 
   /** 自己那几段文字在屏幕上的矩形（每行一块） */
@@ -1781,15 +1950,17 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   /** 滚完等两帧、再等新露出来的图和字体（页面的滚动监听、懒加载的图有机会跟上），再截图 */
   const afterScroll = (v) => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(v)))).then((v2) => settle().then(() => v2, () => v2))
 
-  function barsAt(edge) {
+  function barsAt(edge, inflow = false) {
     const out = []
     const vw = innerWidth, vh = innerHeight
+    // inflow：页面本身不滚（flex / grid 撑满一屏、中间内容区自己滚）时，贴着屏幕边的普通元素也算栏
+    const shell = inflow && (document.scrollingElement || document.documentElement).scrollHeight <= vh + 2
     const all = document.body.getElementsByTagName('*')
     for (let i = 0; i < all.length; i++) {
       const el = all[i]
       if (isOurs(el)) continue
       const pos = getComputedStyle(el).position
-      if (pos !== 'fixed' && pos !== 'sticky' && pos !== 'absolute') continue
+      if (pos !== 'fixed' && pos !== 'sticky' && pos !== 'absolute' && !shell) continue
       if (out.some((b) => b.el.contains(el))) continue // 栏里面的东西
       const r = el.getBoundingClientRect()
       if (r.width < vw * 0.5 || r.height < 16 || r.height > vh * BAR_MAX) continue
@@ -2137,10 +2308,12 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
     }
 
-    // 4. 对比度（WCAG：正文 4.5，大字 3）
+    // 4. 对比度（WCAG：正文 4.5，大字 3）。取底色那段装一次「量画着什么」的临时样式（见 withProbe），量完撤掉
     const sizes = new Map()
-    const tinyMin = kind === 'app' ? 10 : kind === 'tablet' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
-    for (const a of atoms) {
+    const tinyMin = kind === 'app' || kind === 'miniprogram' ? 10 : kind === 'tablet' || kind === 'desktop' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
+    let pool = null
+    const poolOf = () => pool || (pool = paintPool()) // 有字不在屏幕里才建
+    withProbe(() => { for (const a of atoms) {
       const { el, cs } = a
       const px = parseFloat(cs.fontSize) || 0
       sizes.set(Math.round(px * 2) / 2, (sizes.get(Math.round(px * 2) / 2) || 0) + 1)
@@ -2153,17 +2326,17 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       const op = opacityChain(el)
       // 半透明还在变的（淡入动画、跟着滚动渐显的）量的是中间状态，不算
       if (op < 0.999 && (!inView(el) || animating(el))) continue
-      const bd = backdrop(el, { x: (r0.l + r0.r) / 2, y: (r0.t + r0.b) / 2 })
-      if (!bd) continue
-      fg = over([fg[0], fg[1], fg[2], fg[3] * op], bd.color)
+      const bd = backdrop(el, { x: (r0.l + r0.r) / 2, y: (r0.t + r0.b) / 2 }, fg, poolOf)
+      if (!bd || !bd.fg) continue
+      fg = bd.fg
       const cr = ratio(fg, bd.color)
       const bold = +cs.fontWeight >= 700
       const need = px >= 24 || (bold && px >= 18.66) ? 3 : 4.5
       if (cr < need - 0.05) add('contrast', el, { ratio: Math.round(cr * 100) / 100, need, fg: hex(fg), bg: hex(bd.color) }, cr < need * 0.75 ? 2 : 1)
-    }
+    } })
 
-    // 5. 点击区太小（App / 平板 44，网页 24；文字中间的链接不算）
-    const minTap = kind === 'app' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' ? 24 : 0
+    // 5. 点击区太小（App / 小程序 / 平板 44，网页 24；文字中间的链接不算）
+    const minTap = kind === 'app' || kind === 'miniprogram' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' || kind === 'desktop' ? 24 : 0
     if (minTap) {
       const small = []
       for (const el of body.querySelectorAll(CLICKABLE)) {
@@ -2255,6 +2428,13 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       for (const f of document.fonts || []) if (f.status === 'error') add('missing', null, { what: 'font', src: String(f.family || '').replace(/['"]/g, '') }, 1)
     } catch { /* 老浏览器 */ }
 
+    // 13. 小程序：右上角胶囊挡住的字和按钮。不固定的按没滚时的位置算（滚下去本来就会从胶囊下面过）
+    if (kind === 'miniprogram') capsuleCheck(add, atoms, vw)
+    // 14. 手机：灵动岛挡住的、伸进底部横条区的，标签栏项数；小程序每屏要有导航栏
+    if (kind === 'app' || kind === 'miniprogram') phoneCheck(add, atoms, vw, kind)
+    // 15. 桌面软件：窗口按钮挡住的字和按钮
+    if (kind === 'desktop') winCheck(add, atoms, vw)
+
     issues.sort((x, y) => y.sev - x.sev)
     const se0 = se()
     return {
@@ -2263,6 +2443,740 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
+  /**
+   * 元素在「各层都没滚」时露出来的那块（视口坐标）：窗口、内部滚动区滚过的量加回去，被外层裁掉的去掉。
+   * 滚动量、边框都按那层实际的缩放（transform、zoom）换成视口像素；裁剪按 padding box、只裁 overflow 不是 visible 的那个方向。
+   * 绝对 / 固定定位的只受包含块和更外面的管；固定 / 吸顶的那层按现在看到的位置算，它外面的滚动不管、裁剪照算。全被裁掉返回 null。
+   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）。
+   * pos：量的是 el 的伪元素，它自己的定位方式（绝对定位的从 el 起只受包含块和更外面的裁，跳过中间不包它的层）
+   */
+  function restBox(el, now = false, upto = null, self = false, pos = '') {
+    const chain = []
+    let mode = pos === 'absolute' || pos === 'fixed' ? pos : ''
+    let pinned = pos === 'fixed'
+    for (let e = el; e && e !== document.documentElement; e = e.parentElement) {
+      if (upto && e !== el && e.contains(upto)) break
+      const cs = getComputedStyle(e)
+      if (e !== el || self) { // self：量的是 el 里面的字，el 自己的 overflow 也裁它
+        // clip-path 不管包含块，里面的都裁（形状在边框框以内，按边框框算个外沿）
+        const cp = cs.clipPath && cs.clipPath !== 'none' ? e.getBoundingClientRect() : null
+        const cpClip = cp && { l: cp.left, r: cp.right, t: cp.top, b: cp.bottom }
+        if ((mode === 'absolute' && !holds(cs, false)) || (mode === 'fixed' && !holds(cs, true))) {
+          if (cpClip) chain.push({ sx: 0, sy: 0, clip: cpClip })
+          continue
+        }
+        const r = e.getBoundingClientRect()
+        const kx = e.offsetWidth ? r.width / e.offsetWidth : 1
+        const ky = e.offsetHeight ? r.height / e.offsetHeight : 1
+        const box = cs.display !== 'inline' && cs.display !== 'contents' // overflow 对行内元素不起作用（clientWidth 是 0）
+        const cx = box && e !== document.body && cs.overflowX !== 'visible'
+        const cy = box && e !== document.body && cs.overflowY !== 'visible'
+        // overflow: clip 可以往外放出 overflow-clip-margin 那么多（写了 border-box 从边框外沿算、content-box 从内容区算）
+        const ocm = String(cs.overflowClipMargin || '')
+        const len = (/(-?[\d.]+)px/.exec(ocm) || [])[1]
+        const grow = (pad, bd) => (parseFloat(len) || 0) + (/border-box/.test(ocm) ? bd : /content-box/.test(ocm) ? -pad : 0)
+        const mx = cs.overflowX === 'clip' ? grow(parseFloat(cs.paddingLeft) || 0, e.clientLeft) * kx : 0
+        const my = cs.overflowY === 'clip' ? grow(parseFloat(cs.paddingTop) || 0, e.clientTop) * ky : 0
+        let clip = cx || cy ? {
+          l: cx ? r.left + e.clientLeft * kx - mx : -Infinity, r: cx ? r.left + (e.clientLeft + e.clientWidth) * kx + mx : Infinity,
+          t: cy ? r.top + e.clientTop * ky - my : -Infinity, b: cy ? r.top + (e.clientTop + e.clientHeight) * ky + my : Infinity,
+        } : null
+        if (cpClip) clip = clip ? { l: Math.max(clip.l, cpClip.l), r: Math.min(clip.r, cpClip.r), t: Math.max(clip.t, cpClip.t), b: Math.min(clip.b, cpClip.b) } : cpClip
+        chain.push({
+          sx: pinned || now ? 0 : e.scrollLeft * kx,
+          sy: pinned || now ? 0 : e.scrollTop * ky,
+          clip,
+        })
+      }
+      if (cs.position === 'fixed' || cs.position === 'sticky') pinned = true
+      mode = cs.position
+    }
+    let dx = pinned || now ? 0 : scrollX
+    let dy = pinned || now ? 0 : scrollY
+    let box = { l: -Infinity, r: Infinity, t: -Infinity, b: Infinity }
+    // 从外往里：每层的位置跟着它外面各层滚过的量走，它自己滚过的量只挪它里面的
+    for (let i = chain.length - 1; i >= 0; i--) {
+      const c = chain[i]
+      if (c.clip) box = { l: Math.max(box.l, c.clip.l + dx), r: Math.min(box.r, c.clip.r + dx), t: Math.max(box.t, c.clip.t + dy), b: Math.min(box.b, c.clip.b + dy) }
+      dx += c.sx
+      dy += c.sy
+    }
+    return (r) => {
+      const o = { l: Math.max(box.l, r.l + dx), r: Math.min(box.r, r.r + dx), t: Math.max(box.t, r.t + dy), b: Math.min(box.b, r.b + dy) }
+      return o.r - o.l > 0 && o.b - o.t > 0 ? o : null
+    }
+  }
+
+  /**
+   * 盖在页面上面、页面盖不住的一块（胶囊、灵动岛）：可点的东西和字横竖都伸进去 2px 以上就报。
+   * 按「各层都没滚」时露出来的那块量（不固定的滚下去本来就会从下面过）；px(o, ow, oh) 算报多少
+   */
+  function zoneCheck(add, atoms, zone, type, px, extra) {
+    const hit = new Set()
+    const into = (o) => {
+      if (!o) return 0
+      const ow = Math.min(o.r, zone.r) - Math.max(o.l, zone.l)
+      const oh = Math.min(o.b, zone.b) - Math.max(o.t, zone.t)
+      return ow > 2 && oh > 2 ? Math.round(px(o, ow, oh)) : 0
+    }
+    const check = (el, rects, self) => {
+      if (hiddenChain(el) || [...hit].some((h) => h.contains(el) || el.contains(h))) return
+      const rest = restBox(el, false, null, self)
+      const n = Math.max(0, ...rects.map((r) => into(rest(r))))
+      if (!n) return
+      hit.add(el)
+      add(type, el, { px: n, ...extra }, 2)
+    }
+    for (const el of document.body.querySelectorAll(CLICKABLE)) {
+      if (isOurs(el) || el.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      const r = el.getBoundingClientRect()
+      if (r.width >= 1 && r.height >= 1) check(el, [{ l: r.left, r: r.right, t: r.top, b: r.bottom }])
+    }
+    for (const a of atoms) check(a.el, a.rects, true) // 字被它自己 overflow 裁掉的那截看不见，不算
+  }
+
+  function capsuleCheck(add, atoms, vw) {
+    const cap = { l: vw - CAP.right - CAP.w, r: vw - CAP.right, t: CAP.top, b: CAP.top + CAP.h }
+    // 报伸进去多宽（从胶囊左边算）
+    zoneCheck(add, atoms, cap, 'capsule', (o, ow) => Math.min(ow, o.r - cap.l), { x: Math.round(cap.l) })
+  }
+
+  /** 页面 meta 说的是不是 Windows 软件（<meta name="dsh-design" content="desktop windows">）；不写是 Mac */
+  function deskOs() {
+    const m = document.querySelector('meta[name="dsh-design"]')
+    const words = String(m ? m.getAttribute('content') || '' : '').toLowerCase().split(/[\s,;]+/)
+    return words.some((w) => /^(windows|win|win10|win11)$/.test(w)) ? 'win' : 'mac'
+  }
+
+  /** 桌面软件：Mac 左上角红绿灯（连同四周 4px），Windows 右上角三个按钮，盖在页面上面，伸进去的字和按钮报 winctl */
+  function winCheck(add, atoms, vw) {
+    const os = deskOs()
+    if (os === 'win') {
+      const z = { l: vw - WINBTN.w * 3, r: vw, t: 0, b: WINBTN.h }
+      zoneCheck(add, atoms, z, 'winctl', (o, ow) => Math.min(ow, o.r - z.l), { os })
+    } else {
+      const z = { l: LIGHTS.x - 4, r: LIGHTS.x + LIGHTS.d * 3 + LIGHTS.gap * 2 + 4, t: LIGHTS.y - 4, b: LIGHTS.y + LIGHTS.d + 4 }
+      zoneCheck(add, atoms, z, 'winctl', (o, ow) => Math.min(ow, z.r - o.l), { os })
+    }
+  }
+
+  /**
+   * 伪元素在屏幕上的框（量不到它自己，按算出来的样式推）：
+   * - 绝对 / 固定定位：算出来的 left / top / 宽高摆进包含块；
+   * - 普通流：挨着前后的子元素（字、元素）摆，flex 按排列方向和对齐，行内的跟所在那行居中；
+   * 最后套上它自己的 translate / rotate / scale / transform（绕 transform-origin）
+   */
+  const pxv = (v) => (/px$/.test(v) ? parseFloat(v) : NaN)
+  /** 伪元素的边框框宽高（算出来的宽高按 box-sizing 加上内边距和边框）；算不出来的是 NaN */
+  function pseudoSize(ps) {
+    const extra = (a, b) => (ps.boxSizing === 'border-box' ? 0 : (parseFloat(ps['padding' + a]) || 0) + (parseFloat(ps['padding' + b]) || 0) + (parseFloat(ps['border' + a + 'Width']) || 0) + (parseFloat(ps['border' + b + 'Width']) || 0))
+    return { w: pxv(ps.width) + extra('Left', 'Right'), h: pxv(ps.height) + extra('Top', 'Bottom') }
+  }
+  /** 行内的伪元素没有宽高：按行高（normal 按字号 1.2 倍） */
+  const lineOf = (ps) => { const v = pxv(ps.lineHeight); return isNaN(v) ? (parseFloat(ps.fontSize) || 16) * 1.2 : v }
+  /** 块级的显示方式：上下外边距在块布局里会合并 */
+  const BLOCKISH = /^(block|flex|grid|table|list-item|flow-root)$/
+  /** 替换元素：行内的也有上下外边距 */
+  const REPLACED = /^(IMG|SVG|svg|VIDEO|CANVAS|IFRAME|EMBED|OBJECT|INPUT|SELECT|TEXTAREA|PICTURE)$/
+
+  function pseudoBox(e, which, ps) {
+    const { w } = pseudoSize(ps)
+    let { h } = pseudoSize(ps)
+    let kx = 1, ky = 1, l, t, W
+    if (ps.position === 'absolute' || ps.position === 'fixed') {
+      let cb = null
+      for (let a = e; a && a !== document.documentElement; a = a.parentElement) if (holds(getComputedStyle(a), ps.position === 'fixed')) { cb = a; break }
+      const r = cb ? cb.getBoundingClientRect() : { left: 0, top: 0 }
+      if (cb && cb.offsetWidth) kx = r.width / cb.offsetWidth
+      if (cb && cb.offsetHeight) ky = r.height / cb.offsetHeight
+      const x = pxv(ps.left), y = pxv(ps.top)
+      if ([x, y, w, h].some(isNaN)) return null
+      l = r.left + ((cb ? cb.clientLeft : 0) + x + (parseFloat(ps.marginLeft) || 0)) * kx
+      t = r.top + ((cb ? cb.clientTop : 0) + y + (parseFloat(ps.marginTop) || 0)) * ky
+      W = w
+    } else {
+      const r = e.getBoundingClientRect()
+      if (e.offsetWidth) kx = r.width / e.offsetWidth
+      if (e.offsetHeight) ky = r.height / e.offsetHeight
+      const cs = getComputedStyle(e)
+      const side = (k) => (parseFloat(cs['padding' + k]) || 0) + (parseFloat(cs['border' + k + 'Width']) || 0)
+      const c = { l: r.left + side('Left') * kx, t: r.top + side('Top') * ky, r: r.right - side('Right') * kx, b: r.bottom - side('Bottom') * ky }
+      if (isNaN(h)) h = lineOf(ps)
+      const H = h * ky
+      // 普通流里挨着的子元素和字（第一行 / 最后一行的框）
+      // 字量出来的是字形的框，按行高撑成整行（line-height: 40px 这种，行比字高）
+      const lh = pxv(cs.lineHeight) * ky
+      const line = (q) => (isNaN(lh) || lh <= q.bottom - q.top ? q : { top: (q.top + q.bottom - lh) / 2, bottom: (q.top + q.bottom + lh) / 2 })
+      const near = []
+      for (const n of e.childNodes) {
+        if (n.nodeType === 3 && n.nodeValue.trim()) {
+          const rg = document.createRange()
+          rg.selectNodeContents(n)
+          const rs = rg.getClientRects()
+          if (rs.length) { const f = line(rs[0]), z = line(rs[rs.length - 1]); near.push({ first: f, last: z, mT: 0, mB: 0, block: false, top: f.top, bottom: z.bottom }) }
+        } else if (n.nodeType === 1 && !isOurs(n)) {
+          const s2 = getComputedStyle(n)
+          const rs = s2.display !== 'none' && s2.position !== 'absolute' && s2.position !== 'fixed' ? n.getClientRects() : []
+          // top / bottom 是带外边距的边；普通行内元素（span 这种）上下外边距不起作用，框按它的行高撑成整行
+          const inl = s2.display === 'inline' && !REPLACED.test(n.tagName)
+          const mT = inl ? 0 : (parseFloat(s2.marginTop) || 0) * ky, mB = inl ? 0 : (parseFloat(s2.marginBottom) || 0) * ky
+          const ln = (q) => {
+            const v = Math.max(pxv(s2.lineHeight) || 0, pxv(cs.lineHeight) || 0) * ky // 那一行至少有父元素的行高
+            return !inl || !v || v <= q.bottom - q.top ? q : { top: (q.top + q.bottom - v) / 2, bottom: (q.top + q.bottom + v) / 2 }
+          }
+          if (rs.length) { const f = ln(rs[0]), z = ln(rs[rs.length - 1]); near.push({ first: f, last: z, mT, mB, block: BLOCKISH.test(s2.display), top: f.top - mT, bottom: z.bottom + mB }) }
+        }
+      }
+      const flex = /flex/.test(cs.display), grid = /grid/.test(cs.display)
+      const rev = flex && /reverse/.test(cs.flexDirection)
+      if (rev && /column/.test(cs.flexDirection)) near.reverse() // 按屏幕上从上到下
+      const before = (which === '::before') !== rev
+      const mt = (parseFloat(ps.marginTop) || 0) * ky, mb = (parseFloat(ps.marginBottom) || 0) * ky
+      if (!flex && !grid && /inline/.test(ps.display)) {
+        const ln = near.length ? (before ? near[0].first : near[near.length - 1].last) : null
+        t = ln ? (ln.top + ln.bottom - H) / 2 : c.t
+      } else if (!flex || /column/.test(cs.flexDirection)) {
+        const gap = flex || grid ? (parseFloat(cs.rowGap) || 0) * ky : 0
+        const j = flex ? cs.justifyContent : ''
+        // 另一个伪元素也在普通流里排着（::before 图标 + 字 + ::after 箭头）：一起算剩余空间
+        const os = getComputedStyle(e, which === '::before' ? '::after' : '::before')
+        const other = os.content !== 'none' && os.content !== 'normal' && os.display !== 'none' && os.position !== 'absolute' && os.position !== 'fixed'
+        const osz = pseudoSize(os).h
+        const oh = other ? ((isNaN(osz) ? lineOf(os) : osz) + (parseFloat(os.marginTop) || 0) + (parseFloat(os.marginBottom) || 0)) * ky : 0
+        // 剩下的空按项数分（space-*），放不下（没剩）就不分
+        const n = near.length + 1 + (other ? 1 : 0)
+        const free = c.b - c.t - near.reduce((m, q) => m + q.bottom - q.top, 0) - H - mt - mb - oh - gap * (n - 1)
+        const between = free <= 0 || !flex ? 0 : /space-between/.test(j) ? free / (n - 1) : /space-around/.test(j) ? free / n : /space-evenly/.test(j) ? free / (n + 1) : 0
+        // 块布局里两个块级盒相邻，上下外边距合并成一个（正的取大、负的取小再相加）；flex / grid、行内块不合并
+        const fold = (a, b, q) => (flex || grid || !q.block || !BLOCKISH.test(ps.display) ? a + b : Math.max(a, b, 0) + Math.min(a, b, 0))
+        // 排到内容区的尾巴上：flex-start / normal（只有一项或放不下时的 space-between 也按它）在 column-reverse 里也是尾巴，start / end 不跟着反
+        const atEnd = /flex-end/.test(j) ? !rev : /(^|\s)end$/.test(j) ? true : /flex-start|normal|stretch|space-between/.test(j) ? rev : false
+        if (near.length) {
+          // 挨着第一项前面 / 最后一项后面
+          const q = before ? near[0] : near[near.length - 1]
+          t = before ? q.first.top - fold(q.mT, mb, q) - gap - between - H : q.last.bottom + fold(q.mB, mt, q) + gap + between
+        } else if (other && flex) {
+          // 只有前后两个伪元素：从内容区起点按 justify-content 排
+          const lead = /center/.test(j) ? free / 2 : free <= 0 ? (/space-around|space-evenly/.test(j) ? free / 2 : atEnd ? free : 0)
+            : /space-around/.test(j) ? free / 4 : /space-evenly/.test(j) ? free / 3 : /space-between/.test(j) ? 0 : atEnd ? free : 0
+          t = c.t + lead + mt + (before ? 0 : oh + gap + between)
+        } else t = /center|space-around|space-evenly/.test(j) ? (c.t + mt + c.b - mb - H) / 2 : atEnd ? c.b - mb - H : c.t + mt
+      } else {
+        const a = ps.alignSelf && ps.alignSelf !== 'auto' ? ps.alignSelf : cs.alignItems
+        t = /center/.test(a) ? (c.t + c.b - H) / 2 : /end/.test(a) ? c.b - H : c.t + mt
+      }
+      l = c.l
+      W = isNaN(w) ? Math.max(1, (c.r - c.l) / kx) : w
+      if (ps.position === 'relative') { l += (pxv(ps.left) || 0) * kx; t += (pxv(ps.top) || 0) * ky }
+    }
+    // 自己的变换：先 translate、rotate、scale，再 transform，都绕 transform-origin
+    let m = new DOMMatrix()
+    const set = (v) => v && v !== 'none'
+    const len = (v, full) => (/%$/.test(v) ? parseFloat(v) / 100 * full : parseFloat(v) || 0)
+    try {
+      if (set(ps.translate)) { const [x, y = '0px'] = ps.translate.split(' '); m = m.translate(len(x, W), len(y, h)) }
+      if (set(ps.rotate) && /^-?[\d.]+deg$/.test(ps.rotate)) m = m.rotate(parseFloat(ps.rotate))
+      if (set(ps.scale)) { const [sx, sy = sx] = ps.scale.split(' ').map(parseFloat); m = m.scale(sx, sy) }
+      if (set(ps.transform)) m = m.multiply(new DOMMatrix(ps.transform))
+    } catch { /* 解析不了的变换就当没有 */ }
+    const [ox, oy] = String(ps.transformOrigin).split(' ').map((v) => parseFloat(v) || 0)
+    m = new DOMMatrix().translate(ox, oy).multiply(m).translate(-ox, -oy)
+    const pts = [[0, 0], [W, 0], [0, h], [W, h]].map(([x, y]) => m.transformPoint(new DOMPoint(x, y)))
+    const xs = pts.map((p) => l + p.x * kx), ys = pts.map((p) => t + p.y * ky)
+    return { l: Math.min(...xs), t: Math.min(...ys), r: Math.max(...xs), b: Math.max(...ys) }
+  }
+
+  /** 一个元素里的图标（img、最外层的 svg）：不看框，只看画出来的东西 */
+  function iconRects(root, pseudo = false) {
+    const out = []
+    for (const e of root.querySelectorAll('img,svg')) {
+      if ((e.parentElement && e.parentElement.closest('svg')) || isOurs(e) || e.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      const r = e.getBoundingClientRect()
+      if (r.width >= 1 && r.height >= 1 && !hiddenChain(e)) out.push({ el: e, r: { l: r.left, t: r.top, r: r.right, b: r.bottom } })
+    }
+    if (!pseudo) return out
+    // 图标字体、背景图标：::before / ::after 里放了字或 url() 图（空白、渐变遮罩这种装饰不算）。量不到伪元素的框，按它算出来的位置和大小推
+    for (const e of [root, ...root.querySelectorAll('*')]) {
+      if (isOurs(e) || e.closest('svg,dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      for (const which of ['::before', '::after']) {
+        const ps = getComputedStyle(e, which)
+        if (ps.display === 'none' || ps.content === 'none' || ps.content === 'normal' || ps.visibility === 'hidden' || parseFloat(ps.opacity) === 0) continue
+        const glyph = /^["'][\s\S]*\S[\s\S]*["']$/.test(ps.content.replace(/\\[0-9a-f]{1,6}\s?|\\./gi, 'x')) || /url\(/.test(ps.content + ps.backgroundImage + ps.webkitMaskImage + ps.maskImage)
+        if (!glyph || hiddenChain(e)) continue
+        // 无头体检时浏览器给了真实框（同一滚动位置）就用它；全问到了还没框的是没排出来；没给的（实时预览、宿主太多没问到）按样式推
+        const at = scrollX + ',' + scrollY
+        const fresh = window.__dshPseudoAt === at
+        const got = fresh && e.__dshPseudo && e.__dshPseudo.at === at ? e.__dshPseudo : null
+        const o = got ? got[which] || null : fresh && window.__dshPseudoAll ? null : pseudoBox(e, which, ps)
+        // 伪元素是宿主的子盒：宿主自己的 overflow 也裁它；绝对 / 固定定位的按它自己的包含块裁（pos 交给 restBox）
+        if (o && o.r - o.l >= 1 && o.b - o.t >= 1) out.push({ el: e, r: o, pos: ps.position })
+      }
+    }
+    return out
+  }
+
+  /**
+   * 底栏里横排、等宽、铺满大半条的一排（标签栏的几项）：找最多的那排，返回这几项。
+   * 绝对 / 固定定位的子元素（当前项下面的小横线这种）不算项；能横着滑、或者伸出栏外一大截的一排（轮播、商品列表）不算
+   */
+  const slides = (el, top) => {
+    for (let e = el; e; e = e === top ? null : e.parentElement) {
+      if (/auto|scroll/.test(getComputedStyle(e).overflowX) && e.scrollWidth > e.clientWidth + 1) return true
+    }
+    return false
+  }
+  function tabCount(bar) {
+    let best = []
+    const walk = (el, depth) => {
+      const ks = []
+      for (const k of el.children) {
+        if (isOurs(k)) continue
+        const cs = getComputedStyle(k)
+        if (cs.display === 'none' || cs.position === 'absolute' || cs.position === 'fixed') continue
+        const r = k.getBoundingClientRect()
+        if (r.width >= 1 && r.height >= 1) ks.push({ k, r })
+      }
+      if (ks.length > best.length) {
+        const ws = ks.map((x) => x.r.width)
+        const avg = ws.reduce((m, w) => m + w, 0) / ws.length
+        const same = Math.max(...ws) - Math.min(...ws) <= Math.max(4, avg * 0.12)
+        const row = Math.max(...ks.map((x) => x.r.top)) - Math.min(...ks.map((x) => x.r.top)) <= 4
+        const fits = !slides(el, bar.el) && ks.every((x) => x.r.left >= bar.r.left - x.r.width / 4 && x.r.right <= bar.r.right + x.r.width / 4)
+        if (ks.length >= 2 && same && row && fits && avg * ks.length >= bar.r.width * 0.7) best = ks.map((x) => x.k)
+      }
+      if (depth < 4) for (const k of el.children) if (!isOurs(k)) walk(k, depth + 1)
+    }
+    walk(bar.el, 0)
+    return best
+  }
+
+  /**
+   * 这排是切换页面的标签栏（不是一排操作按钮），按这个次序定：
+   * - 这一排到栏之间（以及栏外面）写明了是工具栏（role=toolbar、class 带 toolbar / tools）：不是；
+   * - 写明了是导航（role=tab / tablist、项链到别的页面（#/home 这种路由也算，光一个 # 不算）、标了 aria-current、栏 / 这一排 / 项的 class 或 id 带 tab、nav）：是；
+   * - 一半以上是操作（裁剪、旋转、分享……）：不是；一半以上是页面名（首页、分类、我的……）：是；
+   * - 全是 <button>：不是；
+   * - 在 <nav> 里、项是占位链接（href="#"）、项标了选中（active、on……）、只有一项颜色不同（字或图标）：是
+   * 认字时只看文字（字符图标 ✂、↻ 这种去掉）
+   */
+  const ON = /(^|[-_\s])(on|active|current|cur|selected)($|[-_\s])/i
+  const PAGE_WORDS = new Set('首页 主页 分类 发现 消息 购物车 我的 我 个人 个人中心 通讯录 联系人 动态 社区 推荐 关注 订单 会员 商城 广场 朋友 视频 直播 学习 课程 工作台 应用 服务 钱包 资讯 附近 活动 收藏 设置 home discover explore messages message inbox chat chats cart profile me mine account settings feed library favorites orders shop store community friends contacts notifications activity wallet categories category deals news videos live learn courses'.split(' '))
+  const TOOL_WORDS = new Set('裁剪 剪裁 旋转 翻转 滤镜 调色 调节 贴纸 文字 文本 画笔 涂鸦 马赛克 边框 美颜 特效 配乐 音乐 变速 分割 删除 复制 粘贴 撤销 重做 分享 点赞 评论 转发 下载 保存 编辑 加粗 斜体 下划线 对齐 插入 表格 链接 拍照 相册 亮度 对比度 饱和度 美化 模板 背景 橡皮 播放 暂停 静音 全屏 crop rotate flip filter filters adjust sticker stickers text draw brush erase eraser undo redo share like comment save edit delete copy paste bold italic underline align insert download trim split speed effects music play pause mute fullscreen'.split(' '))
+  const classOf = (el) => (el.getAttribute('class') || '') + ' ' + el.id
+  const labelOf = (k) => String(k.innerText || k.textContent || '').toLowerCase().replace(/[^\p{L}]+/gu, '')
+  function navLike(bar, items) {
+    const row = items[0].parentElement
+    const boxes = [] // 这一排一直到栏（再往外由 closest 看）
+    for (let e = row; e; e = e === bar.el ? null : e.parentElement) boxes.push(e)
+    if (boxes.some((e) => e.matches('[role=toolbar]') || /(^|[-_\s])tool(bar|s)?($|[-_\s])/i.test(classOf(e))) || bar.el.closest('[role=toolbar]')) return false
+    const page = (k) => k.matches('a[href]') && !/^(#?|javascript:.*)$/i.test(k.getAttribute('href').trim())
+    if (items.some((k) => page(k) || k.matches('[role=tab],[aria-current]:not([aria-current=false])')) || boxes.some((e) => e.matches('[role=tablist]'))) return true
+    if ([...boxes, ...items].some((e) => /tab(?!le)|(^|[-_\s])nav/i.test(classOf(e)))) return true
+    const labels = items.map(labelOf)
+    if (labels.filter((x) => TOOL_WORDS.has(x)).length * 2 >= items.length) return false
+    if (labels.filter((x) => PAGE_WORDS.has(x)).length * 2 >= items.length) return true
+    if (items.every((k) => k.matches('button,[role=button]'))) return false
+    if (bar.el.closest('nav,[role=navigation]') || bar.el.querySelector('nav,[role=navigation]') || items.some((k) => k.matches('a[href]'))) return true
+    if (items.some((k) => k.matches('[aria-selected=true]') || ON.test(classOf(k)) || [...k.querySelectorAll('*')].some((e) => ON.test(classOf(e))))) return true
+    // 只有一项颜色不同：字的颜色，或者图标（svg 的 color / fill、图标字体的颜色）
+    const tint = (k) => {
+      const t = [k, ...k.querySelectorAll('*')].find((e) => ownText(e)) || k
+      const ic = k.querySelector('svg,i,[class*=icon]')
+      const ics = ic ? getComputedStyle(ic) : null
+      return getComputedStyle(t).color + '|' + (ics ? ics.color + ics.fill : '')
+    }
+    const tints = items.map(tint)
+    const odd = tints.filter((c) => tints.filter((x) => x === c).length === 1)
+    return odd.length === 1 && new Set(tints).size === 2
+  }
+
+  /**
+   * 手机（App、小程序）：
+   * - 灵动岛挡住的字和按钮（外框画在页面上面，挡住的看不见）；
+   * - 底栏里的字、图标伸进底部横条区（让出 34px，栏的底色可以铺下去）；
+   * - 标签栏超过 5 项（小程序最多 5 项，微信直接报错）；
+   * - 小程序：导航栏那条（44–88）什么都没有。
+   * 矮的手机（高不到宽的 1.9 倍）没有灵动岛、横条，只看后两条
+   */
+  function phoneCheck(add, atoms, vw, kind) {
+    const vh = innerHeight
+    const tall = vh / vw >= 1.9
+    if (tall) {
+      const isl = { l: vw / 2 - ISLAND.w / 2, r: vw / 2 + ISLAND.w / 2, t: ISLAND.top, b: ISLAND.top + ISLAND.h }
+      zoneCheck(add, atoms, isl, 'island', (o, ow, oh) => oh, {})
+    }
+    const line = vh - HOMEBAR
+    for (const bar of barsAt('bottom', true)) {
+      if (tall) {
+        let worst = null
+        // 只量看得见的那截：被自己（省略号、多行截断）或外层（轮播）裁掉的、在屏幕外的不算
+        const look = (el, r, self, pos) => {
+          const o = restBox(el, true, null, self, pos)(r)
+          if (!o || o.r <= 0 || o.l >= vw || o.t >= vh || o.b <= 0) return
+          const d = Math.min(o.b, vh) - line
+          if (d > 6 && (!worst || d > worst.d)) worst = { el, d }
+        }
+        for (const a of atoms) if (bar.el.contains(a.el) && !hiddenChain(a.el)) for (const r of a.rects) look(a.el, r, true)
+        for (const ic of iconRects(bar.el, true)) look(ic.el, ic.r, !!ic.pos, ic.pos)
+        // 伸进几像素看不出来，不报；伸进 12px 以上算严重
+        if (worst) add('homebar', worst.el, { px: Math.round(worst.d), bar: nameOf(bar.el) }, worst.d >= 12 ? 2 : 1)
+      }
+      const items = tabCount(bar)
+      if (items.length > 5 && navLike(bar, items)) add('tabbar', bar.el, { n: items.length }, kind === 'miniprogram' ? 2 : 1)
+    }
+    if (kind !== 'miniprogram') return
+    // 导航栏那条：没滚时有字、图标或按钮的竖直中线落在里面就算有
+    const band = { t: NAVBAR.top, b: NAVBAR.top + NAVBAR.h }
+    const inBand = (o) => o && (o.t + o.b) / 2 >= band.t && (o.t + o.b) / 2 <= band.b
+    const seen = (el, rects, self) => {
+      if (hiddenChain(el)) return false
+      const rest = restBox(el, false, null, self)
+      return rects.some((r) => inBand(rest(r)))
+    }
+    for (const a of atoms) if (seen(a.el, a.rects, true)) return
+    for (const el of document.body.querySelectorAll(CLICKABLE)) {
+      if (isOurs(el) || el.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      const r = el.getBoundingClientRect()
+      if (r.width >= 1 && r.height >= 1 && seen(el, [{ l: r.left, r: r.right, t: r.top, b: r.bottom }])) return
+    }
+    for (const ic of iconRects(document.body)) if (seen(ic.el, [ic.r])) return
+    add('navbar', null, { t: band.t, b: band.b }, 1)
+  }
+
+  /**
+   * 最底下的画布：html（没有就 body）的底色铺满整个窗口。html 有底色或背景图时画布用 html 的、body 的背景照常算；
+   * 都没有时 body 的底色传到画布上。onCanvas(e)：它自己的底色就是画布，叠的时候别再算一遍。explicit：页面自己写了底色
+   */
+  function canvasBase() {
+    if (probe && probe.canvas) return probe.canvas
+    const de = document.documentElement
+    const dcs = getComputedStyle(de)
+    const htmlBg = rgba(dcs.backgroundColor)
+    const htmlHas = (!!htmlBg && htmlBg[3] > 0) || dcs.backgroundImage !== 'none'
+    const bodyBg = document.body ? rgba(getComputedStyle(document.body).backgroundColor) : null
+    const blank = schemeDark() ? [18, 18, 18, 1] : [255, 255, 255, 1]
+    const can = htmlHas ? htmlBg : bodyBg
+    const explicit = !!can && can[3] > 0
+    const out = { base: explicit ? (can[3] < 1 ? over(can, blank) : can) : blank, explicit, onCanvas: (e) => e === de || (e === document.body && !htmlHas) }
+    if (probe) probe.canvas = out
+    return out
+  }
+
+  /**
+   * 从下往上叠 [元素, 颜色] 这些层，透明度和浏览器一样按组算：opacity < 1 的元素连同它里面的先合成（从全透明起），再整体变淡叠下去。
+   * 元素的祖先不在层里（子元素伸出了它的框）也照算。base 是最底下的颜色（不透明），返回叠完的 [r, g, b, 1]
+   */
+  function compose(layers, base) {
+    const pre = (c) => [c[0] * c[3], c[1] * c[3], c[2] * c[3], c[3]]
+    const ov = (t, u) => [t[0] + u[0] * (1 - t[3]), t[1] + u[1] * (1 - t[3]), t[2] + u[2] * (1 - t[3]), t[3] + u[3] * (1 - t[3])]
+    const stack = [{ owner: null, o: 1, c: [0, 0, 0, 0] }]
+    const close = () => { const g = stack.pop(); const up = stack[stack.length - 1]; up.c = ov(g.c.map((v) => v * g.o), up.c) }
+    const memo = new Map()
+    const groupsOf = (e) => {
+      if (memo.has(e)) return memo.get(e)
+      const a = []
+      for (let p = e; p && p.nodeType === 1; p = p.parentElement) { const o = +getComputedStyle(p).opacity; if (o < 1) a.unshift([p, o]) }
+      memo.set(e, a)
+      return a
+    }
+    for (const [e, col] of layers) {
+      const want = groupsOf(e)
+      let k = 0
+      while (k < want.length && k + 1 < stack.length && stack[k + 1].owner === want[k][0]) k++
+      while (stack.length > k + 1) close()
+      for (let i = k; i < want.length; i++) stack.push({ owner: want[i][0], o: want[i][1], c: [0, 0, 0, 0] })
+      if (col && col[3] > 0) { const g = stack[stack.length - 1]; g.c = ov(pre(col), g.c) }
+    }
+    while (stack.length > 1) close()
+    const c = ov(stack[0].c, base)
+    return [c[0], c[1], c[2], 1]
+  }
+
+  /**
+   * 顶栏右边（胶囊那块）是不是深色：是的话外框画白色胶囊（和微信 navigationBarTextStyle: white 一样）。
+   * 页面写了 <meta name="dsh-capsule" content="white|black"> 就照它；不然从下往上叠胶囊中心那点的各层：
+   * 底色、渐变（取各色标的平均）、图片 / 视频 / canvas（按 object-fit / object-position 画到小画布上取那块的平均，跨域取不到就跳过）。
+   * 透明度和浏览器一样按组算：opacity < 1 的元素连同里面的先合成，再整体变淡。装饰 SVG 跳过。
+   * 导出带外框的图也用这个结果（截图复制页面那一刻量的），两边一致
+   */
+  function topDark() {
+    try {
+      const m = document.querySelector('meta[name="dsh-capsule"]')
+      const say = m ? String(m.getAttribute('content') || '').trim().toLowerCase() : ''
+      if (say === 'white' || say === 'black') return say === 'white'
+      // Windows 桌面软件看右上角三个按钮那块，别的看胶囊那块
+      const win = deskOs() === 'win'
+      const x = win ? innerWidth - WINBTN.w * 1.5 : innerWidth - CAP.right - CAP.w / 2
+      const y = win ? WINBTN.h / 2 : CAP.top + CAP.h / 2
+      const hits = paintedAt(x, y).filter((e) => !isOurs(e) && !(e instanceof SVGElement)).reverse() // 从下往上
+      const { base, onCanvas } = canvasBase()
+      const layers = []
+      for (const e of hits) {
+        const cs = getComputedStyle(e)
+        for (const l of [onCanvas(e) ? null : rgba(cs.backgroundColor), gradTone(cs.backgroundImage), MEDIA.has(e.tagName) ? mediaTone(e, cs) : null]) if (l) layers.push([e, l])
+      }
+      const c = compose(layers, base)
+      return 0.299 * c[0] + 0.587 * c[1] + 0.114 * c[2] < 140
+    } catch { return false }
+  }
+  /**
+   * 量「这一点上画着什么」的那段时间：临时加一张样式表（放在层里，盖得过页面没分层的 !important）把 pointer-events 全设成 auto，
+   * 命中测试就不会跳过不可点的背景层；量完撤掉——不改页面的 DOM，页面的 MutationObserver 不会知道。
+   * 还盖不过的（行内 !important、页面更早的层里写的）先列出来，paintedAt 按位置补。fn 得是同步的；嵌套调用共用一次
+   */
+  let probe = null
+  function withProbe(fn) {
+    if (probe) return fn()
+    const was = [...document.adoptedStyleSheets]
+    let sheet = null
+    try {
+      sheet = new CSSStyleSheet()
+      sheet.replaceSync('@layer dsh-design-probe{*{pointer-events:auto!important}}')
+      document.adoptedStyleSheets = [...was, sheet]
+    } catch { sheet = null }
+    try {
+      const extra = []
+      for (const e of [document.documentElement, document.body, ...(document.body ? document.body.querySelectorAll('*') : [])]) {
+        if (!e || isOurs(e) || e instanceof SVGElement) continue
+        const cs = getComputedStyle(e)
+        if (cs.pointerEvents === 'none' && cs.visibility === 'visible') extra.push(e)
+      }
+      probe = { extra, layers: new Map(), paths: new Map(), pairs: new Map(), canvas: null } // 后几个是量的这段时间里的缓存（页面不会变）
+      return fn()
+    } finally {
+      probe = null
+      if (sheet) document.adoptedStyleSheets = was
+    }
+  }
+  /** 这一点上画着的元素（从上往下）：不可点的背景层也算；命中测试漏掉的按位置找出来、估个上下顺序插进去（被外层裁掉的不算） */
+  function paintedAt(x, y) {
+    return withProbe(() => {
+      const list = document.elementsFromPoint(x, y)
+      for (const e of probe.extra) {
+        if (list.includes(e)) continue
+        const r = e.getBoundingClientRect()
+        if (x < r.left || x > r.right || y < r.top || y > r.bottom) continue
+        const vis = restBox(e, true)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+        if (!vis || x < vis.l || x > vis.r || y < vis.t || y > vis.b) continue
+        const i = list.findIndex((h) => paintsOver(e, h))
+        list.splice(i < 0 ? list.length : i, 0, e)
+      }
+      return list
+    })
+  }
+  /** 会建层叠上下文的元素：z-index 只在它里面比，里面的东西整块跟着它排 */
+  function stackRoot(e, cs) {
+    if (e === document.documentElement) return true
+    const zi = cs.zIndex !== 'auto'
+    const p = e.parentElement
+    return (zi && (cs.position !== 'static' || (!!p && /flex|grid/.test(getComputedStyle(p).display)))) || cs.position === 'fixed' || cs.position === 'sticky' ||
+      +cs.opacity < 1 || moved(cs) || cs.filter !== 'none' || cs.perspective !== 'none' || cs.isolation === 'isolate' || cs.mixBlendMode !== 'normal' ||
+      (!!cs.clipPath && cs.clipPath !== 'none') || (!!cs.maskImage && cs.maskImage !== 'none') || (!!cs.backdropFilter && cs.backdropFilter !== 'none') ||
+      /paint|layout|strict|content/.test(cs.contain) || /transform|scale|translate|rotate|opacity|filter|perspective|z-index/.test(cs.willChange)
+  }
+  /** 能给绝对定位（fixed：给固定定位）当包含块的：定位了的，或 transform / perspective / filter / contain / will-change 这些 */
+  function holds(cs, fixed) {
+    return (!fixed && cs.position !== 'static') || moved(cs) || cs.perspective !== 'none' || cs.filter !== 'none' ||
+      (!!cs.backdropFilter && cs.backdropFilter !== 'none') || /paint|layout|strict|content/.test(cs.contain) ||
+      /transform|scale|translate|rotate|perspective|filter|contain/.test(cs.willChange)
+  }
+  /** 变换过的：transform，或单独写的 scale / translate / rotate */
+  function moved(cs) {
+    return cs.transform !== 'none' || (!!cs.scale && cs.scale !== 'none') || (!!cs.translate && cs.translate !== 'none') || (!!cs.rotate && cs.rotate !== 'none')
+  }
+  /**
+   * a 画在 b 上面吗（命中测试漏掉的那几个用来估位置）：祖先在下、后代在上（负 z-index 跑到不建上下文的祖先底下的除外）；不相干的找两者共同的层叠上下文，
+   * 各取在它里面代表自己的那个（往下第一个自己建上下文的，没有就是路上离自己最近的定位了的），比层级（负 z < 普通流 < 定位 / z 0 < 正 z），一样按文档顺序
+   */
+  function paintsOver(a, b) {
+    const memo = probe && probe.pairs
+    let row = memo && memo.get(a)
+    if (row && row.has(b)) return row.get(b)
+    const v = paintsOverNow(a, b)
+    if (memo) { if (!row) memo.set(a, (row = new Map())); row.set(b, v) }
+    return v
+  }
+  /** 叠放用到的几样（建不建层叠上下文、z-index、定位），量的这段时间里记着 */
+  function layerOf(e) {
+    const m = probe && probe.layers
+    let v = m && m.get(e)
+    if (v) return v
+    const cs = getComputedStyle(e)
+    v = { root: stackRoot(e, cs), z: parseInt(cs.zIndex, 10), pos: cs.position }
+    if (m) m.set(e, v)
+    return v
+  }
+  /** 从 html 到它的那串祖先（含自己），量的这段时间里记着 */
+  function pathOf(e) {
+    const m = probe && probe.paths
+    let v = m && m.get(e)
+    if (v) return v
+    v = e.parentElement ? [...pathOf(e.parentElement), e] : [e]
+    if (m) m.set(e, v)
+    return v
+  }
+  function paintsOverNow(a, b) {
+    // 后代 d 画在祖先 anc 底下：anc 自己不建层叠上下文，而 d 所在的、紧挨着 anc 的那个上下文是负 z-index 的（整块画到外面那层的最底下）
+    const under = (anc, d) => {
+      if (layerOf(anc).root) return false
+      let top = null
+      for (let x = d; x && x !== anc; x = x.parentElement) if (layerOf(x).root) top = x
+      return !!top && layerOf(top).z < 0
+    }
+    if (a.contains(b)) return under(a, b)
+    if (b.contains(a)) return !under(b, a)
+    const pa = pathOf(a), pb = pathOf(b)
+    let common = 0
+    for (let i = 0; i < pa.length && pa[i] === pb[i]; i++) if (layerOf(pa[i]).root) common = i
+    const rep = (path) => {
+      let pos = null
+      for (let k = common + 1; k < path.length; k++) {
+        const v = layerOf(path[k])
+        if (v.root) return { el: path[k], lv: Number.isFinite(v.z) && v.z !== 0 ? (v.z < 0 ? v.z - 1 : v.z + 1) : 1 }
+        if (v.pos !== 'static') pos = path[k] // 定位了没建上下文的：各自按文档顺序排，取离自己最近的那个
+      }
+      return pos ? { el: pos, lv: 1 } : { el: path[path.length - 1], lv: 0 }
+    }
+    const ra = rep(pa), rb = rep(pb)
+    if (ra.lv !== rb.lv) return ra.lv > rb.lv
+    const [x, y] = ra.el === rb.el ? [a, b] : [ra.el, rb.el]
+    return !!(y.compareDocumentPosition(x) & Node.DOCUMENT_POSITION_FOLLOWING)
+  }
+  /** 渐变 → 各色标的平均（rgb() 以外的写法也认，见 rgba）；没有渐变 / 只有图片地址 → null */
+  function gradTone(bi) {
+    if (!bi || bi === 'none' || !/gradient\(/.test(bi)) return null
+    const cs = (bi.match(/(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^()]*\)/g) || []).map(rgba).filter(Boolean)
+    if (!cs.length) return null
+    const a = cs.reduce((s, c) => s + c[3], 0) / cs.length
+    if (a <= 0) return [0, 0, 0, 0]
+    const ch = (k) => cs.reduce((s, c) => s + c[k] * c[3], 0) / (a * cs.length)
+    return [ch(0), ch(1), ch(2), a]
+  }
+  /** 图片 / 视频 / canvas 在胶囊那块的平均色：按内容框、object-fit、object-position 摆，裁在内容框里；没载完、跨域取不到 → null */
+  function mediaTone(e, cs) {
+    try {
+      if (!/^(IMG|VIDEO|CANVAS)$/.test(e.tagName)) return null
+      const nw = e.naturalWidth || e.videoWidth || e.width
+      const nh = e.naturalHeight || e.videoHeight || e.height
+      if (!nw || !nh) return null
+      const r = e.getBoundingClientRect()
+      const k = e.offsetWidth ? r.width / e.offsetWidth : 1
+      const n = (v) => parseFloat(v) || 0
+      const cl = r.left + (n(cs.borderLeftWidth) + n(cs.paddingLeft)) * k
+      const ct = r.top + (n(cs.borderTopWidth) + n(cs.paddingTop)) * k
+      const cw = r.right - (n(cs.borderRightWidth) + n(cs.paddingRight)) * k - cl
+      const ch = r.bottom - (n(cs.borderBottomWidth) + n(cs.paddingBottom)) * k - ct
+      if (cw <= 0 || ch <= 0) return null
+      const fit = cs.objectFit || 'fill'
+      let w = cw, h = ch
+      if (fit !== 'fill') {
+        let z = fit === 'cover' ? Math.max(cw / nw, ch / nh) : fit === 'none' ? k : Math.min(cw / nw, ch / nh)
+        if (fit === 'scale-down') z = Math.min(k, z)
+        w = nw * z
+        h = nh * z
+      }
+      // object-position 算好的值是「横 竖」两项，每项是百分比、像素或 calc(百分比 ± 像素)（right 0 bottom 20px → 100% calc(100% - 20px)）；认不出的按居中
+      const toks = []
+      let depth = 0, cur = ''
+      for (const ch of String(cs.objectPosition || '')) {
+        if (ch === '(') depth++
+        else if (ch === ')') depth--
+        if (/\s/.test(ch) && !depth) { if (cur) toks.push(cur); cur = '' } else cur += ch
+      }
+      if (cur) toks.push(cur)
+      const [px, py] = toks.length === 2 ? toks : []
+      const WORD = { left: 0, top: 0, center: 50, right: 100, bottom: 100 }
+      const at = (v, free) => {
+        if (!v) return free / 2
+        if (v in WORD) return (free * WORD[v]) / 100
+        let pct = 0, pix = 0, ok = false
+        for (const m of v.matchAll(/([+-])?\s*(\d*\.?\d+)(%|px)/g)) { const n = (m[1] === '-' ? -1 : 1) * parseFloat(m[2]); if (m[3] === '%') pct += n; else pix += n; ok = true }
+        const r = (free * pct) / 100 + pix * k
+        return ok && Number.isFinite(r) ? r : free / 2
+      }
+      const ox = cl + at(px, cw - w)
+      const oy = ct + at(py, ch - h)
+      const c = document.createElement('canvas')
+      c.width = 22
+      c.height = 8
+      const g = c.getContext('2d')
+      const capL = innerWidth - CAP.right - CAP.w
+      const sx = c.width / CAP.w
+      const sy = c.height / CAP.h
+      g.beginPath()
+      g.rect((cl - capL) * sx, (ct - CAP.top) * sy, cw * sx, ch * sy)
+      g.clip()
+      g.drawImage(e, (ox - capL) * sx, (oy - CAP.top) * sy, w * sx, h * sy)
+      const d = g.getImageData(0, 0, c.width, c.height).data
+      let R = 0, G = 0, B = 0, A = 0
+      for (let i = 0; i < d.length; i += 4) { const a = d[i + 3] / 255; R += d[i] * a; G += d[i + 1] * a; B += d[i + 2] * a; A += a }
+      return A > 0 ? [R / A, G / A, B / A, A / (d.length / 4)] : [0, 0, 0, 0]
+    } catch { return null }
+  }
+  let lastTop = null
+  const postTop = () => { const dk = topDark(); if (dk !== lastTop) { lastTop = dk; post({ type: 'top', dark: dk }) } }
+  // 顶栏的颜色会变：切主题 / 调色的过渡放完、滚动后顶栏变实色、点了换状态、窗口换尺寸（媒体查询）、图片换了——过一下再量。
+  // 节流：一直滚也每 120ms 量一次；这段时间里又有动静就再补量一次（页面在 rAF 里换样式的也赶得上）
+  let topTimer = 0
+  let topAgain = false
+  const queueTop = () => {
+    if (topTimer) { topAgain = true; return }
+    const run = () => { postTop(); if (topAgain) { topAgain = false; topTimer = setTimeout(run, 120) } else topTimer = 0 }
+    topTimer = setTimeout(run, 120)
+  }
+  // 图片的 load 传不到 window（load 事件的路径到 document 为止），所以挂在 document 上；resize 只在 window 上
+  for (const ev of ['transitionend', 'animationend', 'scroll', 'click', 'load', 'error', 'loadeddata']) document.addEventListener(ev, queueTop, { capture: true, passive: true })
+  addEventListener('resize', queueTop, { passive: true })
+  try { matchMedia('(prefers-color-scheme: dark)').addEventListener('change', queueTop) } catch { /* 老浏览器 */ } // 系统换了深浅色
+
+  /** 无头浏览器截图用：右上角画上微信的胶囊（真机上它盖在页面上面）。ghost 半透明，透出下面被挡住的东西；别的值撤掉 */
+  let capEl = null
+  function showCapsule(how) {
+    if (capEl) { capEl.remove(); capEl = null }
+    if (how !== 'solid' && how !== 'ghost') return null
+    const white = topDark()
+    const fg = white ? '#fff' : '#000'
+    const soft = white ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.15)'
+    const h = document.createElement('dsh-design-fx')
+    h.style.cssText = `position:fixed;top:${CAP.top}px;right:${CAP.right}px;width:${CAP.w}px;height:${CAP.h}px;z-index:2147483646;pointer-events:none;opacity:${how === 'ghost' ? 0.5 : 1}`
+    h.attachShadow({ mode: 'closed' }).innerHTML = `<svg width="${CAP.w}" height="${CAP.h}" viewBox="0 0 ${CAP.w} ${CAP.h}" style="display:block;overflow:visible">` +
+      `<rect x=".25" y=".25" width="${CAP.w - 0.5}" height="${CAP.h - 0.5}" rx="${CAP.h / 2 - 0.25}" fill="${white ? 'rgba(0,0,0,.15)' : 'rgba(255,255,255,.6)'}" stroke="${white ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.08)'}" stroke-width=".5"/>` +
+      `<g fill="${fg}"><circle cx="20.5" cy="16" r="2.2"/><circle cx="28" cy="16" r="3.1"/><circle cx="35.5" cy="16" r="2.2"/><circle cx="65" cy="16" r="2.6"/></g>` +
+      `<path d="M43.5 9v14" stroke="${soft}" stroke-width=".5"/><circle cx="65" cy="16" r="7.5" fill="none" stroke="${fg}" stroke-width="2"/></svg>`
+    document.documentElement.appendChild(h)
+    capEl = h
+    return { white }
+  }
+
+  /** 截图时把桌面软件的窗口按钮画上去（和右侧栏外框一样）：solid 实的、ghost 半透明，别的值撤掉 */
+  let winEl = null
+  function showWinCtl(how) {
+    if (winEl) { winEl.remove(); winEl = null }
+    if (how !== 'solid' && how !== 'ghost') return null
+    const os = deskOs()
+    const h = document.createElement('dsh-design-fx')
+    let svg
+    if (os === 'win') {
+      const W = WINBTN.w, H = WINBTN.h
+      const c = topDark() ? '#fff' : '#1f1f1f'
+      h.style.cssText = `position:fixed;top:0;right:0;width:${W * 3}px;height:${H}px`
+      svg = `<svg width="${W * 3}" height="${H}" viewBox="0 0 ${W * 3} ${H}" style="display:block" fill="none" stroke="${c}" stroke-width="1">` +
+        `<path d="M${W / 2 - 5} ${H / 2 + 0.5}h10"/><rect x="${W * 1.5 - 4.5}" y="${H / 2 - 4.5}" width="9" height="9" rx="1"/>` +
+        `<path d="M${W * 2.5 - 5} ${H / 2 - 5}l10 10M${W * 2.5 + 5} ${H / 2 - 5}l-10 10"/></svg>`
+    } else {
+      const { x, y, d, gap } = LIGHTS
+      const w = d * 3 + gap * 2
+      h.style.cssText = `position:fixed;top:${y}px;left:${x}px;width:${w}px;height:${d}px`
+      svg = `<svg width="${w}" height="${d}" viewBox="0 0 ${w} ${d}" style="display:block">` +
+        ['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => `<circle cx="${d / 2 + i * (d + gap)}" cy="${d / 2}" r="${d / 2 - 0.25}" fill="${c}" stroke="rgba(0,0,0,.12)" stroke-width=".5"/>`).join('') + '</svg>'
+    }
+    h.style.cssText += `;z-index:2147483646;pointer-events:none;opacity:${how === 'ghost' ? 0.5 : 1}`
+    h.attachShadow({ mode: 'closed' }).innerHTML = svg
+    document.documentElement.appendChild(h)
+    winEl = h
+    return { os }
+  }
+
   /** 量之前等字体、图片载完（最多等 2 秒）：刚载入的页面字体没到时字宽不对，断行、截断都会量错 */
   async function settle() {
     const wait = (p, ms) => Promise.race([p, new Promise((r) => setTimeout(r, ms))])
@@ -2444,13 +3358,13 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     else if (d.type === 'check') onCheck(d)
     else if (d.type === 'checkClear') { clearMarks(); lastIssues = [] }
     else if (d.type === 'checkFocus') focusIssue(Number(d.i))
-    else if (d.type === 'theme') setDark(d.dark)
+    else if (d.type === 'theme') { setDark(d.dark); postTop(); setTimeout(postTop, 400) }
     else if (d.type === 'demo') demo = !!d.on
     else if (d.type === 'edit') setTextEdit(!!d.on, d.hint !== false)
     else if (d.type === 'styleMode') setStyleMode(!!d.on)
     else if (d.type === 'styleSel') onStyleSel(d.selector)
-    else if (d.type === 'style') styleApply(d.css)
-    else if (d.type === 'tweak') applyTweak(d.vars, d.attrs)
+    else if (d.type === 'style') { styleApply(d.css); queueTop() }
+    else if (d.type === 'tweak') { applyTweak(d.vars, d.attrs); queueTop() }
   })
 
   // 无头浏览器（check_design / look_design 在电脑上另开的，见 browser.js）直接调这几个：
@@ -2469,6 +3383,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           return { issues: r.issues.map(({ el, ...rest }) => rest), metrics: r.metrics }
         },
         dark: (on) => { const has = hasDark(); if (has) setDark(!!on); return has },
+        capsule: (how) => showCapsule(how),
+        winctl: (how) => showWinCtl(how),
         /** 调节滑块的值套到页面上（和右侧栏拖的时候一样） */
         tweak: (vars, attrs) => { applyTweak(vars, attrs); return true },
         settle: () => settle().then(() => true),
@@ -2476,7 +3392,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         links: () => linksOf().map(({ path, text }) => ({ path, text })),
         info: () => {
           const meta = document.querySelector('meta[name="dsh-design"]')
-          return { title: document.title, meta: meta ? String(meta.getAttribute('content') || '').slice(0, 80) : '', page: Math.max(se().scrollHeight, innerHeight), w: innerWidth, h: innerHeight }
+          return { title: document.title, meta: meta ? String(meta.getAttribute('content') || '').slice(0, 80) : '', page: Math.max(se().scrollHeight, innerHeight), w: innerWidth, h: innerHeight, topDark: topDark() }
         },
         /** 'end'：所有能滚的地方都滚到底；数字 i：主要的那块滚到第 i 屏（相邻两屏留出顶栏、底栏的高度，栏后面的内容下一屏能看到） */
         // 滚完等页面跟上再截图