@xingular/harness 1.1.1 → 1.2.0

package/dist/sdk/annotations/pageScript.js

@@ -49,6 +49,189 @@ export const PAGE_SCRIPT = String.raw `(() => {
           }
           return document.body
         }
+        // ---- The composed tree: open shadow roots and slotted content, in rendered order. Targets
+        // captured with it carry tree:'composed'; older targets keep the document-only rules above
+        // and below, so a saved note never changes what it points at. Closed shadow roots stay
+        // invisible to script, and frames are never entered.
+        const refusedContent = 'input,textarea,select,option,iframe,object,embed,[contenteditable],[role="textbox"],[data-sensitive],[data-private],[autocomplete*="password"],[autocomplete*="cc-"],[autocomplete*="one-time-code"]'
+        const tooLarge = () => new Error('This page is too large to anchor safely. Use a page note instead.')
+        const composedParent = node => node.assignedSlot ?? node.parentElement ?? (node.parentNode instanceof ShadowRoot ? node.parentNode.host : null)
+        const flatChildren = node => {
+          if (node instanceof Element && node.shadowRoot) return Array.from(node.shadowRoot.childNodes)
+          if (node instanceof HTMLSlotElement) {
+            const assigned = node.assignedNodes()
+            return assigned.length ? assigned : Array.from(node.childNodes)
+          }
+          return Array.from(node.childNodes)
+        }
+        const shown = element => {
+          if (overlays.has(element) || element.matches(excluded)) return false
+          const style = getComputedStyle(element)
+          if (style.display === 'none' || style.visibility === 'hidden' || style.visibility === 'collapse' || Number(style.opacity) === 0) return false
+          return style.display === 'contents' || element.getClientRects().length > 0
+        }
+        const allowedComposed = element => {
+          if (!(element instanceof Element) || !element.isConnected || !element.getClientRects().length) return false
+          for (let current = element; current; current = composedParent(current)) if (!shown(current)) return false
+          return true
+        }
+        const rootsOf = node => {
+          const roots = []
+          for (let root = node?.getRootNode?.(); root instanceof ShadowRoot; root = root.host.getRootNode()) roots.push(root)
+          return roots
+        }
+        const openRoots = () => {
+          const roots = []
+          const pending = [document]
+          let seen = 0
+          while (pending.length) {
+            for (const element of pending.pop().querySelectorAll('*')) {
+              if (++seen > 50000) throw tooLarge()
+              if (element.shadowRoot) { roots.push(element.shadowRoot); pending.push(element.shadowRoot) }
+            }
+          }
+          return roots
+        }
+        const byTagComposed = tag => {
+          const found = []
+          const pending = [document]
+          let seen = 0
+          while (pending.length) {
+            for (const element of pending.pop().querySelectorAll('*')) {
+              if (++seen > 50000) throw tooLarge()
+              if (element.localName === tag) found.push(element)
+              if (element.shadowRoot) pending.push(element.shadowRoot)
+            }
+          }
+          return found
+        }
+        const blockComposed = node => {
+          let element = composedParent(node)
+          while (element && element !== document.body) {
+            if (!['inline', 'contents', 'inline-block'].includes(getComputedStyle(element).display)) return element
+            element = composedParent(element)
+          }
+          return document.body
+        }
+        // The same normalized stream as below, walked over the composed tree. It also records where
+        // it passed visible fields or private content, so a selection across one is refused, and
+        // where each node starts and ends, so selection boundaries in any tree map to positions.
+        const streamComposed = (root = document.body) => {
+          const chars = []
+          const map = []
+          const refused = []
+          const spans = new Map()
+          if (!root) return { chars, map, refused, spans }
+          let texts = 0
+          let elements = 0
+          let previousBlock
+          const append = (char, start, end) => {
+            if (/\s/u.test(char)) {
+              if (!chars.length) return false
+              if (chars.at(-1) === ' ') { map.at(-1).end = end; return false }
+              char = ' '
+            }
+            chars.push(char)
+            map.push({ start, end })
+            return true
+          }
+          const closing = Symbol('end of node')
+          const stack = [root]
+          while (stack.length) {
+            const node = stack.pop()
+            if (node[closing]) { node[closing].end = chars.length; continue }
+            if (node.nodeType === Node.TEXT_NODE) {
+              if (++texts > 20000 || chars.length + node.data.length > 250000) throw tooLarge()
+              // A component with a closed shadow root shows only the light text it slots; the rest is not rendered.
+              const holder = node.parentElement
+              if (holder && holder.localName.includes('-') && !holder.shadowRoot) {
+                const probe = document.createRange()
+                probe.selectNodeContents(node)
+                if (!probe.getClientRects().length) continue
+              }
+              const currentBlock = blockComposed(node)
+              if (previousBlock && currentBlock !== previousBlock && chars.length) append(' ', map.at(-1).end, [node, 0])
+              previousBlock = currentBlock
+              const span = { at: chars.length, starts: [], end: chars.length }
+              let offset = 0
+              for (const char of node.data) {
+                if (append(char, [node, offset], [node, offset + char.length])) span.starts.push(offset)
+                offset += char.length
+              }
+              span.end = chars.length
+              spans.set(node, span)
+              continue
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) continue
+            if (++elements > 50000) throw tooLarge()
+            if (node !== root && !shown(node)) {
+              if (node.matches(refusedContent) && node.getClientRects().length > 0) refused.push(chars.length)
+              continue
+            }
+            const span = { at: chars.length, starts: [], end: chars.length }
+            spans.set(node, span)
+            stack.push({ [closing]: span })
+            const children = flatChildren(node)
+            for (let index = children.length - 1; index >= 0; index--) stack.push(children[index])
+          }
+          if (chars.at(-1) === ' ') { chars.pop(); map.pop() }
+          return { chars, map, refused, spans }
+        }
+        // A boundary point (in any tree) as a stream position: the first character at or after it.
+        const positionAt = (data, container, offset) => {
+          if (container.nodeType === Node.TEXT_NODE) {
+            const span = data.spans.get(container)
+            return span ? span.at + span.starts.filter(start => start < offset).length : null
+          }
+          const children = container.childNodes
+          for (let index = offset; index < children.length; index++) {
+            const span = data.spans.get(children[index])
+            if (span) return span.at
+          }
+          const own = data.spans.get(container instanceof ShadowRoot ? container.host : container)
+          return own ? own.end : null
+        }
+        const textComposed = element => streamComposed(element).chars.join('')
+        // One Range per text node: a Range cannot span shadow trees.
+        const segmentsFor = (data, start, end) => {
+          const segments = []
+          let run = null
+          for (let index = start; index < end; index++) {
+            const entry = data.map[index]
+            if (entry.start[0] !== entry.end[0]) { run = null; continue }
+            if (run && run.node === entry.start[0]) { run.range.setEnd(...entry.end); continue }
+            const range = document.createRange()
+            range.setStart(...entry.start)
+            range.setEnd(...entry.end)
+            run = { node: entry.start[0], range }
+            segments.push(range)
+          }
+          return segments
+        }
+        const composedSelectionTarget = () => {
+          const selection = getSelection()
+          // rangeCount, isCollapsed and getRangeAt see a selection in a shadow root only from the document:
+          // WebKit reports no range at all for one that crosses into a component.
+          if (!selection || typeof selection.getComposedRanges !== 'function') return null
+          const roots = openRoots()
+          let ranges
+          try { ranges = selection.getComposedRanges({ shadowRoots: roots }) } catch { ranges = selection.getComposedRanges(...roots) }
+          const range = ranges?.[0]
+          if (!range || range.collapsed) return null
+          const data = streamComposed()
+          let start = positionAt(data, range.startContainer, range.startOffset)
+          let end = positionAt(data, range.endContainer, range.endOffset)
+          if (start === null || end === null) return null
+          while (data.chars[start] === ' ') start++
+          while (end > start && data.chars[end - 1] === ' ') end--
+          if (end <= start || end - start > 4000) return null
+          // Refuse ranges crossing fields or private content rather than silently capturing partial secrets.
+          if (data.refused.some(position => position > start && position < end)) return null
+          return {
+            target: { kind: 'text', exact: data.chars.slice(start, end).join(''), prefix: data.chars.slice(Math.max(0, start - 128), start).join(''), suffix: data.chars.slice(end, end + 128).join(''), start, end, tree: 'composed' },
+            segments: segmentsFor(data, start, end)
+          }
+        }
         // Positions are normalized Unicode code points. Mapping offsets remain DOM UTF-16.
         const stream = (root = document.body) => {
           const chars = []
@@ -86,22 +269,58 @@ export const PAGE_SCRIPT = String.raw `(() => {
         }
         const text = element => stream(element).chars.join('')
         const role = element => norm(element.getAttribute('role')) || ({ BUTTON: 'button', A: element.hasAttribute('href') ? 'link' : '', IMG: 'img', SUMMARY: 'button' }[element.tagName] ?? '')
-        const name = element => {
+        // composed: read the composed tree (open shadow roots), where ids are scoped to their root.
+        const name = (element, composed = false) => {
+          const scope = composed ? element.getRootNode() : document
           const labelled = norm(element.getAttribute('aria-labelledby')).split(' ').filter(Boolean).map(id => {
-            const label = document.getElementById(id)
-            return allowed(label) ? text(label) : ''
+            const label = scope.getElementById?.(id) ?? null
+            return composed ? (allowedComposed(label) ? textComposed(label) : '') : (allowed(label) ? text(label) : '')
           }).join(' ')
-          return bounded(labelled || element.getAttribute('aria-label') || (element.tagName === 'IMG' ? element.getAttribute('alt') : '') || text(element), 200)
+          return bounded(labelled || element.getAttribute('aria-label') || (element.tagName === 'IMG' ? element.getAttribute('alt') : '') || (composed ? textComposed(element) : text(element)), 200)
+        }
+        const specificSelector = (selector, tag) => selector.trim().toLowerCase() !== tag.toLowerCase() && ['#', '.', '[', ':', '>', '+', '~'].some(marker => selector.includes(marker))
+        const selectorPart = element => {
+          const tag = element.localName
+          const classes = Array.from(element.classList).slice(0, 3).map(name => '.' + CSS.escape(name)).join('')
+          const testId = element.getAttribute('data-testid')
+          const identity = element.id ? '#' + CSS.escape(element.id) : tag + (testId ? '[data-testid="' + CSS.escape(testId) + '"]' : '')
+          return identity + classes
+        }
+        const selectorFor = (element, semantic) => {
+          const root = element.getRootNode()
+          const unique = selector => {
+            try {
+              const matches = root.querySelectorAll(selector)
+              return matches.length === 1 && matches[0] === element
+            } catch { return false }
+          }
+          const direct = selectorPart(element)
+          if (cp(direct).length <= 500 && unique(direct) && (semantic || specificSelector(direct, element.localName))) return direct
+          const path = []
+          for (let current = element; current instanceof Element && current.getRootNode() === root; current = current.parentElement) {
+            let part = selectorPart(current)
+            const siblings = current.parentElement ? Array.from(current.parentElement.children) : Array.from(root.children ?? [])
+            const sameTag = siblings.filter(sibling => sibling.localName === current.localName)
+            const index = sameTag.indexOf(current)
+            if (!specificSelector(part, current.localName) || sameTag.length > 1) part += ':nth-of-type(' + (index + 1) + ')'
+            path.unshift(part)
+            const candidate = path.join(' > ')
+            if (cp(candidate).length <= 500 && specificSelector(candidate, element.localName) && unique(candidate)) return candidate
+          }
+          const candidate = path.join(' > ')
+          return cp(candidate).length <= 500 ? candidate : cp(direct).length <= 500 ? direct : element.localName
         }
-        const describe = element => {
-          let selector = element.tagName.toLowerCase()
-          if (element.id) selector = '#' + CSS.escape(element.id)
-          else if (element.getAttribute('data-testid')) selector = '[data-testid="' + CSS.escape(element.getAttribute('data-testid')) + '"]'
+        const describe = (element, composed = false) => {
+          const elementName = name(element, composed)
+          const elementText = bounded(composed ? textComposed(element) : text(element), 500)
+          // At the top of a shadow root the context is the component that holds it.
+          const parent = composed ? element.parentElement ?? (element.parentNode instanceof ShadowRoot ? element.parentNode.host : null) : element.parentElement
+          const context = composed ? (allowedComposed(parent) ? textComposed(parent) : '') : (allowed(parent) ? text(parent) : '')
           return {
-            kind: 'element', tag: element.tagName.toLowerCase(), role: bounded(role(element), 80),
-            name: name(element), text: bounded(text(element), 500),
-            context: bounded(allowed(element.parentElement) ? text(element.parentElement) : '', 200),
-            selector: cp(selector).length <= 500 ? selector : element.tagName.toLowerCase()
+            kind: 'element', tag: element.localName, role: bounded(role(element), 80),
+            name: elementName, text: elementText, context: bounded(context, 200),
+            selector: selectorFor(element, Boolean(elementName || elementText)),
+            ...(composed ? { tree: 'composed' } : {})
           }
         }
         const rangeFor = (data, start, end) => {
@@ -138,11 +357,13 @@ export const PAGE_SCRIPT = String.raw `(() => {
         const resolve = target => {
           if (!target || typeof target !== 'object') throw new Error('Invalid target')
           if (target.kind === 'page') return { state: 'matched' }
+          if ('tree' in target && target.tree !== 'composed') throw new Error('Invalid target tree')
+          const composed = target.tree === 'composed'
           if (target.kind === 'text') {
             if (!validString(target.exact, 4000) || !target.exact || norm(target.exact) !== target.exact ||
                 !validString(target.prefix, 128) || !validString(target.suffix, 128) ||
                 !Number.isSafeInteger(target.start) || !Number.isSafeInteger(target.end) || target.start < 0 || target.end <= target.start) throw new Error('Invalid text target')
-            const data = stream()
+            const data = composed ? streamComposed() : stream()
             const quote = cp(target.exact)
             const prefix = cp(target.prefix)
             const suffix = cp(target.suffix)
@@ -163,26 +384,72 @@ export const PAGE_SCRIPT = String.raw `(() => {
               if (matches.length > 1) return { state: 'ambiguous', reason: 'Quote and context match more than once' }
             }
             if (!matches.length) return { state: 'unresolved', reason: 'Quote or context changed or is unavailable' }
-            return { state: 'matched', range: rangeFor(data, ...matches[0]) }
+            if (!composed) return { state: 'matched', range: rangeFor(data, ...matches[0]) }
+            const segments = segmentsFor(data, ...matches[0])
+            return segments.length ? { state: 'matched', segments } : { state: 'unresolved', reason: 'Quote or context changed or is unavailable' }
           }
           if (target.kind === 'element') {
             if (!validString(target.tag, 100) || !/^[a-z][a-z0-9-]*$/.test(target.tag) ||
                 !validString(target.role, 200) || !validString(target.name, 200) || !validString(target.text, 500) ||
                 !validString(target.context, 200) || !validString(target.selector, 500)) throw new Error('Invalid element target')
-            if (!target.name && !target.text) return { state: 'unresolved', reason: 'No semantic evidence' }
-            const elements = document.getElementsByTagName(target.tag)
+            const semantic = Boolean(target.name.trim() || target.text.trim())
+            const elements = composed ? byTagComposed(target.tag) : document.getElementsByTagName(target.tag)
             if (elements.length > 2000) return { state: 'unresolved', reason: 'Too many element candidates to resolve safely' }
-            let candidates = Array.from(elements).filter(allowed).filter(element => {
-              const candidate = describe(element)
+            if (specificSelector(target.selector, target.tag)) {
+              let anchored = []
+              try {
+                anchored = Array.from(elements).filter(composed ? allowedComposed : allowed).filter(element => element.matches(target.selector)).filter(element => {
+                  const candidate = describe(element, composed)
+                  return candidate.role === target.role && candidate.name === target.name && candidate.text === target.text && (!target.context || candidate.context === target.context)
+                })
+              } catch { anchored = [] }
+              if (anchored.length === 1) return { state: 'matched', element: anchored[0] }
+              if (anchored.length > 1 && !semantic) return { state: 'ambiguous', reason: 'The CSS selector matches more than one element' }
+            }
+            if (!semantic) return { state: 'unresolved', reason: 'No semantic evidence or unique CSS selector' }
+            let candidates = Array.from(elements).filter(composed ? allowedComposed : allowed).filter(element => {
+              const candidate = describe(element, composed)
               return candidate.role === target.role && candidate.name === target.name && candidate.text === target.text
             })
-            if (candidates.length > 1 && target.context) candidates = candidates.filter(element => describe(element).context === target.context)
+            if (candidates.length > 1 && target.context) candidates = candidates.filter(element => describe(element, composed).context === target.context)
             if (candidates.length > 1) return { state: 'ambiguous', reason: 'Element semantics are duplicated' }
             if (!candidates.length) return { state: 'unresolved', reason: 'Element semantics changed or are unavailable' }
             return { state: 'matched', element: candidates[0] }
           }
           throw new Error('Unknown target kind')
         }
+        // What a pointer event points at: the nearest annotatable element on its composed path, or
+        // why there is none. Icons and other decorative parts give way to the control around them.
+        const pick = event => {
+          for (const node of event.composedPath()) {
+            if (node === document.body || node === document.documentElement || node === document || node === window) break
+            if (!(node instanceof Element)) continue
+            if (node.matches('iframe,object,embed')) return { element: null, refusal: 'Embedded frames can\u2019t be annotated.' }
+            if (node.matches(refusedContent)) return { element: null, refusal: 'Form fields and private content can\u2019t be annotated.' }
+            if (!allowedComposed(node)) continue
+            // A component that shows nothing script can read (a closed shadow root) gives nothing to anchor to.
+            if (node.localName.includes('-') && !node.shadowRoot && !norm(node.getAttribute('aria-label')) && !textComposed(node)) {
+              return { element: null, refusal: 'This component\u2019s contents are private and can\u2019t be annotated.' }
+            }
+            return { element: node, refusal: null }
+          }
+          return { element: null, refusal: null }
+        }
+        // The current selection as a target: through the composed tree when the browser can say
+        // where a selection inside a shadow root is, else by the document-only rules.
+        const currentSelection = () => {
+          if (typeof getSelection()?.getComposedRanges === 'function') return composedSelectionTarget()
+          const target = selectionTarget()
+          return target ? { target, range: getSelection().getRangeAt(0).cloneRange() } : null
+        }
+        const unionRect = rects => {
+          const list = rects.filter(rect => rect.width || rect.height)
+          if (!list.length) return new DOMRect(0, 0, 0, 0)
+          const left = Math.min(...list.map(rect => rect.left))
+          const top = Math.min(...list.map(rect => rect.top))
+          return new DOMRect(left, top, Math.max(...list.map(rect => rect.right)) - left, Math.max(...list.map(rect => rect.bottom)) - top)
+        }
+        const segmentRects = segments => segments.flatMap(range => Array.from(range.getClientRects()))
         const listen = (node, type, handler, options = true) => {
           node.addEventListener(type, handler, options)
           listeners.push(() => node.removeEventListener(type, handler, options))
@@ -206,14 +473,14 @@ export const PAGE_SCRIPT = String.raw `(() => {
           const match = resolve(mark)
           overlay?.remove()
           overlay = null
-          if (match.state !== 'matched' || (!match.range && !match.element)) return
-          const rects = match.range ? Array.from(match.range.getClientRects()) : [match.element.getBoundingClientRect()]
-          // Clip marks to nested scrollports, not just the top-level viewport.
-          const anchor = match.element ?? match.range.commonAncestorContainer
-          let ancestor = anchor.nodeType === Node.ELEMENT_NODE ? anchor : anchor.parentElement
+          if (match.state !== 'matched' || (!match.range && !match.element && !match.segments?.length)) return
+          const rects = match.range ? Array.from(match.range.getClientRects()) : match.segments ? segmentRects(match.segments) : [match.element.getBoundingClientRect()]
+          // Clip marks to nested scrollports, not just the top-level viewport, including those inside components.
+          const anchor = match.element ?? match.range?.commonAncestorContainer ?? match.segments[0].startContainer
+          let ancestor = anchor.nodeType === Node.ELEMENT_NODE ? anchor : composedParent(anchor)
           let clip = { left: 0, top: 0, right: innerWidth, bottom: innerHeight }
-          if (match.element) ancestor = ancestor.parentElement
-          for (; ancestor; ancestor = ancestor.parentElement) {
+          if (match.element) ancestor = composedParent(ancestor)
+          for (; ancestor; ancestor = composedParent(ancestor)) {
             const style = getComputedStyle(ancestor)
             const rect = ancestor.getBoundingClientRect()
             if (/(auto|scroll|hidden|clip)/.test(style.overflowX)) {
@@ -254,6 +521,7 @@ export const PAGE_SCRIPT = String.raw `(() => {
           '.box.frozen{border-color:#f97316;background:rgba(249,115,22,.12)}' +
           '.chip{position:fixed;display:none;padding:2px 6px;border-radius:4px;background:#1e293b;color:#f8fafc;font-size:11px;white-space:nowrap;max-width:360px;overflow:hidden;text-overflow:ellipsis}' +
           '.chip b{font-weight:600;color:#93c5fd}' +
+          '.chip.refused{background:#334155;color:#e2e8f0;font-style:italic}' +
           '.pop{position:fixed;display:none;width:320px;box-sizing:border-box;padding:10px;border-radius:8px;pointer-events:auto;background:Canvas;color:CanvasText;border:1px solid rgba(127,127,127,.35);box-shadow:0 8px 28px rgba(0,0,0,.28)}' +
           '.what{font-size:11px;opacity:.7;margin:0 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}' +
           'textarea{all:unset;display:block;box-sizing:border-box;width:100%;min-height:68px;max-height:200px;padding:6px 8px;border-radius:6px;border:1px solid rgba(127,127,127,.45);font:inherit;font-size:13px;white-space:pre-wrap;overflow:auto;background:Field;color:FieldText}' +
@@ -298,17 +566,37 @@ export const PAGE_SCRIPT = String.raw `(() => {
             '<div class="row"><button data-action="save">Create annotation</button><button data-action="queue">Ask agent to fix</button><button class="primary" data-action="send">Proceed now</button></div>' +
             '<div class="hint">Esc to cancel · ⌘↵ proceed now</div></div><div class="toast" role="status"></div></div>'
           const $ = selector => shadow.querySelector(selector)
-          const state = { captureId, host, shadow, listeners: [], hovered: null, frozen: null, frame: 0, results: [], box: $('.box'), chip: $('.chip'), pop: $('.pop'), what: $('.what'), input: $('textarea'), toast: $('.toast'), toastTimer: 0 }
+          const state = { captureId, host, shadow, listeners: [], hovered: null, refusal: null, pointer: null, frozen: null, frame: 0, results: [], box: $('.box'), chip: $('.chip'), pop: $('.pop'), what: $('.what'), input: $('textarea'), toast: $('.toast'), toastTimer: 0 }
           inspect = state
           const on = (node, type, handler, options = true) => {
             node.addEventListener(type, handler, options)
             state.listeners.push(() => node.removeEventListener(type, handler, options))
           }
-          const rectOf = picked => picked.range ? picked.range.getBoundingClientRect() : picked.element.getBoundingClientRect()
+          const rectOf = picked => picked.range ? picked.range.getBoundingClientRect() : picked.segments ? unionRect(segmentRects(picked.segments)) : picked.element.getBoundingClientRect()
+          // Scrolls inside a component do not reach the window, so listen on each shadow root met.
+          const watched = new WeakSet()
+          const watch = node => {
+            for (const root of rootsOf(node)) {
+              if (watched.has(root)) continue
+              watched.add(root)
+              on(root, 'scroll', () => repaint(), { capture: true, passive: true })
+            }
+          }
           const paint = () => {
             state.frame = 0
             const current = state.frozen ?? (state.hovered ? { element: state.hovered } : null)
-            if (!current || (current.element && !current.element.isConnected)) {
+            state.chip.classList.remove('refused')
+            if (!current && state.refusal && state.pointer) {
+              // Say why nothing is outlined instead of staying silent.
+              state.box.style.display = 'none'
+              state.chip.textContent = state.refusal
+              state.chip.classList.add('refused')
+              state.chip.style.display = 'block'
+              place(state.chip, { left: state.pointer.x + 12, top: state.pointer.y + 14, bottom: state.pointer.y + 14 }, Math.min(360, state.chip.offsetWidth || 240), 20, 0)
+              return
+            }
+            const detached = current && (current.element ? !current.element.isConnected : current.segments ? !current.segments[0]?.startContainer.isConnected : false)
+            if (!current || detached) {
               state.box.style.display = state.chip.style.display = 'none'
               return
             }
@@ -338,6 +626,8 @@ export const PAGE_SCRIPT = String.raw `(() => {
           }
           const openPopover = picked => {
             state.frozen = picked
+            state.refusal = null
+            watch(picked.element ?? picked.segments?.[0]?.startContainer ?? picked.range?.startContainer)
             const target = picked.target
             state.what.textContent = target.kind === 'text' ? '“' + bounded(target.exact, 80) + '”' : '<' + target.tag + '> ' + (target.name || target.text || target.selector)
             state.pop.style.display = 'block'
@@ -368,12 +658,16 @@ export const PAGE_SCRIPT = String.raw `(() => {
             if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) { event.preventDefault(); submit(event.shiftKey ? 'queue' : 'send') }
           }, false)
           const inPopover = event => event.composedPath().includes(host)
-          const pickable = element => element instanceof Element && allowed(element) && !element.tagName.includes('-')
           on(window, 'pointermove', event => {
             if (state.frozen || inPopover(event)) return
-            const element = event.composedPath()[0]
-            const next = pickable(element) ? element : null
-            if (next !== state.hovered) { state.hovered = next; repaint() }
+            const found = pick(event)
+            state.pointer = { x: event.clientX, y: event.clientY }
+            if (found.element) watch(found.element)
+            if (found.element !== state.hovered || found.refusal !== state.refusal || found.refusal) {
+              state.hovered = found.element
+              state.refusal = found.refusal
+              repaint()
+            }
           }, { capture: true, passive: true })
           let down = null
           // The page never sees presses on what is being inspected; the browser may still select text.
@@ -381,7 +675,7 @@ export const PAGE_SCRIPT = String.raw `(() => {
             on(window, type, event => {
               if (!event.isTrusted || inPopover(event)) return
               event.stopImmediatePropagation()
-              if (event.type === 'pointerdown' && event.button === 0) down = { x: event.clientX, y: event.clientY, element: event.composedPath()[0] }
+              if (event.type === 'pointerdown' && event.button === 0) down = { x: event.clientX, y: event.clientY, element: pick(event).element }
             }, { capture: true, passive: false })
           }
           for (const type of ['pointerup', 'mouseup', 'click', 'dblclick', 'auxclick', 'contextmenu', 'submit']) {
@@ -396,16 +690,18 @@ export const PAGE_SCRIPT = String.raw `(() => {
                 // A drag selects text; the popover opens on the selection.
                 if (!moved) return
                 down = null
-                let target = null
-                try { target = selectionTarget() } catch { target = null }
-                if (target) openPopover({ target, range: getSelection().getRangeAt(0).cloneRange() })
+                let selected = null
+                try { selected = currentSelection() } catch { selected = null }
+                if (selected) openPopover(selected)
+                else if (!getSelection()?.isCollapsed) showToast('This selection can\u2019t be annotated: it is too long or crosses a form field or private content.')
                 return
               }
               if (event.type !== 'click' || moved) return
               down = null
-              const element = event.composedPath()[0]
-              if (element !== start.element || !pickable(element)) return
-              openPopover({ target: describe(element), element })
+              const found = pick(event)
+              if (found.refusal) { showToast(found.refusal); return }
+              if (!found.element || found.element !== start.element) return
+              openPopover({ target: describe(found.element, true), element: found.element })
             }, { capture: true, passive: false })
           }
           on(window, 'keydown', event => {
@@ -455,22 +751,22 @@ export const PAGE_SCRIPT = String.raw `(() => {
               })
               if (pending.kind === 'text') {
                 listen(document, 'selectionchange', () => {
-                  try { const target = selectionTarget(); if (target) picked = envelope(target) } catch { picked = null }
+                  // A selection that grows over something refused must not leave the last acceptable one behind.
+                  try { const selected = currentSelection(); picked = selected ? envelope(selected.target) : null } catch { picked = null }
                 })
               }
               if (pending.kind === 'element') {
                 let chosen = null
                 const choose = event => {
                   if (!event.isTrusted || event.button !== 0 || !pending || pending.kind !== 'element') return
-                  // Never traverse frames/shadow roots, including retargeted closed shadow events.
-                  const element = event.target
-                  if (!(element instanceof Element) || !allowed(element) || event.composedPath()[0] !== element) return
-                  if (element.tagName.includes('-')) return
+                  // Open shadow roots are followed; frames and closed shadow roots never are.
+                  const element = pick(event).element
+                  if (!element) return
                   event.preventDefault()
                   event.stopImmediatePropagation()
                   if (event.type === 'pointerdown') chosen = element
                   if (event.type === 'click' && chosen === element) {
-                    picked = envelope(describe(element))
+                    picked = envelope(describe(element, true))
                     // Keep suppression through this click; capture/cancel removes the listeners.
                   }
                 }
@@ -480,7 +776,7 @@ export const PAGE_SCRIPT = String.raw `(() => {
             }
             case 'capture': {
               if (!pending || operation.captureId !== pending.captureId) return null
-              const result = picked ?? (pending.kind === 'text' ? selectionTarget() : null)
+              const result = picked ?? (pending.kind === 'text' ? currentSelection()?.target ?? null : null)
               if (!result) return null
               const captured = picked ?? envelope(result)
               clear()
@@ -512,11 +808,15 @@ export const PAGE_SCRIPT = String.raw `(() => {
                 pending = null
                 picked = null
                 if (match.state === 'matched' && operation.target.kind !== 'page') {
-                  const element = match.element ?? match.range.startContainer.parentElement
+                  const start = (match.range ?? match.segments?.[0])?.startContainer
+                  const element = match.element ?? start.parentElement ?? start.parentNode.host
                   element.scrollIntoView({ block: 'center', inline: 'nearest', behavior: 'instant' })
                   mark = operation.target
+                  const roots = rootsOf(element)
                   listen(window, 'scroll', schedule)
                   listen(window, 'resize', schedule)
+                  // Scrolls inside a component do not reach the window.
+                  for (const root of roots) listen(root, 'scroll', schedule, { capture: true, passive: true })
                   if (window.visualViewport) {
                     listen(window.visualViewport, 'scroll', schedule)
                     listen(window.visualViewport, 'resize', schedule)
@@ -535,6 +835,7 @@ export const PAGE_SCRIPT = String.raw `(() => {
                     })) schedule()
                   })
                   mutations.observe(document.documentElement, { subtree: true, childList: true, characterData: true, attributes: true })
+                  for (const root of roots) mutations.observe(root, { subtree: true, childList: true, characterData: true, attributes: true })
                 }
               }
               return { state: match.state, ...(match.reason ? { reason: match.reason } : {}) }