browser-debugger-cli 0.12.0 → 0.13.0

package/dist/runtime/dom/elementInfo.d.ts

@@ -3,6 +3,19 @@
  * `dom layout`, DOM context of console messages): their text as a user sees
  * it and where they live (iframes, shadow roots).
  */
+/**
+ * Whether a class name is shown in element labels: not empty and not a
+ * fragment of a declaration-like class attribute ({@link CLASS_FRAGMENT}).
+ *
+ * @param name - Class name
+ * @returns True to show it
+ */
+export declare function isLabelClass(name: string): boolean;
+/**
+ * Page-side `(node) => string[]`: the element's classes shown in labels
+ * ({@link isLabelClass}), read without array helpers a page may replace
+ */
+export declare const LABEL_CLASSES_JS: string;
 /** Length of the text `dom get` shows for an element. */
 export declare const ELEMENT_TEXT_LENGTH = 500;
 /**
@@ -14,18 +27,45 @@ export declare const ELEMENT_TEXT_LENGTH = 500;
  * text is removed once, from the end.
  */
 export declare const WITHOUT_DECORATIONS_JS = "(el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n}";
+/**
+ * Page-side check whether `innerText` misses part of what an element shows:
+ * it is a `<slot>` or hosts an open shadow root, or one of its descendants
+ * is or does. `innerText` follows neither shadow roots nor slots.
+ */
+export declare const COMPOSED_JS = "(node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n}";
+/**
+ * Page-side text of an element as the flat tree renders it, for elements
+ * `innerText` cannot read ({@link COMPOSED_JS}): a shadow host is read from
+ * its open shadow root (its own labels and fallback content; light children
+ * only where a slot shows them), and each slot is replaced by what it
+ * shows, its assigned nodes flattened through nested slots (or its fallback
+ * content when nothing is assigned). Parts without slots or shadow roots
+ * are read with `innerText`; elements that are not rendered and text under
+ * `visibility: hidden` are left out, elements that are not inline are set
+ * apart by line breaks, as is a `<br>`. Fields and editable regions inside
+ * it (inputs, textareas, selects, a contenteditable editor) are skipped, so
+ * what a user typed is never read; raw text keeps `innerText`'s collapsed
+ * whitespace. The text is cut at `limit` characters, and a
+ * part whose text alone passes the limit is read from its text nodes
+ * (`textContent`) instead of `innerText`, which would lay out all of it.
+ */
+export declare const FLAT_TEXT_JS = "(el, limit) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n}";
 /**
  * Page-side text of an element as a user sees it: `innerText` for a rendered
  * element (CSS-hidden parts left out, inline elements not split apart), none
  * for an element that is not rendered, `textContent` for SVG and other
  * elements without `innerText` and for `display: contents` wrappers (no box
  * of their own, but their children are shown), and the label of an
- * `<option>` (which its `<select>` renders). For large containers (more
- * than 2000 characters of text) only the start is read, from the text nodes
- * whose parent is rendered, so a preview never lays out a whole page's text,
- * unless `full` is set. Decorations are left out ({@link WITHOUT_DECORATIONS_JS}).
+ * `<option>` (which its `<select>` renders). A web component, a slot, and
+ * an element holding either are read through the flat tree
+ * ({@link FLAT_TEXT_JS}): the text a component renders from its shadow
+ * root, slotted content in place of its slots, blocks set apart. For large
+ * containers (more than 2000 characters of text) only the start is read,
+ * from the text nodes whose parent is rendered, so a preview never lays out
+ * a whole page's text, unless `full` is set. Decorations are left out
+ * ({@link WITHOUT_DECORATIONS_JS}).
  */
