dsh-design-studio 0.8.0 → 0.10.0

package/lib/picker.js

@@ -58,6 +58,80 @@
     }
   }
 
+  // 拖着文件进了这一页（页面铺满右侧栏时，外面的右侧栏收不到拖动）：告诉右侧栏亮出「松开打开 / 当参考图」的提示，
+  // 松手也在这里接住、把文件转给右侧栏。提示只是一层画、不挡事件：页面自己的上传区照样收得到后面的拖动
+  // 页面自己里面拖的（拖一下页面上的图、页面自己的拖放）不算：那不是要打开什么
+  // 用 drag 不用 dragstart：页面取消了 dragstart（轮播图常这么做）就不会有 drag，也就不会有 dragend 来清掉标记
+  let ownDrag = false
+  let dropOwn = false
+  addEventListener('drag', () => { ownDrag = true }, true)
+  addEventListener('dragend', () => { ownDrag = false }, true)
+  addEventListener('pointerup', () => { ownDrag = false }, true)
+  const hasFiles = (dt) => !!dt && [...(dt.types || [])].includes('Files')
+  // 页面自己接这次拖动：上传区在 dragover 上 preventDefault（或者拦住不让冒泡，见下面捕获阶段那个），或者落在 <input type=file> 上
+  const pageTakes = (e) => e.defaultPrevented || (typeof e.composedPath === 'function' ? e.composedPath() : [e.target]).some((n) => n && n.tagName === 'INPUT' && String(n.type).toLowerCase() === 'file')
+  let lastIn = 0
+  let took = false // 刚才那下是页面自己接的：收起提示，松手也归页面
+  const seen = new WeakSet() // 冒泡阶段见到过的 dragover（按事件记：页面忙时几个 dragover 会连着处理）
+  const pageTook = () => {
+    if (took) return
+    took = true
+    lastIn = 0
+    post({ type: 'dragOut' })
+  }
+  // 只看 dragover：同一个元素上拖第二次时浏览器不一定再给 dragenter；dragenter 时也还不知道页面接不接
+  // 挂在 window 冒泡阶段的最后，页面的处理先跑完；页面全局拦了 dragover 防误拖的就当页面接了（那种页面用「浏览…」或地址栏打开）
+  const onOver = (e) => {
+    seen.add(e)
+    const dt = e.dataTransfer
+    if (ownDrag || !hasFiles(dt)) return
+    if (pageTakes(e)) return pageTook()
+    took = false
+    e.preventDefault() // 这里能松手：不然浏览器把文件当网页打开（或者根本不给 drop）
+    dt.dropEffect = 'copy'
+    const now = Date.now()
+    if (now - lastIn < 200) return // 拖着时 dragover 一直来，隔一会儿报一次就够
+    lastIn = now
+    post({ type: 'dragIn', items: [...(dt.items || [])].slice(0, 20).map((x) => ({ kind: String(x.kind), type: String(x.type) })) })
+  }
+  const onDrop = (e) => {
+    const dt = e.dataTransfer
+    const own = dropOwn
+    dropOwn = false
+    if (own || !hasFiles(dt)) return
+    if (took || pageTakes(e)) { took = false; return }
+    e.preventDefault()
+    const files = []
+    for (const x of [...(dt.items || [])].slice(0, 20)) {
+      if (x.kind !== 'file') continue
+      // 文件夹只有 entry 分得出来，得在 drop 里同步取
+      let dir = false
+      try { const en = typeof x.webkitGetAsEntry === 'function' ? x.webkitGetAsEntry() : null; dir = !!(en && en.isDirectory) } catch { dir = false }
+      let f = null
+      try { f = x.getAsFile() } catch { f = null }
+      if (f) files.push({ f, dir })
+    }
+    // File 能直接跟着消息过去（桌面版照样拿得到它的真实路径）
+    post({ type: 'dropIn', files })
+  }
+  // 页面在 window 上挂的整页上传常常比这里晚注册（type=module 的脚本、框架挂载后）：每次事件在捕获阶段把上面两个摘下来重挂，
+  // 排到 window 冒泡监听的最后，页面的处理（不管什么时候挂的）都先跑完，才看它接没接。
+  // 重挂放在 document 的捕获阶段：window 捕获阶段的监听（页面的也算）都跑过了才轮到它
+  const last = (type, fn) => { removeEventListener(type, fn); addEventListener(type, fn) }
+  last('dragover', onOver)
+  last('drop', onDrop)
+  document.addEventListener('dragover', () => last('dragover', onOver), true)
+  document.addEventListener('drop', () => last('drop', onDrop), true)
+  addEventListener('dragover', (e) => {
+    if (ownDrag || !hasFiles(e.dataTransfer)) return
+    // 上传区拦住 dragover 不让冒泡（stopPropagation）时上面那个收不到：这一轮事件发完还没见到它，就是页面接了
+    setTimeout(() => { if (!seen.has(e)) pageTook() }, 0)
+  }, true)
+  addEventListener('drop', () => {
+    dropOwn = ownDrag
+    ownDrag = false
+  }, true)
+
   // ── 描述一个元素 ──────────────────────────────────────────────────────────
 
   const esc = (s) => (window.CSS && CSS.escape ? CSS.escape(s) : String(s).replace(/[^\w-]/g, '\\$&'))
