dsh-design-studio 0.9.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) })
     }

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "Design Studio",
-    "description": "A design workbench in the right sidebar: web, app, mini program and poster screens generate on a canvas inside device frames; click an element to have the model change it, drag sliders to tweak design tokens across every screen, compare and roll back versions, extract a brand's design system from a website, turn a design into React / Vue / HTML code and diff it pixel by pixel, export share-ready images, and scan a QR code to view it on your phone."
+    "description": "A design workbench in the right sidebar: web, app, mini program and poster screens generate on a canvas inside device frames; click an element or circle it with the brush to have the model change it, open existing HTML pages to keep working on them, drag sliders to tweak design tokens across every screen, compare and roll back versions, extract a brand's design system from a website, turn a design into React / Vue / HTML code and diff it pixel by pixel, export share-ready images, and scan a QR code to view it on your phone."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "设计工作台",
-    "description": "右侧栏的设计工作台：网页、App、小程序、海报一屏屏生成在画布上，套好外框；点一下元素就让模型改那里，拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
+    "description": "右侧栏的设计工作台：网页、App、小程序、海报一屏屏生成在画布上，套好外框；点一下元素或用画笔圈出来就让模型改那里，已有的 HTML 页面也能打开接着改；拖滑块调设计变量全屏一起变，版本能对比回退；能从网站提取品牌设计系统，也能把设计转成 React / Vue / HTML 代码并逐像素对比；一键导出好看的展示图，扫码就能在手机上看。"
   }
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"
   },
-  "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / mini program / poster screens generate on a canvas with device frames, click an element to send it to the chat, tweak design tokens with sliders, compare versions, extract a brand's design system from a site, turn a design into React / Vue / HTML code checked pixel by pixel, export share-ready images and scan to view on your phone.",
+  "description": "Design workbench in the DeepSeek Harness right sidebar: watch web / app / mini program / poster screens generate on a canvas with device frames, click an element or mark it up with a brush to send it to the chat, open existing HTML pages, tweak design tokens with sliders, compare versions, extract a brand's design system from a site, turn a design into React / Vue / HTML code checked pixel by pixel, export share-ready images and scan to view on your phone.",
   "license": "MIT",
   "repository": {
     "type": "git",