-export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  if (!rendered(el)) {\n    const boxless = el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n    return boxless ? withoutDecorations(el, full ? all : all.slice(0, 2000)) : '';\n  }\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
+export declare const ELEMENT_TEXT_JS = "(el, full) => {\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const flatText = (el, limit) => {\n  const composed = (node) => {\n  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';\n  if (composes(node)) return true;\n  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);\n  while (walker.nextNode()) if (composes(walker.currentNode)) return true;\n  return false;\n};\n  const view = el.ownerDocument.defaultView;\n  let text = '';\n  const nodesOf = (node) =>\n    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);\n  const read = (node, visible) => {\n    if (text.length >= limit) return;\n    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');\n    if (node.nodeType !== 1) return;\n    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;\n    const style = view.getComputedStyle(node);\n    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;\n    if (node.localName === 'br') text += '\\n';\n    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';\n    text += apart;\n    const own = node.textContent || '';\n    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));\n    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);\n    else text += typeof node.innerText === 'string' ? node.innerText : own;\n    text += apart;\n  };\n  const visible = view.getComputedStyle(el).visibility === 'visible';\n  nodesOf(el).forEach((child) => read(child, visible));\n  return text.slice(0, limit);\n};\n  const all = el.textContent || '';\n  if (el.tagName === 'OPTION') return el.label;\n  if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const shown = rendered(el);\n  const boxless = !shown && el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';\n  if (!shown && !boxless) return '';\n  if (composed(el)) return withoutDecorations(el, flatText(el, full ? Infinity : 2000));\n  if (boxless) return withoutDecorations(el, full ? all : all.slice(0, 2000));\n  if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);\n  const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);\n  let start = '';\n  while (start.length < 1000 && walker.nextNode()) {\n    const parent = walker.currentNode.parentElement;\n    if (!parent || rendered(parent)) start += walker.currentNode.data;\n  }\n  return withoutDecorations(el, start);\n}";
 /** Shown instead of a secret field value (the same for every length) */
 export declare const MASKED_VALUE = "\u2022\u2022\u2022\u2022";
 /**
@@ -53,26 +93,40 @@ export declare const SENSITIVE_FIELD_JS = "(el) => {\n  const autocomplete = el.
  */
 export declare const ELEMENT_STATE_JS = "(el) => {\n  const isSensitive = (el) => {\n  const autocomplete = el.getAttribute('autocomplete') || '';\n  if (/(^|\\s)(cc-[a-z-]+|one-time-code|current-password|new-password)(\\s|$)/i.test(autocomplete)) return true;\n  if (el.type === 'password' || /^password$/i.test(el.getAttribute('type') || '')) return true;\n  const names = [el.getAttribute('name'), el.id, autocomplete].join(' ');\n  if (/passw|passwd|pwd|passcode|(^|[^a-z])otp([^a-z]|$)|cvv|cvc/i.test(names)) return true;\n  try {\n    const security = el.ownerDocument.defaultView.getComputedStyle(el).getPropertyValue('-webkit-text-security');\n    return Boolean(security) && security !== 'none';\n  } catch (e) {\n    return false;\n  }\n};\n  const mask = (value) => (value ? '\u2022\u2022\u2022\u2022' : '');\n  const guarded = (state) => {\n    if (!isSensitive(el)) return state;\n    const result = { ...state, sensitive: true };\n    if ('value' in result) result.value = mask(result.value);\n    if ('selected' in result) result.selected = mask(result.selected);\n    return result;\n  };\n  switch (el.localName) {\n    case 'input':\n      if (el.type === 'hidden') return { type: 'hidden' };\n      return guarded(\n        /^(checkbox|radio)$/.test(el.type)\n          ? { type: el.type, checked: el.checked, value: el.getAttribute('value') || '' }\n          : { type: el.type, value: el.value }\n      );\n    case 'textarea':\n      return guarded({ value: el.value });\n    case 'select':\n      return guarded({ selected: Array.from(el.selectedOptions || [], (option) => option.label).join(', ') });\n    case 'button':\n      return el.form ? { type: el.type } : {};\n    default:\n      return {};\n  }\n}";
 /**
- * Page-side short description of an element: tag, id and up to two classes,
- * e.g. `button#save.primary.large`.
+ * Page-side short description of an element: tag, id and up to two classes
+ * ({@link LABEL_CLASSES_JS}), e.g. `button#save.primary.large`.
+ */
+export declare const ELEMENT_DESCRIPTION_JS: string;
+/**
+ * Page-side reason an element is disabled, or null when it is not. A native
+ * control (`button`, `input`, `select`, `textarea`, `fieldset`, `optgroup`,
+ * `option`) is disabled by its `disabled attribute` or by being `inside a
+ * disabled <fieldset>` (not in its first `<legend>`), an `<option>` by
+ * being `inside a disabled <optgroup>`; any other element
+ * (e.g. a custom element) when its `disabled` property is set (empty
+ * reason). Reads the element's own attributes rather than
+ * `matches(':disabled')`, which pages replace.
  */
-export declare const ELEMENT_DESCRIPTION_JS = "(node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '')";
+export declare const DISABLED_CAUSE_JS = "(el) => {\n  if (!/^(button|input|select|textarea|fieldset|optgroup|option)$/.test(el.localName)) return el.disabled ? '' : null;\n  if (el.hasAttribute('disabled')) return 'disabled attribute';\n  if (el.localName === 'option') {\n    const group = el.parentElement;\n    return group && group.localName === 'optgroup' && group.hasAttribute('disabled') ? 'inside a disabled <optgroup>' : null;\n  }\n  for (let node = el.parentElement; node; node = node.parentElement) {\n    if (node.localName !== 'fieldset' || !node.hasAttribute('disabled')) continue;\n    let legend = node.firstElementChild;\n    while (legend && legend.localName !== 'legend') legend = legend.nextElementSibling;\n    if (!legend || !legend.contains(el)) return 'inside a disabled <fieldset>';\n  }\n  return null;\n}";
 /**
  * Page-side position of an element among its parent's children with the
  * same short description ({@link ELEMENT_DESCRIPTION_JS}), e.g. `(2nd of 3)`;
  * empty when it is the only one.
  */