@@ -107,7 +181,7 @@
     }
     const full = el.outerHTML.replace(/\s+/g, ' ')
     if (full.length <= max) return full
-    const open = shallow.outerHTML.replace(/<\/[^>]+>$/, '')
+    const open = shallow.outerHTML.replace(/<\/[^>]+>$/, '').replace(/\s+/g, ' ')
     const kids = el.children.length
     const txt = textOf(el)
     const inner = kids ? ` …${kids} 个子元素… ` : clip(txt, 60)
@@ -1385,17 +1459,27 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   const URL_RE = /url\(\s*(['"]?)([^'")]+)\1\s*\)/g
 
   /** 把一段 CSS 值里的 url(...) 都换成 data URL */
-  async function inlineUrls(value, base, inline) {
+  async function inlineUrls(value, base, inline, idp = '') {
     if (!value || value.indexOf('url(') < 0) return value
+    // 指着这一页里的东西（SVG 的渐变、裁剪、滤镜：url(#area)）：留成页内引用，别当文件去下载
+    const page = String(base || '').split('#')[0]
+    const local = new Map()
     const jobs = []
-    value.replace(URL_RE, (m, q, u) => { jobs.push(u); return m })
+    value.replace(URL_RE, (m, q, u) => {
+      if (u.startsWith('#')) local.set(u, '#' + idp + u.slice(1))
+      else {
+        try { const a = new URL(u, base); if (a.hash && a.href.split('#')[0] === page) local.set(u, '#' + idp + a.hash.slice(1)) } catch { /* 怪地址 */ }
+      }
+      if (!local.has(u)) jobs.push(u)
+      return m
+    })
     const map = new Map()
     await Promise.all(jobs.map(async (u) => {
       let abs = u
       try { abs = new URL(u, base).href } catch { /* 原样 */ }
       map.set(u, await inline(abs))
     }))
-    return value.replace(URL_RE, (m, q, u) => (map.get(u) ? `url("${map.get(u)}")` : 'none'))
+    return value.replace(URL_RE, (m, q, u) => (local.has(u) ? `url("${local.get(u)}")` : map.get(u) ? `url("${map.get(u)}")` : 'none'))
   }
 
   function styleText(cs, def, out) {
@@ -1416,7 +1500,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     let text = false
     for (const n of el.childNodes) if (n.nodeType === 3 && n.nodeValue.trim()) { text = true; break }
     if (!text) return false
-    const r = document.createRange()
+    const r = el.ownerDocument.createRange()
     r.selectNodeContents(el)
     const rects = [...r.getClientRects()].filter((x) => x.width && x.height)
     if (!rects.length || rects.length > 40) return false
@@ -1453,6 +1537,24 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const H = Math.ceil(full ? Math.max(de.scrollHeight, document.body ? document.body.scrollHeight : 0, innerHeight) : innerHeight)
     const box = makeSandbox()
     const inline = makeInliner()
+    // 只截看得到的这一屏（不是整页）：页面滚过、里面的滚动区滚过、有贴住的（sticky）元素，画成图时都得照现在的样子摆
+    const view = !full
+    const stuck = view ? stickyShift(document) : new Map()
+    // 页面滚过时 body 整体往上挪（transform），body 就成了里面固定元素的定位基准：跟着窗口走的固定元素按 body 的位置换算回去，还贴在窗口原来的地方
+    const lift = view && !!(scrollX || scrollY) && !!document.body
+    let bodyAt = null
+    if (lift) {
+      const br = document.body.getBoundingClientRect()
+      const bcs = getComputedStyle(document.body)
+      bodyAt = { l: br.left + (parseFloat(bcs.borderLeftWidth) || 0), t: br.top + (parseFloat(bcs.borderTopWidth) || 0) }
+    }
+    // 怪异模式下 body.scrollTop 就是页面滚动；内嵌页面的根元素滚过（它自己的页面滚动）也照样往回挪
+    // 内嵌页面画的总是它现在看得到的那块：里面的滚动（整页导出时也算）都补
+    const ownScroll = (el) => el.ownerDocument !== document || (view && el !== de && (el !== document.body || document.compatMode === 'CSS1Compat'))
+    // 资源地址按元素所在的那页算（内嵌页面有自己的地址）
+    const baseOf = (el) => { const b = el.ownerDocument.baseURI || ''; return /^https?:/.test(b) ? b : here() }
+    // 子树里还在找定位基准的绝对 / 固定定位（a / f）：滚动区的孩子要是改成相对定位，会把这些绝对定位抢过来（换了基准、还被滚动区裁掉）
+    const openOf = new Map()
     const pseudoRules = []
     const families = new Set()
     const jobs = []
@@ -1487,10 +1589,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       return p
     }
 
-    function walk(node) {
+    // ctx：往下传「以哪个滚过的滚动区为定位基准」——a：绝对定位的后代该往回挪多少，f：固定定位的（滚动区有变换时）
+    const NO_SHIFT = { a: [0, 0], f: [0, 0] }
+    const idPre = new Map([[document, '']])
+    function walk(node, ctx = NO_SHIFT) {
       if (node.nodeType === 3) return document.createTextNode(node.nodeValue)
       if (node.nodeType !== 1) return null
       const el = node
+      const idp = idPre.get(el.ownerDocument) || ''
       if (SKIP_TAGS.has(el.tagName.toUpperCase())) return null
       if (el.tagName === 'STYLE' && el.namespaceURI !== SVGNS) return null
       const cs = getComputedStyle(el)
@@ -1508,7 +1614,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         for (const a of el.attributes) {
           if (a.name === 'style' || a.name.startsWith('on') || a.name === 'class' && el.namespaceURI !== SVGNS) continue
           if (a.name === 'srcset' || a.name === 'sizes' || a.name === 'loading') continue
-          try { c.setAttributeNS(a.namespaceURI, a.name, a.value) } catch { /* 怪属性名 */ }
+          let v = a.value
+          // 内嵌页面的 id 和页内引用加上这一页的前缀：几页里同名的渐变、裁剪不会串
+          if (idp) {
+            if (a.name === 'id') v = idp + v
+            else if (/(^|:)href$/.test(a.name) && v.startsWith('#')) v = '#' + idp + v.slice(1)
+            else if (v.indexOf('url(') >= 0) v = v.replace(/url\(\s*(['"]?)#([^'")]+)\1\s*\)/g, (m, q, id) => `url(#${idp}${id})`)
+          }
+          try { c.setAttributeNS(a.namespaceURI, a.name, v) } catch { /* 怪属性名 */ }
         }
       }
       if (el.namespaceURI === SVGNS && el.getAttribute('class')) c.setAttribute('class', el.getAttribute('class'))
@@ -1517,17 +1630,31 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       const def = box.defaults(el)
       let st = styleText(cs, def, withUrls)
       if (el === de) st += 'overflow:hidden;'
+      // iframe / 视频换成了 div：默认的 300×150、行内排列也得写明（和 iframe 默认一样的样式上面省掉了）
+      if (tag === 'IFRAME' || tag === 'VIDEO' || tag === 'OBJECT' || tag === 'EMBED') {
+        st += `display:${cs.display === 'inline' ? 'inline-block' : cs.display};width:${cs.width};height:${cs.height};box-sizing:${cs.boxSizing};vertical-align:${cs.verticalAlign};overflow:hidden;`
+      }
+      // 贴住了：画成图时没有滚动，按量出来的偏移摆回现在的位置
+      if (stuck.has(el)) { const [dx, dy] = stuck.get(el); st += `position:relative;inset:auto;left:${dx}px;top:${dy}px;` }
+      // 以滚过的滚动区为基准的绝对 / 固定定位：跟着内容滚，往回挪（不管隔了几层）
+      const owe = el.namespaceURI === SVGNS ? null : cs.position === 'absolute' ? ctx.a : cs.position === 'fixed' ? ctx.f : null
+      if (owe && (owe[0] || owe[1])) st += shiftCss(cs, owe[0], owe[1])
+      if (lift && cs.position === 'fixed' && el.namespaceURI !== SVGNS && el.ownerDocument === document && document.body.contains(el) && !fixedHeld(el)) {
+        const x = parseFloat(cs.left)
+        const y = parseFloat(cs.top)
+        if (Number.isFinite(x) && Number.isFinite(y)) st += `left:${x - bodyAt.l}px;top:${y - bodyAt.t}px;right:auto;bottom:auto;`
+      }
       // 原来一行放得下的字，画成图时也别折行（宽度是定死的，字体渲染差一丁点就会挤到第二行）
       if (el.namespaceURI !== SVGNS && cs.whiteSpace !== 'nowrap' && oneLine(el)) st += 'white-space:nowrap;'
       c.setAttribute('style', st)
       families.add(cs.fontFamily)
       if (withUrls.length) {
+        // 等图片转好再换进去；换的时候读那一刻的 style（滚动区补的偏移是后来加上的，别盖掉）
+        const vals = withUrls.map((p) => cs.getPropertyValue(p))
         jobs.push((async () => {
+          const done = await Promise.all(vals.map((v) => inlineUrls(v, baseOf(el), inline, idp)))
           let s = c.getAttribute('style')
-          for (const p of withUrls) {
-            const v = cs.getPropertyValue(p)
-            s = s.replace(`${p}:${v};`, `${p}:${await inlineUrls(v, here(), inline)};`)
-          }
+          withUrls.forEach((p, i) => { s = s.replace(`${p}:${vals[i]};`, `${p}:${done[i]};`) })
           c.setAttribute('style', s)
         })())
       }
@@ -1538,12 +1665,12 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
       if (el.namespaceURI === SVGNS && el.localName === 'image') {
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
-        if (href) jobs.push(inline(new URL(href, here()).href).then((d) => { if (d) c.setAttribute('href', d) }))
+        if (href) jobs.push(inline(new URL(href, baseOf(el)).href).then((d) => { if (d) c.setAttribute('href', d) }))
       }
       if (el.namespaceURI === SVGNS && el.localName === 'use') {
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
         let abs = ''
-        try { abs = href && !href.startsWith('#') ? new URL(href, here()).href : '' } catch { /* 怪地址 */ }
+        try { abs = href && !href.startsWith('#') ? new URL(href, baseOf(el)).href : '' } catch { /* 怪地址 */ }
         if (abs && abs.includes('#')) {
           jobs.push(spriteOf(abs).then((id) => {
             if (!id) return
@@ -1558,7 +1685,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       if (tag === 'TEXTAREA') c.textContent = el.value
       if (tag === 'SELECT') c.setAttribute('data-v', el.value)
 
-      // ::before / ::after
+      // ::before / ::after（绝对 / 固定定位的：跟着它的定位基准滚，也算还在往外找基准的）
+      let pa = false
+      let pf = false
       if (el.namespaceURI !== SVGNS) {
         const pes = (tag === 'INPUT' || tag === 'TEXTAREA') && el.getAttribute('placeholder') ? ['::before', '::after', '::placeholder'] : ['::before', '::after']
         for (const pe of pes) {
@@ -1568,18 +1697,82 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           const cls = 'ddpx' + (++seq)
           c.setAttribute('class', ((c.getAttribute('class') || '') + ' ' + cls).trim())
           const urls = []
-          const body = styleText(ps, box.defaults(el, pe), urls)
+          let body = styleText(ps, box.defaults(el, pe), urls)
+          const pp = ps.position
+          if (pp === 'absolute' || pp === 'fixed') {
+            const mine = pp === 'absolute' ? holds(cs) : holds(cs, true)
+            const owe = mine ? (ownScroll(el) ? [el.scrollLeft, el.scrollTop] : [0, 0]) : pp === 'absolute' ? ctx.a : ctx.f
+            if (owe[0] || owe[1]) body += shiftCss(ps, owe[0], owe[1])
+            if (!mine) { if (pp === 'absolute') pa = true; else pf = true }
+            // 贴着窗口的（比如 body::before 铺的固定背景）：页面滚过、body 整体挪了，按 body 的位置换算回去
+            if (pp === 'fixed' && !mine && lift && el.ownerDocument === document && document.body.contains(el) && !fixedHeld(el)) {
+              const x = parseFloat(ps.left)
+              const y = parseFloat(ps.top)
+              if (Number.isFinite(x) && Number.isFinite(y)) body += `left:${x - bodyAt.l}px;top:${y - bodyAt.t}px;right:auto;bottom:auto;`
+            }
+          }
           const i = pseudoRules.length
           pseudoRules.push(`.${cls}${pe}{${body}}`)
-          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], here(), inline).then((t) => { pseudoRules[i] = t }))
+          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], baseOf(el), inline, idp).then((t) => { pseudoRules[i] = t }))
         }
       }
 
-      if (tag === 'IFRAME' || tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') return c
+      // 下面这几种不往里走：自己是绝对 / 固定定位的也得记上（外层滚动区挪的时候要知道）
+      if ((tag === 'IFRAME' || tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') && (cs.position === 'absolute' || cs.position === 'fixed')) {
+        openOf.set(el, { a: cs.position === 'absolute', f: cs.position === 'fixed' })
+      }
+      if (tag === 'IFRAME') {
+        // 同源的内嵌页面：把它的页面也复制进来（框住、按它自己的滚动摆）；拿不到的（跨域）铺一层浅灰，看得出这里有东西没截到
+        let doc = null
+        try { doc = el.contentDocument } catch { doc = null }
+        let inner = null
+        if (doc && doc.documentElement && depth < 3) {
+          depth++
+          try { inner = walkIn(doc) } finally { depth-- }
+        }
+        // 里面固定定位的元素以这一框为准：框自己没变换的，补一个不动的变换
+        if (inner) {
+          c.setAttribute('style', c.getAttribute('style') + 'overflow:hidden;' + (cs.transform !== 'none' ? '' : 'transform:translate(0,0);'))
+          c.appendChild(inner)
+        } else c.setAttribute('style', c.getAttribute('style') + 'background-color:rgba(127,127,127,.15);')
+        return c
+      }
+      if (tag === 'CANVAS' || tag === 'VIDEO' || tag === 'TEXTAREA') return c
+      // 自己滚过的滚动区：里面的东西按滚动距离往回挪（图里没有滚动）
+      const ox = el.namespaceURI !== SVGNS && ownScroll(el) ? el.scrollLeft : 0
+      const oy = el.namespaceURI !== SVGNS && ownScroll(el) ? el.scrollTop : 0
+      // 跟着内容滚的背景（background-attachment: local）也往回挪
+      if ((ox || oy) && /local/.test(cs.backgroundAttachment)) {
+        const att = cs.backgroundAttachment.split(',').map((x) => x.trim())
+        const pos = cs.backgroundPosition.split(',').map((p, i) => {
+          if (att[i % att.length] !== 'local') return p.trim()
+          const [x = '0%', y = '0%'] = splitTop(p.trim())
+          return `calc(${x} - ${ox}px) calc(${y} - ${oy}px)`
+        })
+        c.setAttribute('style', c.getAttribute('style') + `background-position:${pos.join(', ')};`)
+      }
+      let oa = false
+      let of = false
+      const kids = []
+      // 自己是定位基准的：它的后代按它的滚动挪；不是的，接着用外面传进来的
+      const hF = holds(cs, true)
+      const hA = hF || cs.position !== 'static' // 和 holds(cs) 一样，少算一遍
+      const sub = hA || hF ? { a: hA ? [ox, oy] : ctx.a, f: hF ? [ox, oy] : ctx.f } : ctx
       for (const child of el.childNodes) {
-        const k = walk(child)
-        if (k) c.appendChild(k)
+        const k = walk(child, sub)
+        if (k) kids.push([child, k])
+        const o = child.nodeType === 1 && openOf.get(child)
+        if (o) { oa = oa || o.a; of = of || o.f }
       }
+      if (ox || oy) scrollBack(kids, cs, ox, oy, stuck, openOf)
+      for (const [, k] of kids) c.appendChild(k)
+      if (hA) oa = false
+      if (hF) of = false
+      if (pa) oa = true
+      if (pf) of = true
+      if (cs.position === 'absolute') oa = true
+      if (cs.position === 'fixed') of = true
+      if (oa || of) openOf.set(el, { a: oa, f: of })
       if (tag === 'SELECT') {
         const o = el.selectedOptions && el.selectedOptions[0]
         c.textContent = ''
@@ -1589,6 +1782,20 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
       return c
     }
+    // 内嵌页面的那一份：它自己的根元素也当滚动区（滚过就往回挪），不算外层页面的根
+    let depth = 0
+    const docs = new Set([document])
+    function walkIn(doc) {
+      // 内嵌页面里贴住的元素也按它现在的样子摆
+      for (const [el, v] of stickyShift(doc)) stuck.set(el, v)
+      docs.add(doc)
+      if (!idPre.has(doc)) idPre.set(doc, `ddpf${++seq}-`)
+      const r = doc.documentElement
+      // 以整页为准的绝对定位跟着这一页滚
+      const k = walk(r, { a: [r.scrollLeft, r.scrollTop], f: [0, 0] })
+      if (k) k.setAttribute('style', (k.getAttribute('style') || '') + 'overflow:hidden;')
+      return k
+    }
 
     try {
       const top = topDark() // 和复制页面同一刻量（后面等图片、字体时页面可能又变了）
@@ -1596,19 +1803,23 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 字体：页面样式表里的 @font-face，只带用到的字族
       const faces = []
       const used = [...families].join(',').toLowerCase()
-      for (const sheet of document.styleSheets) {
-        let rules
-        try { rules = sheet.cssRules } catch { continue }
-        const base = sheetHref(sheet)
-        const scan = (list) => {
-          for (const r of list) {
-            if (r.cssRules && !(r instanceof CSSFontFaceRule)) { try { scan(r.cssRules) } catch { /* 读不了 */ } continue }
-            if (!(r instanceof CSSFontFaceRule)) continue
-            const fam = (r.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim().toLowerCase()
-            if (fam && used.includes(fam)) faces.push(inlineUrls(r.cssText, base, inline))
+      // 内嵌页面的规则是它那个窗口的类，instanceof 认不出来，按 type 认（5 = @font-face）
+      const isFace = (r) => r.type === 5 || r instanceof CSSFontFaceRule
+      for (const d of docs) {
+        for (const sheet of d.styleSheets) {
+          let rules
+          try { rules = sheet.cssRules } catch { continue }
+          const base = d === document ? sheetHref(sheet) : sheet.href || d.baseURI
+          const scan = (list) => {
+            for (const r of list) {
+              if (r.cssRules && !isFace(r)) { try { scan(r.cssRules) } catch { /* 读不了 */ } continue }
+              if (!isFace(r)) continue
+              const fam = (r.style.getPropertyValue('font-family') || '').replace(/['"]/g, '').trim().toLowerCase()
+              if (fam && used.includes(fam)) faces.push(inlineUrls(r.cssText, base, inline))
+            }
           }
+          scan(rules)
         }
-        scan(rules)
       }
       await Promise.all(jobs)
       const fontCss = (await Promise.all(faces)).join('\n')
@@ -1618,7 +1829,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       ;(body || root).insertBefore(style, (body || root).firstChild)
       if (sprites.childNodes.length) (body || root).appendChild(sprites)
       if (!full && (scrollX || scrollY) && body) {
-        body.setAttribute('style', body.getAttribute('style') + `transform:translate(${-scrollX}px,${-scrollY}px);`)
+        // 用 translate 属性挪：它在 transform / scale / rotate 外面一层，body 自己缩放旋转过也照样整体挪滚动距离
+        const t0 = String(getComputedStyle(document.body).translate || 'none')
+        const [tx = '0px', ty = '0px', tz = ''] = t0 === 'none' ? [] : splitTop(t0)
+        body.setAttribute('style', body.getAttribute('style') + `translate:calc(${tx} - ${scrollX}px) calc(${ty} - ${scrollY}px)${tz ? ' ' + tz : ''};`)
       }
       const xml = new XMLSerializer().serializeToString(root)
       const svg = `<svg xmlns="${SVGNS}" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}"><foreignObject x="0" y="0" width="100%" height="100%">${xml}</foreignObject></svg>`
@@ -1641,13 +1855,159 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
+  /** 贴住的（sticky）元素现在被贴偏了多少：量现在的位置，临时取消贴住再量一次，差就是偏移（同一刻改回去，不重画） */
+  function stickyShift(doc) {
+    const out = new Map()
+    const list = []
+    for (const el of doc.querySelectorAll('body *')) {
+      if (getComputedStyle(el).position === 'sticky') list.push(el)
+      if (list.length >= 400) break
+    }
+    if (!list.length) return out
+    const live = list.map((el) => [el.offsetLeft, el.offsetTop])
+    const st = doc.createElement('style')
+    st.textContent = '[data-dsh-unstick]{position:relative!important;inset:auto!important}'
+    doc.documentElement.appendChild(st)
+    try {
+      for (const el of list) el.setAttribute('data-dsh-unstick', '')
+      // 按排版坐标量（offsetLeft / offsetTop 不受缩放、旋转影响；相对最近的定位祖先，外层也贴住了的那份不会重复算）
+      list.forEach((el, i) => {
+        const dx = live[i][0] - el.offsetLeft
+        const dy = live[i][1] - el.offsetTop
+        if (dx || dy) out.set(el, [dx, dy])
+      })
+    } finally {
+      for (const el of list) el.removeAttribute('data-dsh-unstick')
+      st.remove()
+    }
+    return out
+  }
+
+  /** 固定元素是不是被某个祖先（transform、filter 之类）接管了位置：接管了就跟着那个祖先走，不用挪 */
+  function fixedHeld(el) {
+    for (let a = el.parentElement; a; a = a.parentElement) if (holds(getComputedStyle(a), true)) return true
+    return false
+  }
+
+  /**
+   * 滚过的滚动区：里面的东西按滚动距离往回挪（图里没有滚动）。kids：[原节点, 复制出来的] 按顺序，挪的时候可能换掉复制出来的那个。
+   * 能不动定位就不动（改成相对定位会打乱上下层、把往外找基准的绝对定位框进来）：
+   * 竖着滚的块容器 / 竖排 flex，给第一个在文档流里的块加负的上边距，后面的跟着往上走；横着滚的横排 flex 同理加左边距，块容器给每个块加左边距。
+   * 别的排法（grid 之类）退回一个个用相对定位挪；绝对 / 固定定位的（以滚动区为准的）改它自己的 left / top
+   */
+  function scrollBack(kids, pcs, ox, oy, stuck, openOf) {
+    const flex = /flex/.test(pcs.display)
+    const grid = /grid/.test(pcs.display)
+    const dir = String(pcs.flexDirection || 'row')
+    const row = flex && dir === 'row'
+    const col = flex && dir === 'column'
+    const rtl = pcs.direction === 'rtl'
+    const add = (k, css) => k.setAttribute('style', (k.getAttribute('style') || '') + css)
+    const info = kids.map(([child, k]) => {
+      if (child.nodeType !== 1) return { child, k, flow: true, text: !!(child.nodeValue || '').trim(), blank: !(child.nodeValue || '').trim() }
+      const ccs = getComputedStyle(child)
+      const out = ccs.position === 'absolute' || ccs.position === 'fixed'
+      return { child, k, ccs, flow: !out, inline: !flex && !grid && /^inline/.test(ccs.display) }
+    })
+    const flow = info.filter((x) => x.flow && !x.blank)
+    const first = flow[0]
+    // 负边距能整列带着走的：普通的块（不浮动、不是 display:contents）
+    const block = (x) => x && !x.text && !x.inline && x.ccs.float === 'none' && x.ccs.display !== 'contents'
+    const floats = flow.some((x) => x.ccs && x.ccs.float !== 'none')
+    // flex 主轴不是从头排的（居中、两端对齐……）：加了负边距会重新排，退回一个个挪
+    const startish = (v) => /^(normal|flex-start|start|left|stretch)$/.test(String(v || 'normal'))
+    let fy = oy
+    let fx = ox
+    let spacer = null
+    if (oy && block(first) && !floats && !flex && !grid) {
+      // 块容器：前面垫一个高 0、上边距为负的块（自己是 BFC，边距不和后面的叠），后面的照原来的边距（包括往里叠的）往下排
+      spacer = document.createElementNS(XHTML, 'div')
+      spacer.setAttribute('style', `display:flow-root;height:0;margin:-${oy}px 0 0;padding:0;border:0`)
+      fy = 0
+    } else if (oy && block(first) && col && startish(pcs.justifyContent)) {
+      // flex 里边距不叠：直接给第一个加
+      add(first.k, `margin-top:${(parseFloat(first.ccs.marginTop) || 0) - oy}px;`)
+      fy = 0
+    }
+    if (ox && !rtl && block(first) && row && startish(pcs.justifyContent)) {
+      add(first.k, `margin-left:${(parseFloat(first.ccs.marginLeft) || 0) - ox}px;`)
+      fx = 0
+    } else if (ox && !rtl && !flex && !grid && !floats && flow.length && flow.every(block)) {
+      // 块是一个个摆的，横着各挪各的（宽度已经按原来的定死，不会被负边距撑宽）
+      for (const x of flow) add(x.k, `margin-left:${(parseFloat(x.ccs.marginLeft) || 0) - ox}px;`)
+      fx = 0
+    }
+    // 绝对 / 固定定位的在 walk 里按定位基准挪过了；剩下没挪成的一个个挪
+    for (const x of info) {
+      if (x.blank || !x.flow) continue
+      if (fx || fy) x.k = scrolledKid(x.k, x.child, pcs, fx, fy, stuck, openOf.get(x.child))
+    }
+    info.forEach((x, i) => { kids[i][1] = x.k })
+    if (spacer) kids.splice(kids.findIndex(([c]) => c === first.child), 0, [null, spacer])
+  }
+
+  /** 按空格拆一个 CSS 值（括号里的空格不拆：calc()、clamp() 整个算一段） */
+  function splitTop(v) {
+    const out = []
+    let cur = ''
+    let depth = 0
+    for (const ch of String(v)) {
+      if (ch === '(') depth++
+      else if (ch === ')') depth = Math.max(0, depth - 1)
+      if (/\s/.test(ch) && !depth) { if (cur) out.push(cur); cur = '' } else cur += ch
+    }
+    if (cur) out.push(cur)
+    return out
+  }
+
+  /** 定位元素往回挪 (dx, dy)：只动挪了的那个方向；从右往左排的横向按 right 挪 */
+  function shiftCss(cs, dx, dy) {
+    let css = ''
+    if (dy) { const y = parseFloat(cs.top); if (Number.isFinite(y)) css += `top:${y - dy}px;bottom:auto;` }
+    if (dx) {
+      if (cs.direction === 'rtl') { const r = parseFloat(cs.right); if (Number.isFinite(r)) css += `right:${r + dx}px;left:auto;` } else { const x = parseFloat(cs.left); if (Number.isFinite(x)) css += `left:${x - dx}px;right:auto;` }
+    }
+    return css
+  }
+
+  /**
+   * 滚过的滚动区里的一个孩子，用相对定位往回挪。
+   * 不跟着滚的不挪：固定定位（滚动区没接管它）、包含块在滚动区外面的绝对定位。
+   * 本来没定位、里面又有还在往外找基准的绝对定位的（比如以外层为准的弹层）：改成相对定位会把它们框进来，这一块宁可不挪
+   */
+  function scrolledKid(k, child, pcs, ox, oy, stuck, open) {
+    if (child.nodeType === 3) {
+      if (!child.nodeValue.trim()) return k
+      const s = document.createElementNS(XHTML, 'span')
+      s.setAttribute('style', `position:relative;left:${-ox}px;top:${-oy}px;`)
+      s.appendChild(k)
+      return s
+    }
+    if (child.nodeType !== 1) return k
+    const ccs = getComputedStyle(child)
+    const pos = ccs.position
+    if ((pos === 'fixed' && !holds(pcs, true)) || (pos === 'absolute' && !holds(pcs))) return k
+    if (pos === 'static' && open && open.a) return k
+    let x = 0
+    let y = 0
+    if (stuck.has(child)) [x, y] = stuck.get(child)
+    else if (pos !== 'static' && pos !== 'sticky') { x = parseFloat(ccs.left) || 0; y = parseFloat(ccs.top) || 0 }
+    const keep = pos === 'absolute' || pos === 'fixed'
+    // 从右往左排的：右边的偏移才算数
+    const hx = ccs.direction === 'rtl' && !stuck.has(child) && pos !== 'static' && pos !== 'sticky'
+      ? `right:${(parseFloat(ccs.right) || 0) + ox}px;left:auto;`
+      : `left:${x - ox}px;right:auto;`
+    k.setAttribute('style', (k.getAttribute('style') || '') + `position:${keep ? pos : 'relative'};${ox ? hx : ''}${oy ? `top:${y - oy}px;bottom:auto;` : ''}`)
+    return k
+  }
+
   async function onCapture(d) {
     try {
       const r = await capture(d)
       // 整页图从文档顶上画起，链接加上滚动距离；只截视口时就是视口里的位置
       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, top: r.top })
+      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, href: here() })
     } catch (e) {
       post({ type: 'captured', id: d.id, error: String((e && e.message) || e) })
     }
@@ -1659,6 +2019,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   //   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 // 每类最多报几条
@@ -1667,6 +2029,13 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   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)
@@ -1941,15 +2310,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
@@ -2299,7 +2670,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
     // 4. 对比度（WCAG：正文 4.5，大字 3）。取底色那段装一次「量画着什么」的临时样式（见 withProbe），量完撤掉
     const sizes = new Map()
-    const tinyMin = kind === 'app' || kind === 'miniprogram' ? 10 : kind === 'tablet' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
+    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) {
@@ -2325,7 +2696,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     } })
 
     // 5. 点击区太小（App / 小程序 / 平板 44，网页 24；文字中间的链接不算）
-    const minTap = kind === 'app' || kind === 'miniprogram' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' ? 24 : 0
+    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)) {
@@ -2419,6 +2790,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
     // 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()
@@ -2432,29 +2807,45 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
    * 元素在「各层都没滚」时露出来的那块（视口坐标）：窗口、内部滚动区滚过的量加回去，被外层裁掉的去掉。
    * 滚动量、边框都按那层实际的缩放（transform、zoom）换成视口像素；裁剪按 padding box、只裁 overflow 不是 visible 的那个方向。
    * 绝对 / 固定定位的只受包含块和更外面的管；固定 / 吸顶的那层按现在看到的位置算，它外面的滚动不管、裁剪照算。全被裁掉返回 null。
-   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）
+   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）。
+   * pos：量的是 el 的伪元素，它自己的定位方式（绝对定位的从 el 起只受包含块和更外面的裁，跳过中间不包它的层）
    */
-  function restBox(el, now = false, upto = null) {
+  function restBox(el, now = false, upto = null, self = false, pos = '') {
     const chain = []
-    let mode = ''
-    let pinned = false
+    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) {
-        if ((mode === 'absolute' && !holds(cs, false)) || (mode === 'fixed' && !holds(cs, true))) continue
+      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 cx = e !== document.body && cs.overflowX !== 'visible'
-        const cy = e !== document.body && cs.overflowY !== 'visible'
+        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: cx || cy ? {
-            l: cx ? r.left + e.clientLeft * kx : -Infinity, r: cx ? r.left + (e.clientLeft + e.clientWidth) * kx : Infinity,
-            t: cy ? r.top + e.clientTop * ky : -Infinity, b: cy ? r.top + (e.clientTop + e.clientHeight) * ky : Infinity,
-          } : null,
+          clip,
         })
       }
       if (cs.position === 'fixed' || cs.position === 'sticky') pinned = true
@@ -2476,30 +2867,340 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
-  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 }
-    // 伸进胶囊多少（横竖都要伸进 2px 以上才算）：按「各层都没滚」时露出来的那块量
-    const into = (r) => {
-      if (!r) return 0
-      const ow = Math.min(r.r, cap.r) - Math.max(r.l, cap.l)
-      const oh = Math.min(r.b, cap.b) - Math.max(r.t, cap.t)
-      return ow > 2 && oh > 2 ? Math.round(Math.min(ow, r.r - cap.l)) : 0
-    }
+  /**
+   * 盖在页面上面、页面盖不住的一块（胶囊、灵动岛）：可点的东西和字横竖都伸进去 2px 以上就报。
+   * 按「各层都没滚」时露出来的那块量（不固定的滚下去本来就会从下面过）；px(o, ow, oh) 算报多少
+   */
+  function zoneCheck(add, atoms, zone, type, px, extra) {
     const hit = new Set()
-    const check = (el, rects) => {
+    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)
-      const px = Math.max(0, ...rects.map((r) => into(rest(r))))
-      if (!px) 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('capsule', el, { px, x: Math.round(cap.l) }, 2)
+      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)
+    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)
   }
 
   /**
@@ -2563,8 +3264,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       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'
-      const x = innerWidth - CAP.right - CAP.w / 2
-      const y = CAP.top + CAP.h / 2
+      // 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 = []
@@ -2635,7 +3338,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   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/.test(cs.willChange)
+      /transform|scale|translate|rotate|perspective|filter|contain/.test(cs.willChange)
   }
   /** 变换过的：transform，或单独写的 scale / translate / rotate */
   function moved(cs) {
@@ -2805,6 +3508,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     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))])
@@ -3012,6 +3744,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         },
         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),