dsh-design-studio 0.4.0 → 0.5.0

package/lib/picker.js

@@ -29,6 +29,18 @@
   const parentOrigins = window.parent === window ? [] : anc ? (allowed.some(fitsParent) ? [anc] : []) : allowed.filter((o) => !o.endsWith(':*'))
   const parentWin = parentOrigins.length ? window.parent : null
   const SEED_KEY = '__dsh_design_seed__'
+  // 远程看（右侧栏把这一屏打包放进沙盒 iframe 的 srcdoc，location 是 about:srcdoc）：这一屏原本的地址由右侧栏给
+  const HERE = cfg.remote && typeof cfg.href === 'string' ? cfg.href : ''
+  const here = () => HERE || location.href
+  const hereUrl = () => { try { return new URL(here()) } catch { return location } }
+  /** 样式表从哪来：打包时内联成 <style data-href> 的，按原来的文件算 */
+  const sheetHref = (sheet) => {
+    if (sheet.href) return sheet.href
+    const o = sheet.ownerNode
+    const d = o && o.getAttribute ? o.getAttribute('data-href') : ''
+    if (d && HERE) { try { return new URL(d, HERE).href } catch { /* 用这一页 */ } }
+    return here()
+  }
 
   function post(msg) {
     if (!parentWin) return
@@ -305,7 +317,7 @@
 
   function onMove(e) {
     e.stopPropagation()
-    if (down && (dragging || Math.hypot(e.clientX - down.x, e.clientY - down.y) > 6)) {
+    if (down && !styleOn && (dragging || Math.hypot(e.clientX - down.x, e.clientY - down.y) > 6)) {
       dragging = true
       const b = regionBox(e)
       place(b, 'region')
@@ -327,6 +339,14 @@
     const b = wasDrag ? regionBox(e) : null
     down = null
     dragging = false
+    if (styleOn) {
+      // 调样式：选中它（留虚线框），接着还能点别的
+      const el = under(e.clientX, e.clientY)
+      if (!el || el === document.body) return
+      styleSelect(el)
+      post({ type: 'stylePick', payload: { ...styleInfo(el), href: here() } })
+      return
+    }
     let payload
     if (wasDrag && b.width > 6 && b.height > 6) {
       const els = elementsIn(b)
@@ -345,7 +365,7 @@
       pin(null, el, nameOf(el))
     }
     stop(false)
-    post({ type: 'picked', payload: { ...payload, href: location.href, title: document.title, viewport: { w: innerWidth, h: innerHeight } } })
+    post({ type: 'picked', payload: { ...payload, href: here(), title: document.title, viewport: { w: innerWidth, h: innerHeight } } })
   }
 
   function onKey(e) {
@@ -358,7 +378,7 @@
   function start(hint = true) {
     if (picking) return
     picking = true
-    unpin()
+    if (!styleOn) unpin()
     mount(hint)
     addEventListener('keydown', onKey, true)
   }
@@ -370,7 +390,7 @@
     removeEventListener('keydown', onKey, true)
     if (cancelled) {
       unmount()
-      post({ type: 'cancelled' })
+      post({ type: 'cancelled', style: styleOn }) // style：调样式里按了 Esc（右侧栏退出调样式）
       return
     }
     if (ui) {
@@ -481,6 +501,19 @@
   animation:pin-in .25s ease-out}
 .pin span{opacity:.92}
 @keyframes pin-in{from{opacity:0}}
+.ck{position:absolute;pointer-events:none;border:calc(2px * var(--k, 1)) solid #f59e0b;border-radius:4px;background:rgba(245,158,11,.08)}
+.ck.hi{border-color:#e5484d;background:rgba(229,72,77,.08)}
+.ck b{position:absolute;left:calc(-9px * var(--k, 1));top:calc(-9px * var(--k, 1));min-width:18px;height:18px;padding:0 4px;box-sizing:border-box;border-radius:9px;
+  background:#f59e0b;color:#fff;font:700 11px/18px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;text-align:center;
+  transform:scale(var(--k, 1));transform-origin:0 0;box-shadow:0 2px 6px rgba(0,0,0,.25)}
+.ck.hi b{background:#e5484d}
+.ck.on{animation:ck-on 1.2s ease-out}
+.cut{position:absolute;pointer-events:none;border:calc(2px * var(--k, 1)) solid #e5484d;border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.85)}
+.cut.alt{border-color:#f59e0b;border-style:dashed}
+.cut b{position:absolute;left:calc(-2px * var(--k, 1));bottom:100%;margin-bottom:calc(3px * var(--k, 1));padding:0 6px;border-radius:4px;background:#e5484d;color:#fff;
+  font:600 12px/18px -apple-system,BlinkMacSystemFont,system-ui,sans-serif;white-space:nowrap;transform:scale(var(--k, 1));transform-origin:0 100%}
+.cut.low b{bottom:auto;top:100%;margin:calc(3px * var(--k, 1)) 0 0;transform-origin:0 0}
+@keyframes ck-on{0%,40%{box-shadow:0 0 0 calc(6px * var(--k, 1)) rgba(229,72,77,.35)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}
 .scan{position:fixed;left:0;right:0;top:0;height:38vh;pointer-events:none;opacity:0;
   background:linear-gradient(180deg,rgba(77,107,254,0),rgba(77,107,254,.06) 55%,rgba(124,140,255,.22) 92%,rgba(77,107,254,0));
   animation:scan var(--dur, 1.2s) cubic-bezier(.45,0,.25,1) forwards}
@@ -647,19 +680,19 @@
   let pending = null
   let busy = false
 
-  const seedNow = () => ({ href: location.href, scroll: { x: scrollX, y: scrollY }, sig: snapshot().map })
+  const seedNow = () => ({ href: here(), scroll: { x: scrollX, y: scrollY }, sig: snapshot().map })
 
   function boot(seed) {
     if (booted) return
     booted = true
-    const same = seed && seed.href === location.href
+    const same = seed && seed.href === here()
     if (same && seed.scroll) scrollTo(seed.scroll.x, seed.scroll.y)
     pending = same && seed.sig ? compare(seed.sig, snapshot()) : null
     const meta = document.querySelector('meta[name="dsh-design"]')
     post({
       type: 'ready',
       title: document.title,
-      href: location.href,
+      href: here(),
       meta: meta ? String(meta.getAttribute('content') || '').slice(0, 80) : '',
       tokens: tokensOf(),
       links: firstLinks(),
@@ -679,7 +712,7 @@
     for (const sheet of document.styleSheets) {
       let rules
       try { rules = sheet.cssRules } catch { continue } // 别的源的样式表读不了
-      const href = sheet.href || location.href
+      const href = sheetHref(sheet)
       for (const r of rules) {
         if (out.length >= MAX_TOKENS) return out
         if (!r.style || !/(^|,)\s*(:root|html)\s*(,|$)/.test(r.selectorText || '')) continue
@@ -695,6 +728,228 @@
     return out
   }
 
+  // ── 调样式：点一个元素选中，右侧栏拖滑块时先改在它的 inline style 上看效果 ───────────────
+  //
+  // 写回文件由右侧栏交给服务端：按「第几个这种标签 + id + 类」在源码里找到开头标签，并进 style 属性。
+  // 没写回就换一个元素 / 退出：改过的样式还原。
+
+  let styleOn = false
+  let styleEl = null
+  let styleOrig = null // 选中时 style 属性的原样（null = 原来没有）
+
+  const STYLE_KEYS = ['font-size', 'font-weight', 'color', 'background', 'border-radius', 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', 'gap']
+
+  /** 这些属性在样式表里是不是用设计变量写的（按出现顺序取最后一条，不算优先级，只用来在面板上标出来） */
+  function varsOf(el) {
+    const out = {}
+    const scan = (rules) => {
+      for (const r of rules) {
+        if (r.cssRules && !r.selectorText) {
+          if (!r.media || matchMedia(r.media.mediaText).matches) scan(r.cssRules)
+          continue
+        }
+        if (!r.style || !r.selectorText) continue
+        let hit = false
+        try { hit = el.matches(r.selectorText) } catch { hit = false }
+        if (!hit) continue
+        take(r.style)
+      }
+    }
+    const take = (style) => {
+      for (const k of STYLE_KEYS) {
+        const raw = style.getPropertyValue(k) || (k === 'background' ? style.getPropertyValue('background-color') : '') ||
+          (k.startsWith('padding-') ? style.getPropertyValue('padding') : '')
+        if (!raw) continue
+        const m = /var\(\s*(--[\w-]+)/.exec(raw)
+        if (m) out[k] = m[1]
+        else delete out[k]
+      }
+    }
+    for (const sheet of document.styleSheets) {
+      let rules
+      try { rules = sheet.cssRules } catch { continue }
+      scan(rules)
+    }
+    if (el.getAttribute('style')) take(el.style)
+    return out
+  }
+
+  // ── 每项样式现在是哪条规则给的（〔调样式〕交给模型时带上规则和文件行号，模型不用再 grep） ──
+
+  /** 选择器列表按顶层的逗号拆开（括号、方括号里的逗号不算） */
+  function splitList(s) {
+    const out = []
+    let depth = 0
+    let cur = ''
+    for (const ch of String(s)) {
+      if (ch === '(' || ch === '[') depth++
+      else if (ch === ')' || ch === ']') depth--
+      if (ch === ',' && !depth) { out.push(cur.trim()); cur = '' } else cur += ch
+    }
+    if (cur.trim()) out.push(cur.trim())
+    return out
+  }
+  /** 优先级（近似）：id × 1e6 + 类 / 属性 / 伪类 × 1e3 + 标签 / 伪元素；:where() 不算，:is / :not / :has 取括号里最高的那个分支 */
+  function specOf(sel) {
+    let extra = 0
+    let s = String(sel).replace(/"[^"]*"|'[^']*'/g, '""').replace(/:where\((?:[^()]|\([^()]*\))*\)/g, '')
+    s = s.replace(/:(?:is|not|has|matches)\(((?:[^()]|\([^()]*\))*)\)/g, (_, inner) => { extra += Math.max(0, ...splitList(inner).map(specOf)); return '' })
+    const a = (s.match(/#[\w-]+/g) || []).length
+    const b = (s.match(/\.[\w-]+|\[[^\]]*\]|:(?!:)[\w-]+/g) || []).length
+    const c = (s.replace(/\[[^\]]*\]|\([^()]*\)/g, '').match(/(?:^|[\s>+~,])[a-z][\w-]*|::[\w-]+/gi) || []).length
+    return a * 1e6 + b * 1e3 + c + extra
+  }
+  // 面板上的几项各看哪些写法（简写也算）
+  const LONGHANDS = {
+    'font-size': ['font-size', 'font'], 'font-weight': ['font-weight', 'font'], color: ['color'], background: ['background', 'background-color'],
+    'border-radius': ['border-radius', 'border-top-left-radius'], gap: ['gap', 'row-gap', 'column-gap'],
+    'padding-top': ['padding', 'padding-top'], 'padding-right': ['padding', 'padding-right'], 'padding-bottom': ['padding', 'padding-bottom'], 'padding-left': ['padding', 'padding-left'],
+  }
+  /**
+   * 每项样式（STYLE_KEYS）现在由哪条规则决定：按 !important、优先级、先后挑出胜出的那条，
+   * 给 { sel, href, n }（n：同一份样式表里同样选择器的第几条，服务端按它在源码里找行号）；
+   * 元素上的行内 style 盖过它就是 { inline: true, ...被盖过的那条 }。只看生效的 @media；层（@layer）不细算。
+   * keys 默认是调样式面板那几项；体检找原因时只问一项（如 margin-top）
+   */
+  function rulesOf(el, keys = STYLE_KEYS) {
+    const best = {}
+    let order = 0
+    // maybe：在 @layer / @container 这类没细算的块里，结论只是「大概」
+    const scan = (rules, href, counts, active, maybe) => {
+      for (const r of rules) {
+        if (r.cssRules && !r.selectorText) {
+          let on = active
+          let unsure = maybe
+          if (r.media) on = on && matchMedia(r.media.mediaText).matches
+          else if (typeof CSSSupportsRule !== 'undefined' && r instanceof CSSSupportsRule) on = on && CSS.supports(r.conditionText)
+          else unsure = true
+          scan(r.cssRules, href, counts, on, unsure)
+          continue
+        }
+        if (!r.style || !r.selectorText) continue
+        const n = counts.get(r.selectorText) || 0
+        counts.set(r.selectorText, n + 1)
+        order++
+        if (!active) continue
+        let spec = -1
+        for (const part of splitList(r.selectorText)) {
+          try { if (el.matches(part)) spec = Math.max(spec, specOf(part)) } catch { /* 浏览器不认的选择器 */ }
+        }
+        if (spec < 0) continue
+        for (const k of keys) {
+          for (const L of LONGHANDS[k] || [k]) {
+            if (!r.style.getPropertyValue(L)) continue
+            const imp = r.style.getPropertyPriority(L) === 'important'
+            const b = best[k]
+            if (!b || imp > b.imp || (imp === b.imp && (spec > b.spec || (spec === b.spec && order >= b.order)))) best[k] = { sel: r.selectorText, href, n, imp, spec, order, maybe }
+            break
+          }
+        }
+      }
+    }
+    // 页面里的几段 <style> 合起来数（服务端在整个 HTML 里按第几条找）；外链的样式表各数各的（同一个文件引了两次也不累加）
+    const countsOf = new Map()
+    for (const sheet of document.styleSheets) {
+      if (sheet.disabled) continue
+      const mq = sheet.media && sheet.media.mediaText
+      if (mq && !matchMedia(mq).matches) continue // media="print" 这种
+      let rules
+      try { rules = sheet.cssRules } catch { continue }
+      const href = sheetHref(sheet)
+      const own = sheet.ownerNode
+      const external = !!sheet.href || !!(own && own.getAttribute && own.getAttribute('data-href'))
+      if (!external && !countsOf.has(href)) countsOf.set(href, new Map())
+      scan(rules, href, external ? new Map() : countsOf.get(href), true, false)
+    }
+    const out = {}
+    for (const k of keys) {
+      const b = best[k]
+      const inl = (LONGHANDS[k] || [k]).find((L) => el.style.getPropertyValue(L))
+      if (inl && (!b || !b.imp || el.style.getPropertyPriority(inl) === 'important')) out[k] = { inline: true, ...(b ? { sel: clip(b.sel, 200), href: b.href, n: b.n } : {}) }
+      else if (b) out[k] = { sel: clip(b.sel, 200), href: b.href, n: b.n, ...(b.maybe ? { maybe: true } : {}) }
+    }
+    return out
+  }
+
+  /** 右侧栏要的：名字、选择器、源码里怎么找到它（loc）、现在的几项样式、它们各来自哪条规则 */
+  function styleInfo(el) {
+    const cs = getComputedStyle(el)
+    const tag = el.tagName.toLowerCase()
+    const same = [...document.getElementsByTagName(tag)]
+    const css = {}
+    for (const k of STYLE_KEYS) css[k] = k === 'background' ? cs.backgroundColor : k === 'border-radius' ? cs.borderTopLeftRadius : cs.getPropertyValue(k)
+    return {
+      name: nameOf(el),
+      selector: cssPath(el),
+      text: textOf(el),
+      loc: { tag, n: same.indexOf(el), total: same.length, id: el.getAttribute('id') || '', cls: [...el.classList] },
+      css,
+      vars: varsOf(el),
+      rules: rulesOf(el),
+      gradient: cs.backgroundImage !== 'none',
+      layout: /flex|grid/.test(cs.display),
+    }
+  }
+
+  function styleRevert() {
+    if (!styleEl) return
+    if (styleOrig === null) styleEl.removeAttribute('style')
+    else styleEl.setAttribute('style', styleOrig)
+  }
+
+  function styleSelect(el) {
+    if (el === styleEl) return
+    styleRevert()
+    styleEl = el
+    styleOrig = el ? el.getAttribute('style') : null
+    if (el) pin(null, el, nameOf(el))
+    else unpin()
+  }
+
+  /** css：属性 → 值（这次一共改了哪些）；每次从原样重来，去掉的那项就回去了 */
+  function styleApply(css) {
+    if (!styleEl) return
+    styleRevert()
+    for (const [k, v] of Object.entries(css || {})) {
+      if (!STYLE_KEYS.includes(k) || typeof v !== 'string' || !v) continue
+      styleEl.style.setProperty(k, v)
+    }
+    placePin()
+  }
+
+  /** 收起选取层，不通知右侧栏（模式是右侧栏自己切的） */
+  function quietStop() {
+    if (!picking) return
+    picking = false
+    removeEventListener('keydown', onKey, true)
+    unmount()
+  }
+
+  /** 右侧栏说选哪个（新载的一帧、换了一屏）：已经选着一个对得上的就不动 */
+  function onStyleSel(selector) {
+    if (!styleOn) return
+    let el = null
+    try {
+      if (selector && styleEl && styleEl.isConnected && styleEl.matches(selector)) return
+      el = selector ? document.querySelector(selector) : null
+    } catch { el = null }
+    styleSelect(el)
+  }
+
+  function setStyleMode(on) {
+    if (on === styleOn) return
+    if (on) {
+      if (textEdit) setTextEdit(false)
+      quietStop()
+      styleOn = true
+      start(false)
+    } else {
+      styleOn = false
+      styleSelect(null)
+      quietStop()
+    }
+  }
+
   // ── 直接改字：点一下文字就地改，回车写回文件 ─────────────────────────────────
   //
   // 改的是指针下面那一个文字节点（临时包一层可编辑的 span）。写回源码靠「这段文字 + 它是第几次出现」：
@@ -820,7 +1075,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const after = normWs(ed.span.innerText)
     const text = document.createTextNode(save && after ? ed.raw.replace(ed.raw.trim(), after) : ed.raw)
     if (ed.span.parentNode) ed.span.parentNode.replaceChild(text, ed.span)
-    if (save && after && after !== ed.before) post({ type: 'edited', before: ed.before, after, nth: ed.nth })
+    if (save && after && after !== ed.before) post({ type: 'edited', before: ed.before, after, nth: ed.nth, href: here() })
   }
 
   function onEditKey(e) {
@@ -835,6 +1090,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   function setTextEdit(on, hint = true) {
     if (on === textEdit) return
+    if (on && styleOn) setStyleMode(false)
     textEdit = on
     if (on) {
       editMount(hint)
@@ -867,8 +1123,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     raw = raw.trim()
     if (!raw || raw.startsWith('#') || /^(javascript|mailto|tel|sms|data):/i.test(raw)) return ''
     let u
-    try { u = new URL(raw, location.href) } catch { return '' }
-    if (u.origin !== location.origin || u.pathname === location.pathname) return ''
+    try { u = new URL(raw, here()) } catch { return '' }
+    const me = hereUrl()
+    if (u.origin !== me.origin || u.pathname === me.pathname) return ''
     try { return decodeURIComponent(u.pathname) } catch { return u.pathname }
   }
 
@@ -918,18 +1175,48 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   }
 
   // 演示：点了跳页的地方，不在 iframe 里直接跳，告诉右侧栏换一屏（带过场动画）
+  // 远程看也是：沙盒里的页面跳不过去（地址指着电脑本机），由右侧栏打包那一页换上来
   let demo = false
   addEventListener('click', (e) => {
-    if (!demo || picking) return
+    if ((!demo && !HERE) || picking) return
     const el = e.target && e.target.closest ? e.target.closest(LINK_SEL) : null
     if (!el) return
     const p = linkPath(el)
-    if (!p) return
+    if (!p) {
+      const raw = String(el.getAttribute('href') || '').trim()
+      if (HERE && raw.startsWith('#')) { e.preventDefault(); jumpTo(raw) }
+      return
+    }
     e.preventDefault()
     e.stopPropagation()
     post({ type: 'nav', path: p })
   }, true)
 
+  /** 页内锚点（远程看时 <base> 指着原地址，#xx 会被当成跳到别的页面） */
+  function jumpTo(hash) {
+    let id = String(hash || '').replace(/^#/, '')
+    try { id = decodeURIComponent(id) } catch { /* 原样 */ }
+    const t = id ? document.getElementById(id) || document.getElementsByName(id)[0] : null
+    if (t) t.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    else if (!id || id === 'top') scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  // 远程看：脚本里跳页（location.href = 'x.html'、表单提交）也拦下来
+  if (HERE && window.navigation && typeof navigation.addEventListener === 'function') {
+    navigation.addEventListener('navigate', (e) => {
+      if (!e.cancelable || e.navigationType === 'traverse' || e.downloadRequest) return
+      let u
+      try { u = new URL(e.destination.url) } catch { return }
+      const me = hereUrl()
+      if (u.origin !== me.origin) return // 外网地址：随它
+      e.preventDefault()
+      if (u.pathname === me.pathname) { if (u.hash) jumpTo(u.hash); return }
+      let p = u.pathname
+      try { p = decodeURIComponent(p) } catch { /* 原样 */ }
+      post({ type: 'nav', path: p })
+    })
+  }
+
   /** 换上来了：刚生成的一屏播生成动画，否则闪改动 */
   function reveal(opts) {
     shown = true
@@ -947,7 +1234,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   const ours = (n) => n === host || (fx && n === fx.host)
 
   function watchHmr() {
-    if (cfg.live || !shown || !window.MutationObserver) return
+    if (cfg.live || HERE || !shown || !window.MutationObserver) return // 远程看：文件改了右侧栏重新打包
     if (busy && !mo) {
       baseline = snapshot().map
       mo = new MutationObserver((recs) => {
@@ -979,9 +1266,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   }
 
   // ── 导出图片：把页面画成 PNG（SVG foreignObject，样式逐个元素内联，图片 / 字体转成 data URL） ──
-  // 右侧栏发 { type: 'capture', id, full, scale } → 回 { type: 'captured', id, png: Blob, w, h } 或 { error }
+  // 右侧栏发 { type: 'capture', id, full, scale } → 回 { type: 'captured', id, png: Blob, w, h, links } 或 { error }
+  // links：页面里跳到别的屏的地方，坐标换算到这张图上（导出 PDF / PPT 时做成能点的跳转）
 
-  const SKIP_TAGS = new Set(['SCRIPT', 'NOSCRIPT', 'TEMPLATE', 'LINK', 'META', 'TITLE', 'BASE', 'DSH-DESIGN-PICKER', 'DSH-DESIGN-FX'])
+  const SKIP_TAGS = new Set(['SCRIPT', 'NOSCRIPT', 'TEMPLATE', 'LINK', 'META', 'TITLE', 'BASE', 'DSH-DESIGN-PICKER', 'DSH-DESIGN-FX', 'DSH-DESIGN-PROBE'])
   const SKIP_PROP = /^(--|animation|transition|will-change|cursor|pointer-events|user-select|-webkit-user|caret-color|view-transition|content-visibility)/
   const MAX_INLINE = 12 * 1024 * 1024 // 图片 + 字体最多内联这么多字节，再多就跳过（不让导出卡死）
   const XHTML = 'http://www.w3.org/1999/xhtml'
@@ -993,6 +1281,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     f.style.cssText = 'position:fixed;left:-99999px;top:0;width:800px;height:600px;border:0;visibility:hidden'
     document.documentElement.appendChild(f)
     const doc = f.contentDocument
+    if (!doc) { f.remove(); return shadowSandbox() } // 远程看（页面在沙盒 iframe 里）：再建的 iframe 是另一个不透明的源，进不去
     doc.open()
     doc.write('<!doctype html><html><head></head><body><svg xmlns="http://www.w3.org/2000/svg"></svg></body></html>')
     doc.close()
@@ -1016,6 +1305,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
+  /** 量默认样式的另一种办法：关闭的 shadow root 里放一个元素（页面样式进不来；宿主 all: initial，继承的属性也是初始值） */
+  function shadowSandbox() {
+    const host = document.createElement('dsh-design-probe')
+    host.style.cssText = 'all:initial;position:fixed;left:-99999px;top:0;width:800px;height:600px;visibility:hidden'
+    document.documentElement.appendChild(host)
+    const root = host.attachShadow({ mode: 'closed' })
+    const body = document.createElement('div')
+    root.appendChild(body)
+    const svg = document.createElementNS(SVGNS, 'svg')
+    body.appendChild(svg)
+    const cache = new Map()
+    return {
+      defaults(el, pseudo) {
+        const key = (el.namespaceURI || '') + '|' + el.localName + (pseudo || '')
+        let map = cache.get(key)
+        if (map) return map
+        const d = document.createElementNS(el.namespaceURI || XHTML, el.localName)
+        ;(el.namespaceURI === SVGNS && el.localName !== 'svg' ? svg : body).appendChild(d)
+        const cs = getComputedStyle(d, pseudo || null)
+        map = {}
+        for (let i = 0; i < cs.length; i++) map[cs[i]] = cs.getPropertyValue(cs[i])
+        d.remove()
+        cache.set(key, map)
+        return map
+      },
+      remove() { host.remove() },
+    }
+  }
+
   function blobToDataUrl(blob) {
     return new Promise((resolve, reject) => {
       const r = new FileReader()
@@ -1154,7 +1472,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           let s = c.getAttribute('style')
           for (const p of withUrls) {
             const v = cs.getPropertyValue(p)
-            s = s.replace(`${p}:${v};`, `${p}:${await inlineUrls(v, location.href, inline)};`)
+            s = s.replace(`${p}:${v};`, `${p}:${await inlineUrls(v, here(), inline)};`)
           }
           c.setAttribute('style', s)
         })())
@@ -1166,7 +1484,7 @@ 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, location.href).href).then((d) => { if (d) c.setAttribute('href', d) }))
+        if (href) jobs.push(inline(new URL(href, here()).href).then((d) => { if (d) c.setAttribute('href', d) }))
       }
       if (tag === 'INPUT') {
         if (el.type === 'checkbox' || el.type === 'radio') { if (el.checked) c.setAttribute('checked', '') } else c.setAttribute('value', el.value)
@@ -1187,7 +1505,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           const body = styleText(ps, box.defaults(el, pe), urls)
           const i = pseudoRules.length
           pseudoRules.push(`.${cls}${pe}{${body}}`)
-          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], location.href, inline).then((t) => { pseudoRules[i] = t }))
+          if (urls.length) jobs.push(inlineUrls(pseudoRules[i], here(), inline).then((t) => { pseudoRules[i] = t }))
         }
       }
 
@@ -1214,7 +1532,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       for (const sheet of document.styleSheets) {
         let rules
         try { rules = sheet.cssRules } catch { continue }
-        const base = sheet.href || location.href
+        const base = sheetHref(sheet)
         const scan = (list) => {
           for (const r of list) {
             if (r.cssRules && !(r instanceof CSSFontFaceRule)) { try { scan(r.cssRules) } catch { /* 读不了 */ } continue }
@@ -1258,12 +1576,714 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   async function onCapture(d) {
     try {
       const r = await capture(d)
-      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title })
+      // 整页图从文档顶上画起，链接加上滚动距离；只截视口时就是视口里的位置
+      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 })
     } catch (e) {
       post({ type: 'captured', id: d.id, error: String((e && e.message) || e) })
     }
   }
 
+  // ── 设计体检：在画好的页面上实测常见毛病，标在页面上，报给右侧栏（给人看的文字由右侧栏按界面语言拼） ──
+  //
+  //   hscroll 超出屏幕（会横向滚动 / 被切掉） · clipped 文字被截断 · overflow 文字超出框 · overlap 文字叠在一起
+  //   contrast 对比度不够 · tap 点击区太小 · tiny 字太小 · img 图片没加载出来 · fonts 字号太杂
+  //   covered 被固定栏压住（滚到底也看不全） · tight 离固定栏太近 · jserr 页面脚本报错 · missing 样式表 / 脚本 / 字体没载出来
+  // 有意为之的不报：省略号（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]'
+  let checkMarks = []
+
+  const isOurs = (el) => SIG_SKIP.has(el.tagName)
+  function hiddenChain(el) {
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      if (cs.display === 'none' || cs.visibility === 'hidden' || cs.visibility === 'collapse' || +cs.opacity === 0) return true
+    }
+    return false
+  }
+  function animating(el) {
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      try { if (e.getAnimations().some((a) => a.playState === 'running')) return true } catch { return false }
+    }
+    return false
+  }
+  function opacityChain(el, stop) {
+    let o = 1
+    for (let e = el; e && e.nodeType === 1 && e !== stop; e = e.parentElement) o *= +getComputedStyle(e).opacity
+    return o
+  }
+
+  /** 'rgb(1, 2, 3)' / 'rgba(1, 2, 3, .5)' / 'color(srgb …)' → [r, g, b, a]；别的写法（oklch 之类浏览器已经换算过）认不出就 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
+  }
+  const over = (top, under) => {
+    const a = top[3]
+    return [top[0] * a + under[0] * (1 - a), top[1] * a + under[1] * (1 - a), top[2] * a + under[2] * (1 - a), 1]
+  }
+  const lum = (c) => {
+    const f = (v) => { v /= 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4) }
+    return 0.2126 * f(c[0]) + 0.7152 * f(c[1]) + 0.0722 * f(c[2])
+  }
+  const ratio = (a, b) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05) }
+  const hex = (c) => '#' + c.slice(0, 3).map((v) => Math.round(v).toString(16).padStart(2, '0')).join('').toUpperCase()
+
+  const MEDIA = new Set(['IMG', 'VIDEO', 'CANVAS', 'IFRAME', 'PICTURE', 'OBJECT', 'EMBED'])
+  /**
+   * 字背后的底色：从字往下一层层叠背景色，遇到不透明的为止；中间有背景图、渐变、图片视频就说不准，返回 null。
+   * 字在屏幕里时按实际叠放顺序找（字下面压着的可能不是祖先，比如首屏背景视频）；不在屏幕里就顺着祖先找
+   */
+  function backdrop(el, pt) {
+    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)
+      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) }
+    const layers = []
+    let base = null
+    for (const e of chain) {
+      if (isOurs(e)) 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 (!base) {
+      if (darkOn) return null // 深色模式下画布底色不一定是白的
+      base = [255, 255, 255, 1]
+    }
+    for (let i = layers.length - 1; i >= 0; i--) base = over(layers[i], base)
+    return { color: base }
+  }
+
+  /** 自己那几段文字在屏幕上的矩形（每行一块） */
+  function textRects(el) {
+    const out = []
+    const rg = document.createRange()
+    for (const n of el.childNodes) {
+      if (n.nodeType !== 3 || !n.nodeValue.trim()) continue
+      rg.selectNodeContents(n)
+      for (const r of rg.getClientRects()) {
+        if (r.width >= 1 && r.height >= 1) out.push({ l: r.left, t: r.top, r: r.right, b: r.bottom })
+        if (out.length >= 24) return out
+      }
+    }
+    return out
+  }
+
+  /** 最近的一个会裁掉内容的祖先（overflow: hidden / clip），和它是不是能滚 */
+  function clipperOf(el) {
+    for (let e = el.parentElement; e && e !== document.body && e !== document.documentElement; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      const ox = cs.overflowX, oy = cs.overflowY
+      if (/auto|scroll/.test(ox) || /auto|scroll/.test(oy)) return { el: e, scroll: true }
+      if (/hidden|clip/.test(ox) || /hidden|clip/.test(oy)) return { el: e, scroll: false, x: /hidden|clip/.test(ox), y: /hidden|clip/.test(oy) }
+    }
+    return null
+  }
+
+  // ── 固定栏：贴着视口上 / 下边、横着铺开的固定 / 吸顶吸底 / 绝对定位的块（顶栏、Tab 栏、底部按钮条） ──
+
+  const BAR_MAX = 0.4 // 栏最高占视口的这么多
+  const se = () => document.scrollingElement || document.documentElement
+
+  /** 能上下滚的地方：页面本身，和里面 overflow 是 auto / scroll 的区域（App 常把内容放在一个能滚的 main 里） */
+  function scrollAreas() {
+    const out = []
+    if (se().scrollHeight > innerHeight + 1) out.push(se())
+    const all = document.body.getElementsByTagName('*')
+    for (let i = 0; i < all.length && out.length < 20; i++) {
+      const el = all[i]
+      if (el.scrollHeight <= el.clientHeight + 1 || el.clientHeight < 40 || isOurs(el)) continue
+      if (/auto|scroll|overlay/.test(getComputedStyle(el).overflowY)) out.push(el)
+    }
+    return out
+  }
+  /** 都滚到顶 / 底（instant：页面写了 scroll-behavior: smooth 也一下到位） */
+  function scrollAll(areas, end) {
+    for (const el of areas) {
+      const top = end ? el.scrollHeight : 0
+      if (el === se()) scrollTo({ left: scrollX, top, behavior: 'instant' })
+      else el.scrollTo({ left: el.scrollLeft, top, behavior: 'instant' })
+    }
+  }
+
+  /** 滚完等两帧、再等新露出来的图和字体（页面的滚动监听、懒加载的图有机会跟上），再截图 */
+  const afterScroll = (v) => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(v)))).then((v2) => settle().then(() => v2, () => v2))
+
+  function barsAt(edge) {
+    const out = []
+    const vw = innerWidth, vh = innerHeight
+    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 (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
+      if (edge === 'bottom' ? Math.abs(r.bottom - vh) > 2 : Math.abs(r.top) > 2) continue
+      if (hiddenChain(el)) continue
+      out.push({ el, r, pos, edge })
+    }
+    return out
+  }
+
+  /** 这一点上最上面那个元素（我们自己画的框不算） */
+  const topAt = (x, y) => {
+    const cx = Math.max(0, Math.min(innerWidth - 1, x)), cy = Math.max(0, Math.min(innerHeight - 1, y))
+    for (const e of document.elementsFromPoint(cx, cy)) if (!isOurs(e)) return e
+    return null
+  }
+  /** 栏在这一点是不是不透明的（有底色 / 背景图 / 毛玻璃，或者压着的是栏里的字、图标） */
+  function barSolid(top, bar) {
+    if (top !== bar && (MEDIA.has(top.tagName) || top instanceof SVGElement || ownText(top))) return true
+    for (let e = top; e && e.nodeType === 1; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      const c = rgba(cs.backgroundColor)
+      if ((c && c[3] > 0.5) || (cs.backgroundImage && cs.backgroundImage !== 'none') || (cs.backdropFilter && cs.backdropFilter !== 'none')) return true
+      if (e === bar) break
+    }
+    return false
+  }
+
+  /**
+   * 固定栏压没压住内容：没滚时看顶栏，滚到底（页面和里面能滚的区域）时看底栏。
+   * 压住了报 covered；最近的字离栏不到 8px 报 tight。量完马上滚回去（同一帧里，看不到跳动）。
+   * 返回每条栏的高度和离内容的距离（负数 = 压住了这么多）
+   */
+  /** 这一点在元素的某个外层（overflow 不是 visible 的）外面：被裁掉了，看不见 */
+  function clippedAt(el, x, y) {
+    for (let e = el.parentElement; e && e !== document.body && e !== document.documentElement; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      if (cs.overflowX !== 'visible' || cs.overflowY !== 'visible') {
+        const r = e.getBoundingClientRect()
+        if (x < r.left - 1 || x > r.right + 1 || y < r.top - 1 || y > r.bottom + 1) return true
+      }
+      if (cs.position === 'fixed') break // 固定定位的外层不再受更外面的裁剪
+    }
+    return false
+  }
+
+  function edgeCheck(add, atoms) {
+    const areas = scrollAreas()
+    const was = areas.map((el) => [el, el.scrollLeft, el.scrollTop])
+    const out = []
+    const covered = new Set()
+    const look = (edge) => {
+      for (const bar of barsAt(edge)) {
+        const b = bar.r
+        let near = null // 离栏最近的那行字：{ d, el }
+        for (const a of atoms) {
+          if (bar.el.contains(a.el) || covered.has(a.el)) continue
+          for (const r of textRects(a.el)) {
+            if (r.r <= b.left + 1 || r.l >= b.right - 1 || r.b <= 0 || r.t >= innerHeight) continue // 和栏不在一竖条上、不在视口里
+            // 离栏多远（负数 = 伸进栏里了）；没滚时的顶栏、滚到底时的底栏后面的字已经没法再滚出来了，也算
+            const d = edge === 'bottom' ? b.top - r.b : r.t - b.bottom
+            if (d > 120) continue
+            const x = (Math.max(r.l, b.left) + Math.min(r.r, b.right)) / 2
+            const y = d < 0 ? (Math.max(r.t, b.top) + Math.min(r.b, b.bottom)) / 2 : (r.t + r.b) / 2
+            if (clippedAt(a.el, x, y)) continue // 被外层裁掉了，本来就看不见
+            const top = topAt(x, y)
+            if (!top) continue
+            const mine = a.el === top || a.el.contains(top)
+            const under = !mine && bar.el.contains(top) && barSolid(top, bar.el)
+            if (!mine && !under) continue // 被别的东西挡着、或者裁掉了：不算
+            if (mine && d < 0) continue // 字画在栏上面（层级更高）：没被压住，也不算进离内容多远
+            if (!near || d < near.d) near = { d, el: a.el }
+            if (under && d < -2) {
+              covered.add(a.el)
+              add('covered', a.el, { px: Math.round(-d), edge, bar: nameOf(bar.el) }, 2)
+              break
+            }
+          }
+        }
+        if (near && near.d >= 0 && near.d < 8 && !covered.has(near.el)) add('tight', near.el, { px: Math.round(near.d), edge, bar: nameOf(bar.el) }, 1)
+        out.push({ edge, name: nameOf(bar.el), pos: bar.pos, h: Math.round(b.height), gap: near ? Math.round(near.d) : null })
+      }
+    }
+    try {
+      scrollAll(areas, false)
+      look('top')
+      if (areas.length) scrollAll(areas, true)
+      look('bottom')
+    } finally {
+      for (const [el, x, y] of was) {
+        if (el === se()) scrollTo({ left: x, top: y, behavior: 'instant' })
+        else el.scrollTo({ left: x, top: y, behavior: 'instant' })
+      }
+    }
+    return { bars: out, areas: areas.filter((el) => el !== se()).length }
+  }
+
+  /**
+   * 体检附图：把出问题的元素摆回量的时候的样子（被栏压住的滚到顶 / 底，别的滚到屏幕中间），
+   * 红框圈出它（叠字时两个都圈；被栏压住的把栏调成半透明，透出下面的字），
+   * 给出裁剪范围（整页坐标；连上叠着的元素、压住它的栏，四周留 24px，至少约 40% 宽、30% 高，不伸出视口，看得到周围的排版）。
+   * also：挨着的几条问题的元素，在图里的也圈上，inside 里说哪几个在图里。
+   * 叠着的另一个用橙色虚线框；upper 说哪个画在上面（self / other）；label 是标在红框上的数字（如「压住 44px」）。
+   * 元素没了、没有大小、不在屏幕里给 null
+   */
+  let cutMarks = []
+  let cutUndo = []
+  async function cropAt({ sel, other, edge, hscroll, also = [], label = '' }) {
+    for (const m of cutMarks) m.remove()
+    for (const f of cutUndo) f()
+    cutMarks = []
+    cutUndo = []
+    const q = (s) => { try { return s ? document.querySelector(s) : null } catch { return null } }
+    const el = q(sel)
+    if (!el) return null
+    if (edge === 'top' || edge === 'bottom') scrollAll(scrollAreas(), edge === 'bottom')
+    else {
+      try { el.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' }) } catch { el.scrollIntoView() }
+      if (hscroll) scrollTo({ left: 0, top: scrollY, behavior: 'instant' }) // 伸出屏幕的：照用户看到的截，别横着滚过去
+    }
+    await afterScroll()
+    const vw = document.documentElement.clientWidth || innerWidth, vh = innerHeight
+    const box = (e) => { const r = e && e.getBoundingClientRect(); return r && (r.width >= 1 || r.height >= 1) ? r : null }
+    const own = box(el)
+    if (!own || own.bottom <= 0 || own.top >= vh || own.right <= 0 || own.left >= vw) return null
+    const parts = [own]
+    const o = q(other)
+    const oth = box(o)
+    if (oth) parts.push(oth)
+    if (edge) {
+      const bar = barsAt(edge).find((b) => b.r.left < own.right && b.r.right > own.left)
+      if (bar) {
+        parts.push(bar.r)
+        const was = bar.el.style.getPropertyValue('opacity'), pri = bar.el.style.getPropertyPriority('opacity')
+        bar.el.style.setProperty('opacity', '0.3', 'important')
+        cutUndo.push(() => { if (was) bar.el.style.setProperty('opacity', was, pri); else bar.el.style.removeProperty('opacity') })
+      }
+    }
+    const { root } = fxRoot()
+    const mark = (e, cls = '', text = '') => {
+      const r = docRect(e)
+      const d = document.createElement('div')
+      d.className = 'cut' + cls
+      Object.assign(d.style, { left: r.left - 3 + 'px', top: r.top - 3 + 'px', width: r.width + 6 + 'px', height: r.height + 6 + 'px' })
+      if (text) {
+        const t = document.createElement('b')
+        t.textContent = String(text).slice(0, 40)
+        d.append(t)
+        if (e.getBoundingClientRect().top < 30) d.classList.add('low') // 上面放不下：标在框下面
+      }
+      root.append(d)
+      cutMarks.push(d)
+    }
+    mark(el, '', label)
+    if (oth) mark(o, ' alt')
+    // 叠着的两个：重叠那块中间最上面的是谁
+    let upper = ''
+    if (oth) {
+      const x = (Math.max(own.left, oth.left) + Math.min(own.right, oth.right)) / 2, y = (Math.max(own.top, oth.top) + Math.min(own.bottom, oth.bottom)) / 2
+      const top = topAt(x, y)
+      upper = top && el.contains(top) ? 'self' : top && o.contains(top) ? 'other' : ''
+    }
+    // 至少 min 那么大（太小看不出周围），先居中撑开，再挪回视口里
+    const fit = (a, z, min, max) => {
+      if (z - a < min) { const c = (a + z) / 2; a = c - min / 2; z = c + min / 2 }
+      if (a < 0) { z -= a; a = 0 }
+      if (z > max) { a -= z - max; z = max }
+      return [Math.max(0, a), Math.min(max, z)]
+    }
+    const [l, r] = fit(Math.min(...parts.map((x) => x.left)) - 24, Math.max(...parts.map((x) => x.right)) + 24, Math.min(vw, Math.max(320, vw * 0.4)), vw)
+    const [t, b] = fit(Math.min(...parts.map((x) => x.top)) - 24, Math.max(...parts.map((x) => x.bottom)) + 24, Math.min(vh, Math.max(200, vh * 0.3)), vh)
+    if (r - l < 1 || b - t < 1) return null
+    // 挨着的：至少一半在图里才算、才圈
+    const inside = (Array.isArray(also) ? also : []).slice(0, 12).map((s) => {
+      const e = q(s)
+      const x = box(e)
+      if (!x) return false
+      const iw = Math.min(x.right, r) - Math.max(x.left, l), ih = Math.min(x.bottom, b) - Math.max(x.top, t)
+      const ok = iw > 0 && ih > 0 && iw * ih >= 0.5 * x.width * Math.max(1, x.height)
+      if (ok && e !== el && e !== o) mark(e)
+      return ok
+    })
+    return { x: Math.round(l + scrollX), y: Math.round(t + scrollY), w: Math.round(r - l), h: Math.round(b - t), inside, upper }
+  }
+
+  /**
+   * 两段字叠在一起，多半是哪儿挪了位置：从两个元素往上到共同的外层，找负 margin、绝对定位、transform。
+   * 给 { sel, prop, value }（体检再按它找是哪条规则、哪个文件第几行），找不到给 null
+   */
+  function causeOf(A, B) {
+    const chain = (e) => {
+      const out = []
+      for (let x = e; x && x !== document.body && !x.contains(e === A ? B : A) && out.length < 6; x = x.parentElement) out.push(x)
+      return out
+    }
+    const both = [...chain(A), ...chain(B)]
+    for (const e of both) {
+      const cs = getComputedStyle(e)
+      for (const side of ['top', 'left', 'bottom', 'right']) {
+        const v = cs.getPropertyValue('margin-' + side)
+        if (parseFloat(v) < -1) return { sel: cssPath(e), prop: 'margin-' + side, value: v }
+      }
+    }
+    for (const e of both) {
+      const pos = getComputedStyle(e).position
+      if (pos === 'absolute' || pos === 'fixed') return { sel: cssPath(e), prop: 'position', value: pos }
+    }
+    for (const e of both) {
+      if (getComputedStyle(e).transform !== 'none') return { sel: cssPath(e), prop: 'transform', value: '' }
+    }
+    return null
+  }
+
+  /** 页面里引用的地址 → 设计目录里的相对路径（同一个预览服务器上的）；外网的给 '' */
+  function relOf(src) {
+    try {
+      const u = new URL(src, here())
+      if (u.origin !== hereUrl().origin) return ''
+      return decodeURIComponent(u.pathname).replace(/^\/+/, '')
+    } catch { return '' }
+  }
+
+  /**
+   * 量一遍。返回 { issues, metrics }：metrics 是量的时候视口多大、页面多高、有哪些固定栏，
+   * 让模型知道量的是什么（不只是一句「没问题」）
+   */
+  function runCheck(kind) {
+    const issues = []
+    const per = {}
+    const add = (type, el, extra, sev = 1) => {
+      if ((per[type] = (per[type] || 0) + 1) > CHECK_PER) return
+      const r = el ? docRect(el) : null
+      issues.push({ type, sev, el, sel: el ? cssPath(el) : '', name: el ? nameOf(el) : '', text: el ? ownText(el).slice(0, 40) : '', rect: r ? { x: Math.round(r.left), y: Math.round(r.top), w: Math.round(r.width), h: Math.round(r.height) } : null, ...extra })
+    }
+    const body = document.body
+    if (!body) return []
+    const vw = document.documentElement.clientWidth || innerWidth
+
+    // 带字的元素
+    const atoms = []
+    const all = body.getElementsByTagName('*')
+    for (let i = 0; i < all.length && atoms.length < CHECK_ATOMS; i++) {
+      const el = all[i]
+      if (isOurs(el) || el.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit,script,style,noscript,template,svg')) continue
+      if (!ownText(el)) continue
+      const cs = getComputedStyle(el)
+      if (cs.display === 'none' || cs.visibility !== 'visible') continue
+      const rects = textRects(el)
+      if (!rects.length || hiddenChain(el)) continue
+      atoms.push({ el, cs, rects })
+    }
+
+    // 1. 超出屏幕：最外面那个伸出去的元素（在能横向滚动的区域里的不算，那是轮播）
+    const sw = document.documentElement.scrollWidth
+    const culprits = []
+    for (let i = 0; i < all.length && culprits.length < 3; i++) {
+      const el = all[i]
+      if (isOurs(el)) continue
+      const r = el.getBoundingClientRect()
+      if (r.width < 1 || r.height < 1) continue
+      // 按 innerWidth 算：100vw 的块在有滚动条的系统上会多出一条滚动条宽，不算它
+      const out = Math.max(r.right - innerWidth, -r.left)
+      if (out <= 2) continue
+      const cs = getComputedStyle(el)
+      if (cs.position === 'fixed') continue
+      const p = el.parentElement
+      if (p && p !== body) {
+        const pr = p.getBoundingClientRect()
+        if (Math.max(pr.right - innerWidth, -pr.left) > 2) continue // 爸爸已经伸出去了，报爸爸
+      }
+      const cl = clipperOf(el)
+      if (cl) continue // 在会滚 / 会裁的容器里：轮播、跑马灯，或者归「被截断」管
+      if (hiddenChain(el)) continue
+      culprits.push({ el, out: Math.round(out) })
+    }
+    for (const c of culprits) add('hscroll', c.el, { px: c.out, scroll: sw > vw + 1 }, 2)
+
+    // 2. 文字被截断 / 超出框：自己的字伸出了所在的块（行内元素看外面那个块）。
+    //    Range 量到的是排版后的位置，被裁掉的部分也量得到
+    const clampOf = (cs) => (cs.webkitLineClamp && cs.webkitLineClamp !== 'none') || (cs.lineClamp && cs.lineClamp !== 'none')
+    for (const a of atoms) {
+      const { el } = a
+      let box = el
+      while (box.parentElement && /^(inline|contents)$/.test(getComputedStyle(box).display)) box = box.parentElement
+      const bcs = box === el ? a.cs : getComputedStyle(box)
+      if (box !== body && box !== document.documentElement && box.clientWidth > 0) {
+        const br = box.getBoundingClientRect()
+        const dx = Math.max(0, ...a.rects.map((r) => Math.max(r.r - br.right, br.left - r.l)))
+        const dy = Math.max(0, ...a.rects.map((r) => Math.max(r.b - br.bottom, br.top - r.t)))
+        const ox = bcs.overflowX, oy = bcs.overflowY
+        // 大字的字形本来就会比行框宽、高一点（字距收紧、行高小于 1），差一点不算
+        const slack = Math.max(3, (parseFloat(a.cs.fontSize) || 16) * 0.2)
+        if (dx > slack && !/auto|scroll/.test(ox) && bcs.textOverflow !== 'ellipsis') { add(/hidden|clip/.test(ox) ? 'clipped' : 'overflow', el, { px: Math.round(dx) }, 2); continue }
+        if (dy > slack && !/auto|scroll/.test(oy) && !clampOf(bcs)) { add(/hidden|clip/.test(oy) ? 'clipped' : 'overflow', el, { px: Math.round(dy) }, 2); continue }
+      }
+      // 被更外面的容器裁掉
+      const cl = clipperOf(box)
+      if (cl && !cl.scroll) {
+        const box = cl.el.getBoundingClientRect()
+        const cut = Math.max(...a.rects.map((r) => Math.max(cl.x ? r.r - box.right : 0, cl.x ? box.left - r.l : 0, cl.y ? r.b - box.bottom : 0, cl.y ? box.top - r.t : 0)))
+        const ccs = getComputedStyle(cl.el)
+        if (cut > 2 && ccs.textOverflow !== 'ellipsis' && !clampOf(ccs)) add('clipped', el, { px: Math.round(cut) }, 2)
+      }
+    }
+
+    // 3. 文字叠在一起：不同元素的文字矩形（逐行）重叠超过小的那块的 30%；很淡的装饰字不算。
+    //    一个在固定的顶栏 / 底栏里、一个在页面内容里的不算：内容滚动时本来就从栏下面过，滚到头还被压住由第 11 项（covered）查
+    const pinBars = [...barsAt('top'), ...barsAt('bottom')].map((b) => b.el)
+    const pins = new Map()
+    const pinOf = (i) => {
+      if (pins.has(i)) return pins.get(i)
+      let hit = null
+      for (let e = atoms[i].el; e && e !== document.body; e = e.parentElement) {
+        const pos = getComputedStyle(e).position
+        if (pinBars.includes(e) || pos === 'fixed' || pos === 'sticky') { hit = e; break }
+      }
+      pins.set(i, hit)
+      return hit
+    }
+    const boxes = []
+    atoms.forEach((a, i) => {
+      const fg = rgba(a.cs.color)
+      if (fg && fg[3] * opacityChain(a.el) < 0.35) return
+      for (const r of a.rects) if (r.b - r.t >= 4) boxes.push({ ...r, i })
+    })
+    boxes.sort((x, y) => x.t - y.t)
+    const pairs = new Set()
+    for (let i = 0; i < boxes.length; i++) {
+      const p = boxes[i]
+      for (let j = i + 1; j < boxes.length && boxes[j].t < p.b; j++) {
+        const q = boxes[j]
+        if (q.i === p.i) continue
+        const ow = Math.min(p.r, q.r) - Math.max(p.l, q.l)
+        const oh = Math.min(p.b, q.b) - Math.max(p.t, q.t)
+        if (ow <= 3 || oh <= 3) continue
+        const small = Math.min((p.r - p.l) * (p.b - p.t), (q.r - q.l) * (q.b - q.t))
+        if (ow * oh < small * 0.3) continue
+        const A = atoms[p.i].el, B = atoms[q.i].el
+        if (A.contains(B) || B.contains(A)) continue
+        if (!pinOf(p.i) !== !pinOf(q.i)) continue
+        const key = Math.min(p.i, q.i) + ':' + Math.max(p.i, q.i)
+        if (pairs.has(key)) continue
+        pairs.add(key)
+        add('overlap', A, { other: nameOf(B), otherText: ownText(B).slice(0, 40), otherSel: cssPath(B), px: Math.round(oh), cause: causeOf(A, B) }, 2)
+      }
+    }
+
+    // 4. 对比度（WCAG：正文 4.5，大字 3）
+    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 { 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)
+      if (px && px < tinyMin && !el.closest('sup,sub')) add('tiny', el, { size: Math.round(px * 10) / 10, min: tinyMin }, 1)
+      if (el.closest(':disabled,[aria-disabled="true"]')) continue
+      const fill = cs.webkitTextFillColor
+      let fg = rgba(fill && fill !== cs.color ? fill : cs.color)
+      if (!fg || fg[3] === 0) continue // 渐变字之类
+      const r0 = a.rects[0]
+      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 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
+    if (minTap) {
+      const small = []
+      for (const el of 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 || (r.width >= minTap && r.height >= minTap)) continue
+        const cs = getComputedStyle(el)
+        if (cs.display === 'inline' && el.parentElement && ownText(el.parentElement)) continue // 一段话里的链接
+        if (el.closest(CLICKABLE) !== el && el.parentElement && el.parentElement.closest(CLICKABLE)) continue // 外面一层已经是可点的
+        if (hiddenChain(el)) continue
+        small.push({ el, w: Math.round(r.width), h: Math.round(r.height) })
+      }
+      small.sort((x, y) => Math.min(x.w, x.h) - Math.min(y.w, y.h))
+      for (const s of small) add('tap', s.el, { w: s.w, h: s.h, min: minTap }, Math.min(s.w, s.h) < minTap * 0.6 ? 2 : 1)
+    }
+
+    // 6. 图片没加载出来
+    for (const img of body.querySelectorAll('img')) {
+      if (img.complete && img.naturalWidth === 0 && img.getAttribute('src') && !hiddenChain(img)) add('img', img, { src: img.getAttribute('src').slice(0, 80) }, 2)
+    }
+
+    // 7. 图片被拉变形：object-fit 是默认的 fill，显示的宽高比和原图差 4% 以上（SVG 自己保持比例，不算）
+    for (const img of body.querySelectorAll('img')) {
+      if (!img.complete || !img.naturalWidth || !img.naturalHeight || hiddenChain(img)) continue
+      if (/\.svg(\?|#|$)|^data:image\/svg/i.test(img.currentSrc || img.src || '')) continue
+      const r = img.getBoundingClientRect()
+      if (r.width < 24 || r.height < 24) continue
+      if ((getComputedStyle(img).objectFit || 'fill') !== 'fill') continue
+      const skew = (r.width / r.height) / (img.naturalWidth / img.naturalHeight)
+      if (Math.abs(Math.log(skew)) > Math.log(1.04)) add('distort', img, { nw: img.naturalWidth, nh: img.naturalHeight, w: Math.round(r.width), h: Math.round(r.height) }, 1)
+    }
+
+    // 8. 一行太长（网页 / 邮件 / 平板）：成段的字一行超过约 45 个汉字或 90 个字母，读着累。
+    //    最宽那行有几个字宽（汉字一个字 1em，字母平均约 0.5em）；要折了行才算（一行写完的标题不管）；同一屏报几处就够
+    if (kind === 'web' || kind === 'email' || kind === 'tablet') {
+      let long = 0
+      for (const a of atoms) {
+        if (long >= 3) break
+        const text = ownText(a.el)
+        if (text.length < 60 || new Set(a.rects.map((r) => Math.round(r.t))).size < 2) continue
+        const px = parseFloat(a.cs.fontSize) || 16
+        const cjk = (text.match(/[\u3400-\u9fff\uf900-\ufaff]/g) || []).length > text.length * 0.3
+        const max = cjk ? 45 : 90
+        const per = Math.round(Math.max(...a.rects.map((r) => r.r - r.l)) / px * (cjk ? 1 : 2))
+        if (per > max) { add('long', a.el, { chars: per, max }, 1); long++ }
+      }
+    }
+
+    // 9. 短字被挤断了行：按钮、价格、标签这种几个字的折成了两行（「再来一 / 单」），或者一句短话最后一行只剩一两个字。
+    //    一段话里跟着文字折行的行内元素不算（外面那个块的字多）；写了 <br> 的、竖排的不算
+    let wraps = 0
+    for (const a of atoms) {
+      if (wraps >= 5) break
+      const text = ownText(a.el).replace(/\s+/g, ' ').trim()
+      if (text.length < 2 || text.length > 16 || a.el.querySelector('br') || /vertical/.test(a.cs.writingMode)) continue
+      const tops = []
+      for (const r of a.rects) if (!tops.some((t) => Math.abs(t - r.t) < 3)) tops.push(r.t)
+      if (tops.length < 2) continue
+      if (/^inline/.test(a.cs.display) && a.cs.display !== 'inline-block' && a.cs.display !== 'inline-flex') {
+        let box = a.el.parentElement
+        while (box && box !== body && /^(inline|contents)$/.test(getComputedStyle(box).display)) box = box.parentElement
+        if (box && box !== body && (box.textContent || '').replace(/\s+/g, '').length > 20) continue
+      }
+      const px = parseFloat(a.cs.fontSize) || 16
+      const lastTop = Math.max(...tops)
+      const tail = a.rects.filter((r) => Math.abs(r.t - lastTop) < 3).reduce((m, r) => m + (r.r - r.l), 0) / px
+      const short = text.replace(/\s/g, '').length <= 6 || !!a.el.closest('button,[role="button"]')
+      if (short || tail <= 2.2) { add('wrap', a.el, { lines: tops.length }, 1); wraps++ }
+    }
+
+    // 10. 字号太杂（整屏一条）
+    const used = [...sizes.keys()].sort((x, y) => x - y)
+    if (used.length > 7) add('fonts', null, { sizes: used }, 1)
+
+    // 11. 固定栏压住内容 / 贴得太近
+    const edges = edgeCheck(add, atoms)
+
+    // 12. 页面脚本报错、样式表 / 脚本 / 字体没载出来（<head> 最前面那段小脚本记下的；图片归第 6 条）
+    for (const e of Array.isArray(window.__dshErrs) ? window.__dshErrs.slice(0, 20) : []) {
+      if (e.res) {
+        if (e.tag === 'img' || !e.src) continue
+        const rel = relOf(e.src)
+        if (rel && !rel.startsWith('__dsh_design__/')) add('missing', null, { what: e.tag === 'link' ? 'css' : e.tag, src: rel }, 2)
+      } else if (!/__dsh_design__/.test(e.src || '')) {
+        add('jserr', null, { msg: String(e.msg || '').slice(0, 160), src: relOf(e.src || '') || '', line: e.line || 0 }, 2)
+      }
+    }
+    try {
+      for (const f of document.fonts || []) if (f.status === 'error') add('missing', null, { what: 'font', src: String(f.family || '').replace(/['"]/g, '') }, 1)
+    } catch { /* 老浏览器 */ }
+
+    issues.sort((x, y) => y.sev - x.sev)
+    const se0 = se()
+    return {
+      issues: issues.slice(0, CHECK_MAX),
+      metrics: { w: vw, h: innerHeight, page: Math.max(se0.scrollHeight, innerHeight), bars: edges.bars, areas: edges.areas },
+    }
+  }
+
+  /** 量之前等字体、图片载完（最多等 2 秒）：刚载入的页面字体没到时字宽不对，断行、截断都会量错 */
+  async function settle() {
+    const wait = (p, ms) => Promise.race([p, new Promise((r) => setTimeout(r, ms))])
+    try { if (document.fonts && document.fonts.ready) await wait(document.fonts.ready, 2000) } catch { /* 没有 fonts */ }
+    // 懒加载的图：滚到视口里了也等（滚动截图时）
+    const seen = (i) => { const r = i.getBoundingClientRect(); return r.bottom > 0 && r.top < innerHeight && r.right > 0 && r.left < innerWidth }
+    const imgs = [...document.images].filter((i) => !i.complete && (i.loading !== 'lazy' || seen(i)))
+    if (imgs.length) await wait(Promise.all(imgs.map((i) => new Promise((r) => { i.addEventListener('load', r, { once: true }); i.addEventListener('error', r, { once: true }) }))), 2000)
+  }
+
+  function clearMarks() {
+    for (const m of checkMarks) m.node.remove()
+    checkMarks = []
+  }
+
+  function placeMarks() {
+    for (const m of checkMarks) {
+      if (!m.el || !m.el.isConnected) continue
+      const r = docRect(m.el)
+      Object.assign(m.node.style, { left: r.left - 2 + 'px', top: r.top - 2 + 'px', width: r.width + 4 + 'px', height: r.height + 4 + 'px' })
+    }
+  }
+  addEventListener('resize', placeMarks)
+
+  function markIssues(issues) {
+    clearMarks()
+    const { root } = fxRoot()
+    issues.forEach((it, i) => {
+      if (!it.el) return
+      const b = document.createElement('div')
+      b.className = 'ck' + (it.sev > 1 ? ' hi' : '')
+      const t = document.createElement('b')
+      t.textContent = String(i + 1)
+      b.append(t)
+      root.append(b)
+      checkMarks.push({ node: b, el: it.el })
+    })
+    placeMarks()
+  }
+
+  let lastIssues = []
+
+  /** 右侧栏点了第 i 条：滚过去，那个框闪一下 */
+  function focusIssue(i) {
+    const it = lastIssues[i]
+    if (!it || !it.el || !it.el.isConnected) return
+    const go = () => {
+      const mk = checkMarks.find((x) => x.el === it.el)
+      if (mk) { mk.node.classList.remove('on'); void mk.node.offsetWidth; mk.node.classList.add('on') }
+    }
+    if (inView(it.el)) go()
+    else {
+      try { it.el.scrollIntoView({ behavior: 'smooth', block: 'center' }) } catch { it.el.scrollIntoView() }
+      setTimeout(() => { placeMarks(); go() }, 450)
+    }
+  }
+  async function onCheck(d) {
+    let r
+    try {
+      await settle()
+      r = runCheck(String(d.kind || 'web'))
+    } catch (e) {
+      // 量的时候出错了：照实说没量成，别当成「没问题」
+      console.warn('[dsh-design-studio] 体检出错', e)
+      post({ type: 'checked', id: d.id, error: String((e && e.message) || e).slice(0, 200) })
+      return
+    }
+    // 悄悄查（模型干完活顺手量一下，只要个数）：不动页面上的标记
+    if (!d.quiet) {
+      lastIssues = r.issues
+      markIssues(r.issues)
+    }
+    post({ type: 'checked', id: d.id, issues: r.issues.map(({ el, ...rest }) => rest), metrics: r.metrics, width: r.metrics.w })
+  }
+
   // ── 深色模式：页面带了深色样式（[data-theme="dark"] / .dark / prefers-color-scheme: dark）就能切 ──
 
   let darkOn = false
@@ -1325,7 +2345,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const d = e.data
     if (!d || d.dshDesign !== 1) return
     if (d.type === 'pick') start(d.hint !== false)
-    else if (d.type === 'cancel') stop(true)
+    else if (d.type === 'cancel') { if (!styleOn) stop(true) }
     else if (d.type === 'init') boot(d.seed || null)
     else if (d.type === 'reveal') reveal(d)
     else if (d.type === 'zoom') setK(1 / (Number(d.z) || 1))
@@ -1334,11 +2354,84 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     else if (d.type === 'unpin') unpin()
     else if (d.type === 'reload') selfReload()
     else if (d.type === 'capture') onCapture(d)
+    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 === '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)
   })
 
+  // 无头浏览器（check_design / look_design 在电脑上另开的，见 browser.js）直接调这几个：
+  // 量一遍、切深色、滚到底 / 滚到第几屏、取页面信息。都只读或只动这个页面自己
+  function mainArea() {
+    const areas = scrollAreas()
+    if (areas.includes(se())) return se()
+    return areas.sort((a, b) => (b.scrollHeight - b.clientHeight) - (a.scrollHeight - a.clientHeight))[0] || se()
+  }
+  try {
+    Object.defineProperty(window, '__dshDesign', {
+      value: Object.freeze({
+        check: async (kind) => {
+          await settle()
+          const r = runCheck(String(kind || 'web'))
+          return { issues: r.issues.map(({ el, ...rest }) => rest), metrics: r.metrics }
+        },
+        dark: (on) => { const has = hasDark(); if (has) setDark(!!on); return has },
+        settle: () => settle().then(() => true),
+        /** 跳到别的屏的地方（路径和按钮上的字），量完查一下目标在不在 */
+        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 }
+        },
+        /** 'end'：所有能滚的地方都滚到底；数字 i：主要的那块滚到第 i 屏（相邻两屏留出顶栏、底栏的高度，栏后面的内容下一屏能看到） */
+        // 滚完等页面跟上再截图
+        scroll: (where) => {
+          const after = afterScroll
+          if (where === 'end') { scrollAll(scrollAreas(), true); return after({ i: 0, of: 1 }) }
+          const el = mainArea()
+          const view = el === se() ? innerHeight : el.clientHeight
+          const bars = [...barsAt('top'), ...barsAt('bottom')].reduce((m, b) => m + b.r.height, 0)
+          const step = Math.max(Math.round(view * 0.5), Math.round(view - bars - 16))
+          const max = Math.max(0, el.scrollHeight - view)
+          const of = 1 + Math.ceil(max / step)
+          const y = Math.min(max, Math.max(0, Number(where) || 0) * step)
+          if (el === se()) scrollTo({ left: 0, top: y, behavior: 'instant' })
+          else el.scrollTo({ left: 0, top: y, behavior: 'instant' })
+          return after({ i: Number(where) || 0, of, y })
+        },
+        /** 一个元素的样式信息（和调样式选中它时报给右侧栏的一样：现在的值、用了哪些设计变量、各由哪条规则决定） */
+        style: (sel) => {
+          let el = null
+          try { el = document.querySelector(sel) } catch { el = null }
+          return el ? styleInfo(el) : null
+        },
+        /** 一个元素的某一项样式由哪条规则决定（体检找文件和行号用）：{ sel, href, n, maybe? } / { inline: true } / null */
+        ruleOf: (sel, prop) => {
+          let el = null
+          try { el = document.querySelector(sel) } catch { el = null }
+          return el ? rulesOf(el, [String(prop)])[String(prop)] || null : null
+        },
+        /** 体检的问题附图：{ sel, other?, edge?, hscroll?, also? } → 摆好、画红框，给裁剪范围 { x, y, w, h, inside }（整页坐标） */
+        crop: (o) => cropAt(o || {}),
+        /** 一个元素的位置（先滚到能看见；按整页坐标给，截图裁剪就是按整页坐标裁的） */
+        rect: (sel) => {
+          let el = null
+          try { el = document.querySelector(sel) } catch { el = null }
+          if (!el) return null
+          try { el.scrollIntoView({ block: 'center', behavior: 'instant' }) } catch { el.scrollIntoView() }
+          const r = el.getBoundingClientRect()
+          // 视口的范围也给：裁剪别伸出视口（外面截出来是空白）
+          return { x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height, vx: scrollX, vy: scrollY, vw: innerWidth, vh: innerHeight }
+        },
+      }),
+    })
+  } catch { /* 页面自己占了这个名字 */ }
+
   function selfReload() {
     try { sessionStorage.setItem(SEED_KEY, JSON.stringify({ ...seedNow(), at: Date.now() })) } catch { /* 隐私模式 / 太大 */ }
     location.reload()
@@ -1346,7 +2439,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   function onLoad() {
     if (parentWin) {
-      post({ type: 'hello', href: location.href })
+      post({ type: 'hello', href: here() })
       setTimeout(() => boot(null), 1500) // 右侧栏没回话（老版本 / 不在 DSH 里）也照常就绪
       return
     }
@@ -1370,7 +2463,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   /** 这一页在目录里的相对路径（/ 结尾的当 index.html） */
   function selfRel() {
     let p = ''
-    try { p = decodeURIComponent(location.pathname) } catch { p = location.pathname }
+    const pn = hereUrl().pathname
+    try { p = decodeURIComponent(pn) } catch { p = pn }
     p = p.replace(/^\/+/, '')
     if (!p || p.endsWith('/')) p += 'index.html'
     return p