-export declare const SIBLING_POSITION_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const parent = el.parentElement;\n  if (!parent) return '';\n  const own = describe(el);\n  const same = Array.from(parent.children).filter((child) => describe(child) === own);\n  if (same.length < 2) return '';\n  const n = same.indexOf(el) + 1;\n  const teen = n % 100 >= 11 && n % 100 <= 13;\n  const suffix = teen ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' })[n % 10] || 'th';\n  return '(' + n + suffix + ' of ' + same.length + ')';\n}";
+export declare const SIBLING_POSITION_JS: string;
 /**
  * Page-side identity of an element an action hit, so the output says which
  * one it was, as one string: its short description
  * ({@link ELEMENT_DESCRIPTION_JS}) and visible text (button value for button
- * inputs, decorations left out), e.g. `button#add.btn "Add to cart"`. A
- * `<select>` is named by its label, aria-label or name, else by its selected
+ * inputs, decorations left out; read through the flat tree for web
+ * components and slots, {@link FLAT_TEXT_JS}), e.g.
+ * `button#add.btn "Add to cart"`. A `<select>` is named by its label
+ * (`aria-labelledby` or `<label>`), aria-label or name, else by its selected
  * option, e.g. `select.sort "Sort products"`. An element without visible
  * text is described by itself first: by its position among same-looking
  * siblings ({@link SIBLING_POSITION_JS}), e.g. `div.figure (2nd of 3)`, with
- * its aria-label, placeholder or title when it has one. Only an element
+ * its name when it has one: aria-label, label, placeholder, title, or the
+ * alt text of an image (in it). Only an element
  * without an id that is the only one of its kind is named by the nearest of
  * three ancestors that has text, e.g.
  * `input.toggle in div.view "Write report"` (rows of a list share their
@@ -80,18 +134,20 @@ export declare const SIBLING_POSITION_JS = "(el) => {\n  const describe = (node)
  * of `<select>`s in it (read like `innerText`: CSS-hidden text is left out of
  * a rendered ancestor; at most 500 text nodes; selects in shadow roots are
  * not looked into), and never past an editable ancestor, whose text may be
- * typed input; otherwise its aria-label, placeholder or title is used. Texts
+ * typed input; otherwise its name is used. Texts
  * are cut at 40 characters. Contenteditable elements count as controls: what
  * was typed into them is never echoed (nor their ancestors' text).
  */
-export declare const ELEMENT_IDENTITY_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const siblingPosition = (el) => {\n  const describe = (node) => node.tagName.toLowerCase() +\n  (node.id ? '#' + node.id : '') +\n  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '');\n  const parent = el.parentElement;\n  if (!parent) return '';\n  const own = describe(el);\n  const same = Array.from(parent.children).filter((child) => describe(child) === own);\n  if (same.length < 2) return '';\n  const n = same.indexOf(el) + 1;\n  const teen = n % 100 >= 11 && n % 100 <= 13;\n  const suffix = teen ? 'th' : ({ 1: 'st', 2: 'nd', 3: 'rd' })[n % 10] || 'th';\n  return '(' + n + suffix + ' of ' + same.length + ')';\n};\n  const withoutDecorations = (el, text) => {\n  if (!text || typeof el.querySelectorAll !== 'function') return text;\n  const glyph = /^\\s*[\u00D7\u2715\u2716\u2717\u2A2F]\\s*$/;\n  const textOf = (node) => (typeof node.innerText === 'string' ? node.innerText : node.textContent || '').trim();\n  const closer = '.close, [aria-label=\"close\" i], [aria-label=\"dismiss\" i]';\n  const rendered = (node) => !node.checkVisibility || node.checkVisibility();\n  const found = Array.from(el.querySelectorAll(closer + ', [aria-hidden=\"true\"]'))\n    .filter((node) => rendered(node) && (node.matches(closer) || !/[\\p{L}\\p{N}]/u.test(textOf(node))));\n  if (/[\u00D7\u2715\u2716\u2717\u2A2F]/.test(text)) {\n    found.push(...Array.from(el.querySelectorAll('button, a, [role=\"button\"]')).filter((node) => glyph.test(node.textContent || '')));\n  }\n  const unique = Array.from(new Set(found));\n  const outermost = unique.filter((node) => !unique.some((other) => other !== node && other.contains(node)));\n  let result = text;\n  for (const node of outermost) {\n    const part = textOf(node);\n    const at = part ? result.lastIndexOf(part) : -1;\n    if (at >= 0) result = result.slice(0, at) + result.slice(at + part.length);\n  }\n  return result;\n};\n  const clean = (text) => (text || '').replace(/\\s+/g, ' ').trim();\n  const cut = (text) => {\n    const characters = Array.from(text);\n    return characters.length > 40 ? characters.slice(0, 40).join('') + '\u2026' : text;\n  };\n  const isControl = (node) => /^(input|select|textarea)$/.test(node.localName) || node.isContentEditable;\n  const shownText = (node) =>\n    isControl(node) ? '' : clean(withoutDecorations(node, typeof node.innerText === 'string' ? node.innerText : node.textContent));\n  const buttonValue = (node) => (node.localName === 'input' && /^(submit|button|reset)$/i.test(node.type) ? clean(node.value) : '');\n  const attributeText = (node) =>\n    clean(node.getAttribute('aria-label')) || clean(node.getAttribute('placeholder')) || clean(node.getAttribute('title'));\n  const selectName = (node) =>\n    clean(node.labels && node.labels[0] && node.labels[0].innerText) ||\n    clean(node.getAttribute('aria-label')) ||\n    clean(node.getAttribute('name')) ||\n    clean(node.selectedOptions && node.selectedOptions[0] && node.selectedOptions[0].label);\n  const shown = (node, options) => !node.checkVisibility || node.checkVisibility(options);\n  const textOutsideSelects = (node) => {\n    if (!node.querySelector('select')) return shownText(node);\n    const hiddenLeftOut = shown(node);\n    const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_TEXT);\n    let text = '';\n    for (let visited = 0; visited < 500 && text.length < 200 && walker.nextNode(); visited++) {\n      const parent = walker.currentNode.parentElement;\n      if (!parent || parent.closest('select, textarea')) continue;\n      if (!hiddenLeftOut || shown(parent, { visibilityProperty: true })) text += ' ' + walker.currentNode.data;\n    }\n    return clean(text);\n  };\n  const quoted = (text) => (text ? ' \"' + cut(text) + '\"' : '');\n  const visible = shownText(el) || buttonValue(el) || (el.localName === 'select' ? selectName(el) : '');\n  if (visible) return describe(el) + quoted(visible);\n  const attribute = attributeText(el);\n  const position = siblingPosition(el);\n  if (position) return describe(el) + ' ' + position + quoted(attribute);\n  let ancestor = el.id || el.isContentEditable ? null : el.parentElement;\n  for (let depth = 0; ancestor && depth < 3; depth++, ancestor = ancestor.parentElement) {\n    if (isControl(ancestor)) break;\n    const text = textOutsideSelects(ancestor);\n    if (text) return describe(el) + ' in ' + describe(ancestor) + quoted(text);\n  }\n  return describe(el) + quoted(attribute);\n}";
+export declare const ELEMENT_IDENTITY_JS: string;
 /**
  * Page-side location of an element: the iframes it is in (outermost first)
- * and the shadow root holding it, with the host's first class and light-DOM
- * text, e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
- * empty for the main document.
+ * and the shadow root holding it, with the host's first class and the text
+ * a user sees of it ({@link ELEMENT_TEXT_JS}, cut at 30 characters with
+ * `…`), e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
+ * empty for the main document. Each host's text is read once per script
+ * run, as many matches share a host.
  */
-export declare const ELEMENT_CONTEXT_JS = "(el) => {\n  const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');\n  const parts = [];\n  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {\n    const frame = doc.defaultView.frameElement;\n    parts.unshift(describe(frame));\n    doc = frame.ownerDocument;\n  }\n  const root = el.getRootNode();\n  if (root.host) {\n    const host = root.host;\n    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');\n    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);\n    parts.push('shadow root of <' + label + (text ? ' \"' + text + '\"' : '') + '>');\n  }\n  return parts.join(' > ');\n}";
+export declare const ELEMENT_CONTEXT_JS: string;
 /**
  * Short text preview of an element's text: whitespace collapsed, cut on a
  * whole character (an emoji is never split, which would make JSON invalid).

package/dist/runtime/dom/elementInfo.js

@@ -3,6 +3,31 @@
  * `dom layout`, DOM context of console messages): their text as a user sees
  * it and where they live (iframes, shadow roots).
  */
+/**
+ * A class that is a fragment of a declaration-like class attribute
+ * (`class="brush: html"` has the class `brush:`), left out of labels.
+ */
+const CLASS_FRAGMENT = /[:;,]$/;
+/**
+ * Whether a class name is shown in element labels: not empty and not a
+ * fragment of a declaration-like class attribute ({@link CLASS_FRAGMENT}).
+ *
+ * @param name - Class name
+ * @returns True to show it
+ */
+export function isLabelClass(name) {
+    return name !== '' && !CLASS_FRAGMENT.test(name);
+}
+/**
+ * Page-side `(node) => string[]`: the element's classes shown in labels
+ * ({@link isLabelClass}), read without array helpers a page may replace
+ */
+export const LABEL_CLASSES_JS = `(node) => {
+  const shown = [];
+  const list = node.classList || [];
+  for (let i = 0; i < list.length; i++) if (!${CLASS_FRAGMENT}.test(list[i])) shown[shown.length] = list[i];
+  return shown;
+}`;
 /** Length of the text preview shown for elements. */
 const PREVIEW_LENGTH = 80;
 /** Length of the text `dom get` shows for an element. */
@@ -36,27 +61,88 @@ export const WITHOUT_DECORATIONS_JS = `(el, text) => {
   }
   return result;
 }`;
+/**
+ * Page-side check whether `innerText` misses part of what an element shows:
+ * it is a `<slot>` or hosts an open shadow root, or one of its descendants
+ * is or does. `innerText` follows neither shadow roots nor slots.
+ */
+export const COMPOSED_JS = `(node) => {
+  const composes = (n) => Boolean(n.shadowRoot) || n.localName === 'slot';
+  if (composes(node)) return true;
+  const walker = node.ownerDocument.createTreeWalker(node, NodeFilter.SHOW_ELEMENT);
+  while (walker.nextNode()) if (composes(walker.currentNode)) return true;
+  return false;
+}`;
+/**
+ * Page-side text of an element as the flat tree renders it, for elements
+ * `innerText` cannot read ({@link COMPOSED_JS}): a shadow host is read from
+ * its open shadow root (its own labels and fallback content; light children
+ * only where a slot shows them), and each slot is replaced by what it
+ * shows, its assigned nodes flattened through nested slots (or its fallback
+ * content when nothing is assigned). Parts without slots or shadow roots
+ * are read with `innerText`; elements that are not rendered and text under
+ * `visibility: hidden` are left out, elements that are not inline are set
+ * apart by line breaks, as is a `<br>`. Fields and editable regions inside
+ * it (inputs, textareas, selects, a contenteditable editor) are skipped, so
+ * what a user typed is never read; raw text keeps `innerText`'s collapsed
+ * whitespace. The text is cut at `limit` characters, and a
+ * part whose text alone passes the limit is read from its text nodes
+ * (`textContent`) instead of `innerText`, which would lay out all of it.
+ */
+export const FLAT_TEXT_JS = `(el, limit) => {
+  const composed = ${COMPOSED_JS};
+  const view = el.ownerDocument.defaultView;
+  let text = '';
+  const nodesOf = (node) =>
+    node.localName === 'slot' ? node.assignedNodes({ flatten: true }) : Array.from((node.shadowRoot || node).childNodes);
+  const read = (node, visible) => {
+    if (text.length >= limit) return;
+    if (node.nodeType === 3 && visible) text += node.data.replace(/\\s+/g, ' ');
+    if (node.nodeType !== 1) return;
+    if (/^(input|textarea|select)$/.test(node.localName) || node.isContentEditable) return;
+    const style = view.getComputedStyle(node);
+    if (node.checkVisibility && !node.checkVisibility() && style.display !== 'contents') return;
+    if (node.localName === 'br') text += '\\n';
+    const apart = style.display.startsWith('inline') || style.display === 'contents' ? '' : '\\n';
+    text += apart;
+    const own = node.textContent || '';
+    if (composed(node)) nodesOf(node).forEach((child) => read(child, style.visibility === 'visible'));
+    else if (own.length > limit - text.length) text += own.slice(0, limit - text.length);
+    else text += typeof node.innerText === 'string' ? node.innerText : own;
+    text += apart;
+  };
+  const visible = view.getComputedStyle(el).visibility === 'visible';
+  nodesOf(el).forEach((child) => read(child, visible));
+  return text.slice(0, limit);
+}`;
 /**
  * Page-side text of an element as a user sees it: `innerText` for a rendered
  * element (CSS-hidden parts left out, inline elements not split apart), none
  * for an element that is not rendered, `textContent` for SVG and other
  * elements without `innerText` and for `display: contents` wrappers (no box
  * of their own, but their children are shown), and the label of an
- * `<option>` (which its `<select>` renders). For large containers (more
- * than 2000 characters of text) only the start is read, from the text nodes
- * whose parent is rendered, so a preview never lays out a whole page's text,
- * unless `full` is set. Decorations are left out ({@link WITHOUT_DECORATIONS_JS}).
+ * `<option>` (which its `<select>` renders). A web component, a slot, and
+ * an element holding either are read through the flat tree
+ * ({@link FLAT_TEXT_JS}): the text a component renders from its shadow
+ * root, slotted content in place of its slots, blocks set apart. For large
+ * containers (more than 2000 characters of text) only the start is read,
+ * from the text nodes whose parent is rendered, so a preview never lays out
+ * a whole page's text, unless `full` is set. Decorations are left out
+ * ({@link WITHOUT_DECORATIONS_JS}).
  */
 export const ELEMENT_TEXT_JS = `(el, full) => {
   const withoutDecorations = ${WITHOUT_DECORATIONS_JS};
+  const composed = ${COMPOSED_JS};
+  const flatText = ${FLAT_TEXT_JS};
   const all = el.textContent || '';
   if (el.tagName === 'OPTION') return el.label;
   if (typeof el.innerText !== 'string') return full ? all : all.slice(0, 2000);
   const rendered = (node) => !node.checkVisibility || node.checkVisibility();
-  if (!rendered(el)) {
-    const boxless = el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';
-    return boxless ? withoutDecorations(el, full ? all : all.slice(0, 2000)) : '';
-  }
+  const shown = rendered(el);
+  const boxless = !shown && el.ownerDocument.defaultView.getComputedStyle(el).display === 'contents';
+  if (!shown && !boxless) return '';
+  if (composed(el)) return withoutDecorations(el, flatText(el, full ? Infinity : 2000));
+  if (boxless) return withoutDecorations(el, full ? all : all.slice(0, 2000));
   if (full || all.length <= 2000) return withoutDecorations(el, el.innerText);
   const walker = el.ownerDocument.createTreeWalker(el, NodeFilter.SHOW_TEXT);
   let start = '';
@@ -132,12 +218,38 @@ export const ELEMENT_STATE_JS = `(el) => {
   }
 }`;
 /**
- * Page-side short description of an element: tag, id and up to two classes,
- * e.g. `button#save.primary.large`.
+ * Page-side short description of an element: tag, id and up to two classes
+ * ({@link LABEL_CLASSES_JS}), e.g. `button#save.primary.large`.
  */
-export const ELEMENT_DESCRIPTION_JS = `(node) => node.tagName.toLowerCase() +
-  (node.id ? '#' + node.id : '') +
-  (node.classList && node.classList.length ? '.' + Array.from(node.classList).slice(0, 2).join('.') : '')`;
+export const ELEMENT_DESCRIPTION_JS = `(node) => {
+  const classes = (${LABEL_CLASSES_JS})(node);
+  return node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') + (classes[0] ? '.' + classes[0] : '') + (classes[1] ? '.' + classes[1] : '');
+}`;
+/**
+ * Page-side reason an element is disabled, or null when it is not. A native
+ * control (`button`, `input`, `select`, `textarea`, `fieldset`, `optgroup`,
+ * `option`) is disabled by its `disabled attribute` or by being `inside a
+ * disabled <fieldset>` (not in its first `<legend>`), an `<option>` by
+ * being `inside a disabled <optgroup>`; any other element
+ * (e.g. a custom element) when its `disabled` property is set (empty
+ * reason). Reads the element's own attributes rather than
+ * `matches(':disabled')`, which pages replace.
+ */
+export const DISABLED_CAUSE_JS = `(el) => {
+  if (!/^(button|input|select|textarea|fieldset|optgroup|option)$/.test(el.localName)) return el.disabled ? '' : null;
+  if (el.hasAttribute('disabled')) return 'disabled attribute';
+  if (el.localName === 'option') {
+    const group = el.parentElement;
+    return group && group.localName === 'optgroup' && group.hasAttribute('disabled') ? 'inside a disabled <optgroup>' : null;
+  }
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.localName !== 'fieldset' || !node.hasAttribute('disabled')) continue;
+    let legend = node.firstElementChild;
+    while (legend && legend.localName !== 'legend') legend = legend.nextElementSibling;
+    if (!legend || !legend.contains(el)) return 'inside a disabled <fieldset>';
+  }
+  return null;
+}`;
 /**
  * Page-side position of an element among its parent's children with the
  * same short description ({@link ELEMENT_DESCRIPTION_JS}), e.g. `(2nd of 3)`;
@@ -159,12 +271,15 @@ export const SIBLING_POSITION_JS = `(el) => {
  * Page-side identity of an element an action hit, so the output says which
  * one it was, as one string: its short description
  * ({@link ELEMENT_DESCRIPTION_JS}) and visible text (button value for button
- * inputs, decorations left out), e.g. `button#add.btn "Add to cart"`. A
- * `<select>` is named by its label, aria-label or name, else by its selected
+ * inputs, decorations left out; read through the flat tree for web
+ * components and slots, {@link FLAT_TEXT_JS}), e.g.
+ * `button#add.btn "Add to cart"`. A `<select>` is named by its label
+ * (`aria-labelledby` or `<label>`), aria-label or name, else by its selected
  * option, e.g. `select.sort "Sort products"`. An element without visible
  * text is described by itself first: by its position among same-looking
  * siblings ({@link SIBLING_POSITION_JS}), e.g. `div.figure (2nd of 3)`, with
- * its aria-label, placeholder or title when it has one. Only an element
+ * its name when it has one: aria-label, label, placeholder, title, or the
+ * alt text of an image (in it). Only an element
  * without an id that is the only one of its kind is named by the nearest of
  * three ancestors that has text, e.g.
  * `input.toggle in div.view "Write report"` (rows of a list share their
@@ -172,7 +287,7 @@ export const SIBLING_POSITION_JS = `(el) => {
  * of `<select>`s in it (read like `innerText`: CSS-hidden text is left out of
  * a rendered ancestor; at most 500 text nodes; selects in shadow roots are
  * not looked into), and never past an editable ancestor, whose text may be
- * typed input; otherwise its aria-label, placeholder or title is used. Texts
+ * typed input; otherwise its name is used. Texts
  * are cut at 40 characters. Contenteditable elements count as controls: what
  * was typed into them is never echoed (nor their ancestors' text).
  */
@@ -180,19 +295,36 @@ export const ELEMENT_IDENTITY_JS = `(el) => {
   const describe = ${ELEMENT_DESCRIPTION_JS};
   const siblingPosition = ${SIBLING_POSITION_JS};
   const withoutDecorations = ${WITHOUT_DECORATIONS_JS};
+  const composed = ${COMPOSED_JS};
+  const flatText = ${FLAT_TEXT_JS};
   const clean = (text) => (text || '').replace(/\\s+/g, ' ').trim();
   const cut = (text) => {
     const characters = Array.from(text);
     return characters.length > 40 ? characters.slice(0, 40).join('') + '…' : text;
   };
   const isControl = (node) => /^(input|select|textarea)$/.test(node.localName) || node.isContentEditable;
-  const shownText = (node) =>
-    isControl(node) ? '' : clean(withoutDecorations(node, typeof node.innerText === 'string' ? node.innerText : node.textContent));
+  const textOf = (node) =>
+    composed(node) ? flatText(node, 200) : typeof node.innerText === 'string' ? node.innerText : node.textContent;
+  const shownText = (node) => (isControl(node) ? '' : clean(withoutDecorations(node, textOf(node))));
   const buttonValue = (node) => (node.localName === 'input' && /^(submit|button|reset)$/i.test(node.type) ? clean(node.value) : '');
+  const labelText = (node) => {
+    const ids = (node.getAttribute('aria-labelledby') || '').split(/\\s+/).filter(Boolean);
+    const root = node.getRootNode();
+    const labels = ids.length ? ids.map((id) => root.getElementById(id)) : Array.from(node.labels || []);
+    return clean(labels.filter(Boolean).map(textOf).join(' '));
+  };
+  const imageAlt = (node) => {
+    const image = node.localName === 'img' ? node : node.querySelector('img[alt]');
+    return image ? clean(image.getAttribute('alt')) : '';
+  };
   const attributeText = (node) =>
-    clean(node.getAttribute('aria-label')) || clean(node.getAttribute('placeholder')) || clean(node.getAttribute('title'));
+    clean(node.getAttribute('aria-label')) ||
+    labelText(node) ||
+    clean(node.getAttribute('placeholder')) ||
+    clean(node.getAttribute('title')) ||
+    imageAlt(node);
   const selectName = (node) =>
-    clean(node.labels && node.labels[0] && node.labels[0].innerText) ||
+    labelText(node) ||
     clean(node.getAttribute('aria-label')) ||
     clean(node.getAttribute('name')) ||
     clean(node.selectedOptions && node.selectedOptions[0] && node.selectedOptions[0].label);
@@ -225,27 +357,42 @@ export const ELEMENT_IDENTITY_JS = `(el) => {
 }`;
 /**
  * Page-side location of an element: the iframes it is in (outermost first)
- * and the shadow root holding it, with the host's first class and light-DOM
- * text, e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
- * empty for the main document.
+ * and the shadow root holding it, with the host's first class and the text
+ * a user sees of it ({@link ELEMENT_TEXT_JS}, cut at 30 characters with
+ * `…`), e.g. `iframe#pay > shadow root of <sl-button.primary "Save">`;
+ * empty for the main document. Each host's text is read once per script
+ * run, as many matches share a host.
  */
-export const ELEMENT_CONTEXT_JS = `(el) => {
+export const ELEMENT_CONTEXT_JS = `(() => {
+  const textOf = ${ELEMENT_TEXT_JS};
+  const hostTexts = new WeakMap();
+  const hostText = (host) => {
+    if (!hostTexts.has(host)) {
+      const characters = Array.from(String(textOf(host, false)).replace(/\\s+/g, ' ').trim());
+      hostTexts.set(host, characters.length > 30 ? characters.slice(0, 30).join('') + '…' : characters.join(''));
+    }
+    return hostTexts.get(host);
+  };
   const describe = (node) => node.tagName.toLowerCase() + (node.id ? '#' + node.id : '');
-  const parts = [];
-  for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {
-    const frame = doc.defaultView.frameElement;
-    parts.unshift(describe(frame));
-    doc = frame.ownerDocument;
-  }
-  const root = el.getRootNode();
-  if (root.host) {
-    const host = root.host;
-    const label = describe(host) + (!host.id && host.classList.length ? '.' + host.classList[0] : '');
-    const text = (host.textContent || '').replace(/\\s+/g, ' ').trim().slice(0, 30);
-    parts.push('shadow root of <' + label + (text ? ' "' + text + '"' : '') + '>');
-  }
-  return parts.join(' > ');
-}`;
+  const labelClasses = ${LABEL_CLASSES_JS};
+  return (el) => {
+    const parts = [];
+    for (let doc = el.ownerDocument; doc && doc.defaultView && doc.defaultView.frameElement; ) {
+      const frame = doc.defaultView.frameElement;
+      parts.unshift(describe(frame));
+      doc = frame.ownerDocument;
+    }
+    const root = el.getRootNode();
+    if (root.host) {
+      const host = root.host;
+      const firstClass = labelClasses(host)[0];
+      const label = describe(host) + (!host.id && firstClass ? '.' + firstClass : '');
+      const text = hostText(host);
+      parts.push('shadow root of <' + label + (text ? ' "' + text + '"' : '') + '>');
+    }
+    return parts.join(' > ');
+  };
+})()`;
 /**
  * Short text preview of an element's text: whitespace collapsed, cut on a
  * whole character (an emoji is never split, which would make JSON invalid).

package/dist/runtime/dom/evalHelpers.d.ts

@@ -11,6 +11,13 @@ import { type CDPSender } from '../../telemetry/objectExpander.js';
  * @throws Error When script execution throws exception or returns invalid response
  */
 export declare function executeScript(cdp: CDPSender, script: string, options?: Omit<Protocol.Runtime.EvaluateRequest, 'expression'>): Promise<Protocol.Runtime.EvaluateResponse>;
+/**
+ * Message of an exception, including thrown non-Error values (`throw "x"`).
+ *
+ * @param details - Exception details
+ * @returns Readable message
+ */
+export declare function describeException(details: Protocol.Runtime.ExceptionDetails): string;
 /** Result of `bdg dom eval`: a JSON-safe value plus its JavaScript type. */
 export interface EvalResult {
     /** JSON value, or a readable description for values JSON cannot represent */
@@ -19,6 +26,8 @@ export interface EvalResult {
     type: string;
     /** Object subtype (`node`, `date`, `map`, `array`, ...) */
     subtype?: string;
+    /** Set when the page replaced built-ins bdg's copy of the result uses, so the browser copied it */
+    warning?: string;
 }
 /**
  * Page-side copy of an object as JSON, keeping what JSON would lose inside
@@ -28,9 +37,10 @@ export interface EvalResult {
  * `12n`, functions `function name()`, and cycles `[Circular]` (an object
  * shared by two properties is copied twice). Works for objects of iframes
  * (other realms); lists and objects are cut after 1000 entries, and a
- * throwing getter becomes `[Error: …]`.
+ * throwing getter becomes `[Error: …]`. It uses the page's built-ins
+ * ({@link COPY_BUILTINS}), so it only runs when the page left them alone.
  */
-export declare const JSON_SAFE_COPY_FUNCTION = "function () {\n  const MAX_ITEMS = 1000;\n  const ancestors = new Set();\n  const kind = (value) => Object.prototype.toString.call(value).slice(8, -1);\n  const isNode = (value) => typeof value.nodeType === 'number' && typeof value.nodeName === 'string';\n  const describeNode = (node) => {\n    if (node.nodeType !== 1) return node.nodeName.toLowerCase();\n    return node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') +\n      (node.classList && node.classList.length ? '.' + Array.from(node.classList).join('.') : '');\n  };\n  const items = (list, next) => {\n    const result = [];\n    let count = 0;\n    for (const item of list) {\n      if (count++ === MAX_ITEMS) { result.push('\u2026'); break; }\n      result.push(next(item));\n    }\n    return result;\n  };\n  const leaf = (value) => {\n    if (value === undefined) return null;\n    if (typeof value === 'number') {\n      if (Number.isNaN(value) || !Number.isFinite(value)) return String(value);\n      return Object.is(value, -0) ? '-0' : value;\n    }\n    if (typeof value === 'bigint') return value + 'n';\n    if (typeof value === 'symbol') return value.toString();\n    if (typeof value === 'function') return 'function ' + (value.name || '(anonymous)') + '()';\n    return value;\n  };\n  const copy = (value, depth) => {\n    if (value === null || typeof value !== 'object') return leaf(value);\n    if (ancestors.has(value)) return '[Circular]';\n    if (depth > 20) return '[\u2026]';\n    const next = (item) => copy(item, depth + 1);\n    const type = kind(value);\n    if (isNode(value)) return describeNode(value);\n    if (value.window === value) return 'Window';\n    if (type === 'Date') return isNaN(value) ? 'Invalid Date' : value.toISOString();\n    if (type === 'RegExp') return String(value);\n    if (type === 'Error' || value instanceof Error) return value.name + ': ' + value.message;\n    ancestors.add(value);\n    try {\n      if (type === 'Map') return items(value, ([k, v]) => [next(k), next(v)]);\n      if (type === 'Set' || type === 'NodeList' || type === 'HTMLCollection') return items(value, next);\n      if (ArrayBuffer.isView(value) && type !== 'DataView') return items(value, next);\n      if (Array.isArray(value)) return items(value, next);\n      const result = {};\n      const keys = Object.keys(value);\n      for (const key of keys.slice(0, MAX_ITEMS)) {\n        try { result[key] = next(value[key]); } catch (e) { result[key] = '[Error: ' + (e && e.message) + ']'; }\n      }\n      if (keys.length > MAX_ITEMS) result['\u2026'] = (keys.length - MAX_ITEMS) + ' more keys';\n      return result;\n    } finally {\n      ancestors.delete(value);\n    }\n  };\n  return copy(this, 0);\n}";
+export declare const JSON_SAFE_COPY_FUNCTION = "function () {\n  const MAX_ITEMS = 1000;\n  const ancestors = new Set();\n  const kind = (value) => Object.prototype.toString.call(value).slice(8, -1);\n  const isNode = (value) => typeof value.nodeType === 'number' && typeof value.nodeName === 'string';\n  const describeNode = (node) => {\n    if (node.nodeType !== 1) return node.nodeName.toLowerCase();\n    return node.tagName.toLowerCase() + (node.id ? '#' + node.id : '') +\n      (node.classList && node.classList.length ? '.' + Array.from(node.classList).join('.') : '');\n  };\n  const items = (list, next) => {\n    const result = [];\n    if (typeof list.length === 'number') {\n      for (let i = 0; i < list.length; i++) {\n        if (i === MAX_ITEMS) { result.push('\u2026'); break; }\n        result.push(next(list[i]));\n      }\n      return result;\n    }\n    let count = 0;\n    for (const item of list) {\n      if (count++ === MAX_ITEMS) { result.push('\u2026'); break; }\n      result.push(next(item));\n    }\n    return result;\n  };\n  const leaf = (value) => {\n    if (value === undefined) return null;\n    if (typeof value === 'number') {\n      if (Number.isNaN(value) || !Number.isFinite(value)) return String(value);\n      return Object.is(value, -0) ? '-0' : value;\n    }\n    if (typeof value === 'bigint') return value + 'n';\n    if (typeof value === 'symbol') return value.toString();\n    if (typeof value === 'function') return 'function ' + (value.name || '(anonymous)') + '()';\n    return value;\n  };\n  const copy = (value, depth) => {\n    if (value === null || typeof value !== 'object') return leaf(value);\n    if (ancestors.has(value)) return '[Circular]';\n    if (depth > 20) return '[\u2026]';\n    const next = (item) => copy(item, depth + 1);\n    const type = kind(value);\n    if (isNode(value)) return describeNode(value);\n    if (value.window === value) return 'Window';\n    if (type === 'Date') return isNaN(value) ? 'Invalid Date' : value.toISOString();\n    if (type === 'RegExp') return String(value);\n    if (type === 'Error' || value instanceof Error) return value.name + ': ' + value.message;\n    ancestors.add(value);\n    try {\n      if (type === 'Map') return items(value, ([k, v]) => [next(k), next(v)]);\n      if (type === 'Set' || type === 'NodeList' || type === 'HTMLCollection') return items(value, next);\n      if (ArrayBuffer.isView(value) && type !== 'DataView') return items(value, next);\n      if (Array.isArray(value)) return items(value, next);\n      const result = {};\n      const keys = Object.keys(value);\n      for (const key of keys.slice(0, MAX_ITEMS)) {\n        try { result[key] = next(value[key]); } catch (e) { result[key] = '[Error: ' + (e && e.message) + ']'; }\n      }\n      if (keys.length > MAX_ITEMS) result['\u2026'] = (keys.length - MAX_ITEMS) + ' more keys';\n      return result;\n    } finally {\n      ancestors.delete(value);\n    }\n  };\n  return copy(this, 0);\n}";
 /** What a busy target is called in messages: the page, or an iframe (`--frame`) */
 export type BusyScope = 'page' | 'frame';
 /** When {@link withBusyPageRecovery} checks the target, and what it calls it */