@piwitests/server 0.19.0 → 0.21.0

package/.output/server/chunks/build/{useCopyRich-BemRsKgv.mjs → useCopyRich-Cd5Yj_Wy.mjs}

@@ -1,22 +1,21 @@
-import { j as useToast, o as _sfc_main$p, s as __nuxt_component_12, n as _sfc_main$7$1, m as _sfc_main$k$1, r as useRuntimeConfig, v as _sfc_main$8$1, G as refreshNuxtData, H as _export_sfc, _ as _sfc_main$d$1 } from './server.mjs';
-import { _ as __nuxt_component_2$1, a as __nuxt_component_9 } from './HelpHint-DrcIv-Oj.mjs';
-import { _ as _sfc_main$n } from './Separator-CR4WcEKD.mjs';
+import { j as useToast, o as _sfc_main$p, v as __nuxt_component_12, n as _sfc_main$7$1, m as _sfc_main$k$1, r as useRuntimeConfig, w as _sfc_main$8$1, G as refreshNuxtData, H as _export_sfc, _ as _sfc_main$d$1 } from './server.mjs';
+import { _ as __nuxt_component_2$1, a as __nuxt_component_9 } from './HelpHint-DjGrGFA7.mjs';
+import { _ as _sfc_main$o } from './Separator-CR4WcEKD.mjs';
 import { ref, defineComponent, mergeProps, unref, withCtx, withDirectives, createVNode, renderSlot, vShow, withKeys, withModifiers, openBlock, createBlock, createCommentVNode, createTextVNode, toDisplayString, Fragment, computed, resolveDynamicComponent, createSlots, renderList, isRef, nextTick, useModel, watch, mergeModels, useSSRContext } from 'vue';
 import { ssrRenderAttrs, ssrRenderComponent, ssrRenderStyle, ssrRenderSlot, ssrRenderAttr, ssrInterpolate, ssrRenderVNode, ssrRenderList, ssrRenderClass, ssrRenderTeleport } from 'vue/server-renderer';
-import { u as useDesktopDownload } from './useDesktopDownload-D49JRQSw.mjs';
-import { u as useCopy } from './useCopy-CeKWgHyT.mjs';
-import { f as formatRelativeTime, m as getTraceViewerUrl, n as fileApiUrl, o as parsePatchLines, q as patchLineClass, e as errorMessage, u as getFileApiPath } from './index-CU2nZhAa.mjs';
-import { _ as _sfc_main$k } from './Alert-C4xq8lao.mjs';
-import { dF as recommendLocatorFix, cB as formatBytes } from '../nitro/nitro.mjs';
-import { _ as __nuxt_component_11 } from './SectionCard-CN-v0FZ_.mjs';
-import { _ as _sfc_main$o } from './Modal-Ck2XLt8d.mjs';
-import { u as useFetch } from './fetch-B4FwBOzu.mjs';
-import { _ as _sfc_main$l } from './Tabs-Bbsg9wag.mjs';
-import { _ as _sfc_main$m } from './Tooltip-BOazooWP.mjs';
-import { _ as __nuxt_component_5 } from './CodeBlock-BgE-NSmE.mjs';
-import { _ as __nuxt_component_1$3 } from './OpenInIdeLink-C4MXA8ya.mjs';
-import { _ as _sfc_main$j } from './Card-BQP_oZkQ.mjs';
-import { b as useFoldedState } from './useAiStatus-CWvIo32Q.mjs';
+import { u as useDesktopDownload } from './useDesktopDownload-BmR6ouz2.mjs';
+import { u as useFetch, a as useCopy } from './fetch-BQg_fhX0.mjs';
+import { f as formatRelativeTime, m as getTraceViewerUrl, n as fileApiUrl, o as parsePatchLines, q as patchLineClass, e as errorMessage, u as getFileApiPath } from './index-BOK1aJk9.mjs';
+import { _ as _sfc_main$l } from './Alert-C4xq8lao.mjs';
+import { dN as recommendLocatorFix, aa as formatBytes } from '../nitro/nitro.mjs';
+import { _ as __nuxt_component_11 } from './SectionCard-BW5Lynrr.mjs';
+import { _ as _sfc_main$q } from './Modal-pSDlXzT3.mjs';
+import { _ as _sfc_main$m } from './Tabs-BkSOnbaB.mjs';
+import { _ as _sfc_main$n } from './Tooltip-Dv4htNP6.mjs';
+import { _ as __nuxt_component_5 } from './CodeBlock-DGhKVFad.mjs';
+import { _ as __nuxt_component_1$3 } from './OpenInIdeLink-B9wvQkhy.mjs';
+import { _ as _sfc_main$k } from './Card-BQP_oZkQ.mjs';
+import { u as useFoldedState } from './DiagnosisResult-Br3qBLXe.mjs';
 
 const CAPTURED_ATTRIBUTES = [
   "id",
@@ -34,7 +33,7 @@ const CAPTURED_ATTRIBUTES = [
   "multiple"
 ];
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "ExportMenu",
   __ssrInlineRender: true,
   props: {
@@ -83,7 +82,7 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
       const _component_UPopover = _sfc_main$8$1;
       const _component_UButton = _sfc_main$k$1;
       const _component_HelpHint = __nuxt_component_2$1;
-      const _component_USeparator = _sfc_main$n;
+      const _component_USeparator = _sfc_main$o;
       _push(ssrRenderComponent(_component_UPopover, mergeProps({
         open: unref(open),
         "onUpdate:open": ($event) => isRef(open) ? open.value = $event : null
@@ -369,14 +368,14 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_setup$i = _sfc_main$i.setup;
-_sfc_main$i.setup = (props, ctx) => {
+const _sfc_setup$j = _sfc_main$j.setup;
+_sfc_main$j.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/ExportMenu.vue");
-  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+  return _sfc_setup$j ? _sfc_setup$j(props, ctx) : void 0;
 };
-const __nuxt_component_6$1 = Object.assign(_sfc_main$i, { __name: "ExportMenu" });
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const __nuxt_component_6 = Object.assign(_sfc_main$j, { __name: "ExportMenu" });
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
   __name: "CollapsibleSectionCard",
   __ssrInlineRender: true,
   props: {
@@ -399,7 +398,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     }
     __expose({ setFolded, reveal });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_UCard = _sfc_main$j;
+      const _component_UCard = _sfc_main$k;
       const _component_UIcon = _sfc_main$p;
       const _component_HelpHint = __nuxt_component_2$1;
       _push(`<div${ssrRenderAttrs(mergeProps({
@@ -548,13 +547,65 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const _sfc_setup$i = _sfc_main$i.setup;
+_sfc_main$i.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/CollapsibleSectionCard.vue");
+  return _sfc_setup$i ? _sfc_setup$i(props, ctx) : void 0;
+};
+const __nuxt_component_25 = Object.assign(_sfc_main$i, { __name: "CollapsibleSectionCard" });
+const TOKEN_RE = /('(?:\\.|[^'])*'|"(?:\\.|[^"])*")|([A-Za-z_$][\w$]*)(?=\s*\()|([A-Za-z_$][\w$]*)(?=\s*:)|(true|false|null|\d+)|([{}(),.])/g;
+function tokenizeLocator(expr) {
+  const tokens = [];
+  const re = new RegExp(TOKEN_RE.source, "g");
+  let last = 0;
+  let m;
+  while ((m = re.exec(expr)) !== null) {
+    if (m.index > last) tokens.push({ kind: "plain", text: expr.slice(last, m.index) });
+    const kind = m[1] ? "string" : m[2] ? "method" : m[3] ? "option" : m[4] ? "literal" : "punctuation";
+    tokens.push({ kind, text: m[0] });
+    last = re.lastIndex;
+  }
+  if (last < expr.length) tokens.push({ kind: "plain", text: expr.slice(last) });
+  return tokens;
+}
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "LocatorCode",
+  __ssrInlineRender: true,
+  props: {
+    locator: {},
+    truncate: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const TOKEN_CLASS = {
+      method: "text-violet-700 dark:text-violet-300",
+      string: "text-green-700 dark:text-green-300",
+      option: "text-blue-700 dark:text-blue-300",
+      literal: "text-amber-700 dark:text-amber-300",
+      punctuation: "text-gray-500 dark:text-gray-400",
+      plain: ""
+    };
+    const tokens = computed(() => tokenizeLocator(props.locator));
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<code${ssrRenderAttrs(mergeProps({
+        class: ["font-mono", __props.truncate ? "block truncate" : "break-words"],
+        title: __props.locator
+      }, _attrs))}><!--[-->`);
+      ssrRenderList(unref(tokens), (token, i) => {
+        _push(`<span class="${ssrRenderClass(TOKEN_CLASS[token.kind])}">${ssrInterpolate(token.text)}</span>`);
+      });
+      _push(`<!--]--></code>`);
+    };
+  }
+});
 const _sfc_setup$h = _sfc_main$h.setup;
 _sfc_main$h.setup = (props, ctx) => {
   const ssrContext = useSSRContext();
-  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/CollapsibleSectionCard.vue");
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/LocatorCode.vue");
   return _sfc_setup$h ? _sfc_setup$h(props, ctx) : void 0;
 };
-const __nuxt_component_24 = Object.assign(_sfc_main$h, { __name: "CollapsibleSectionCard" });
+const __nuxt_component_0 = Object.assign(_sfc_main$h, { __name: "LocatorCode" });
 const _sfc_main$g = /* @__PURE__ */ defineComponent({
   __name: "DiffPatch",
   __ssrInlineRender: true,
@@ -617,6 +668,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
     const displayNote = computed(() => props.note ?? defaultNote(props.alt));
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UBadge = _sfc_main$7$1;
+      const _component_LocatorCode = __nuxt_component_0;
       const _component_UIcon = _sfc_main$p;
       const _component_UButton = _sfc_main$k$1;
       _push(`<div${ssrRenderAttrs(mergeProps({
@@ -647,7 +699,12 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
         }),
         _: 1
       }, _parent));
-      _push(`<div class="flex-1 min-w-0"><code class="text-xs font-mono block truncate"${ssrRenderAttr("title", __props.alt.locator)}>${ssrInterpolate(__props.alt.locator)}</code>`);
+      _push(`<div class="flex-1 min-w-0">`);
+      _push(ssrRenderComponent(_component_LocatorCode, {
+        locator: __props.alt.locator,
+        truncate: "",
+        class: "text-xs"
+      }, null, _parent));
       if (unref(displayNote)) {
         _push(`<p class="text-[11px] leading-4 text-gray-500 truncate">${ssrInterpolate(unref(displayNote))}</p>`);
       } else {
@@ -691,150 +748,444 @@ _sfc_main$f.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/LocatorAlternativeRow.vue");
   return _sfc_setup$f ? _sfc_setup$f(props, ctx) : void 0;
 };
-const __nuxt_component_6 = Object.assign(_sfc_main$f, { __name: "LocatorAlternativeRow" });
-function installSnapshotPicker(config) {
-  if ((void 0).__piwiPickerInstalled) return;
-  (void 0).__piwiPickerInstalled = true;
-  var doc = void 0;
-  var g = void 0;
-  var Z = 2147483600;
-  var PROBED_ATTRS = config.probedAttrs;
-  var highlight = doc.createElement("div");
+const __nuxt_component_7 = Object.assign(_sfc_main$f, { __name: "LocatorAlternativeRow" });
+function probeElementAttrs(el, arg) {
+  const { keep, tagRoles, inputRoles, roleSources, includeStructural, includeLabelText } = arg;
+  const attrMap = {};
+  for (const key of keep) {
+    const v = el.getAttribute(key) ?? el[key];
+    attrMap[key] = typeof v === "string" ? v.slice(0, 200) : v ? String(v).slice(0, 200) : null;
+  }
+  const r = el.getBoundingClientRect();
+  const selectorCounts = {};
+  try {
+    const doc = el.ownerDocument;
+    const cssEsc = (s) => doc.defaultView.CSS.escape(s);
+    const count = (sel) => {
+      try {
+        return doc.querySelectorAll(sel).length;
+      } catch {
+        return void 0;
+      }
+    };
+    if (attrMap["data-testid"]) {
+      selectorCounts.testId = count(`[data-testid=${JSON.stringify(attrMap["data-testid"])}]`);
+    }
+    if (attrMap["id"]) selectorCounts.id = count(`#${cssEsc(attrMap["id"])}`);
+    if (attrMap["name"]) selectorCounts.name = count(`[name=${JSON.stringify(attrMap["name"])}]`);
+    if (attrMap["placeholder"]) {
+      selectorCounts.placeholder = count(`[placeholder=${JSON.stringify(attrMap["placeholder"])}]`);
+    }
+    if (attrMap["alt"]) selectorCounts.alt = count(`[alt=${JSON.stringify(attrMap["alt"])}]`);
+    if (attrMap["title"]) selectorCounts.title = count(`[title=${JSON.stringify(attrMap["title"])}]`);
+    const classList = (attrMap["class"] || "").split(/\s+/).filter((c) => c.length > 1).slice(0, 10);
+    if (classList.length > 0) {
+      const classCounts = {};
+      for (const cls of classList) {
+        const n = count(`.${cssEsc(cls)}`);
+        if (n !== void 0) classCounts[cls] = n;
+      }
+      selectorCounts.classes = classCounts;
+    }
+  } catch {
+  }
+  let rolePosition = null;
+  const ancestors = [];
+  if (includeStructural && tagRoles && inputRoles && roleSources) {
+    try {
+      const doc = el.ownerDocument;
+      const cssEsc = (s) => doc.defaultView.CSS.escape(s);
+      const count = (sel) => {
+        try {
+          return doc.querySelectorAll(sel).length;
+        } catch {
+          return void 0;
+        }
+      };
+      const roleMemo = /* @__PURE__ */ new Map();
+      const textMemo = /* @__PURE__ */ new Map();
+      const roleOf = (n) => {
+        const cached = roleMemo.get(n);
+        if (cached !== void 0) return cached;
+        let role;
+        const explicit = n.getAttribute("role");
+        if (explicit) {
+          role = explicit;
+        } else {
+          const tag = (n.tagName || "").toLowerCase();
+          if (tag === "input") role = inputRoles[(n.getAttribute("type") || "text").toLowerCase()] ?? "textbox";
+          else if (tag === "select") role = n.getAttribute("multiple") != null ? "listbox" : "combobox";
+          else if (tag === "a") role = n.getAttribute("href") != null ? "link" : null;
+          else role = tagRoles[tag] ?? null;
+        }
+        roleMemo.set(n, role);
+        return role;
+      };
+      const levelOf = (n) => {
+        const m = /^h([1-6])$/.exec((n.tagName || "").toLowerCase());
+        if (m) return Number(m[1]);
+        const al = n.getAttribute("aria-level");
+        return al && /^\d+$/.test(al) ? Number(al) : null;
+      };
+      const targetRole = roleOf(el);
+      const targetLevel = targetRole === "heading" ? levelOf(el) : null;
+      const nameOf = (n) => {
+        const al = n.getAttribute("aria-label");
+        if (al) return al;
+        const txt = (n.textContent || "").replace(/\s+/g, " ").trim();
+        if (txt) return txt;
+        return n.getAttribute("title") || n.getAttribute("placeholder") || null;
+      };
+      const targetName = nameOf(el);
+      const targetText = (el.textContent || "").replace(/\s+/g, " ").trim();
+      const textNeedle = targetText ? targetText.toLowerCase() : null;
+      const normText = (n) => {
+        const cached = textMemo.get(n);
+        if (cached !== void 0) return cached;
+        const text = (n.textContent || "").replace(/\s+/g, " ").trim().toLowerCase();
+        textMemo.set(n, text);
+        return text;
+      };
+      const TEXT_COUNT_CAP = 2;
+      const countTextOwners = (root, cap) => {
+        if (!textNeedle) return -1;
+        const els = root.querySelectorAll("*");
+        if (els.length > cap) return -1;
+        let total = 0;
+        for (let i = 0; i < els.length; i++) {
+          const n = els[i];
+          if (normText(n).indexOf(textNeedle) === -1) continue;
+          let deeper = false;
+          const kids = n.children;
+          for (let j = 0; j < kids.length; j++) {
+            if (normText(kids[j]).indexOf(textNeedle) !== -1) {
+              deeper = true;
+              break;
+            }
+          }
+          if (!deeper) total++;
+          if (total >= TEXT_COUNT_CAP) return total;
+        }
+        return total;
+      };
+      const nodes = doc.querySelectorAll(roleSources);
+      const nodesUsable = nodes.length <= 4e3;
+      const rolesUsable = !!targetRole && nodesUsable;
+      if (rolesUsable) {
+        let roleCountAll = 0;
+        let index = -1;
+        let levelCount = 0;
+        let roleNameCount = 0;
+        for (let i = 0; i < nodes.length; i++) {
+          const n = nodes[i];
+          if (roleOf(n) !== targetRole) continue;
+          if (n === el) index = roleCountAll;
+          roleCountAll++;
+          if (targetLevel != null && levelOf(n) === targetLevel) levelCount++;
+          if (targetName != null && nameOf(n) === targetName) roleNameCount++;
+        }
+        if (targetName != null) selectorCounts.roleName = roleNameCount;
+        if (index !== -1) {
+          rolePosition = {
+            role: targetRole,
+            count: roleCountAll,
+            index,
+            ...targetLevel != null ? { levelCount } : {}
+          };
+        }
+      }
+      if (textNeedle) {
+        const textCount = countTextOwners(doc.body || doc.documentElement, 4e3);
+        if (textCount >= 0) selectorCounts.text = textCount;
+      }
+      if (rolesUsable || textNeedle) {
+        const CONTAINER_TAGS = ["form", "nav", "main", "article", "section", "dialog", "table", "li", "tr"];
+        const NOISY_DATA_ATTR = /^data-(v-[0-9a-f]+|reactid|react-checksum|svelte-\w+|ng-\w+|ember\w*)$/i;
+        const POSITIONAL_DATA_ATTR = /^data-(index|idx|i|key|row|rownum|col|column|position|pos|order|sort|offset|page)$/i;
+        const TEST_DATA_ATTRS = ["data-test", "data-test-id", "data-qa", "data-qa-id", "data-cy", "data-e2e"];
+        const usableDataAttr = (name, value) => {
+          if (!name || name.slice(0, 5) !== "data-" || name === "data-testid") return false;
+          if (NOISY_DATA_ATTR.test(name) || POSITIONAL_DATA_ATTR.test(name)) return false;
+          return !!value && value.length <= 120;
+        };
+        const stableDataAttr = (n) => {
+          const attrs = n.attributes;
+          if (!attrs) return null;
+          let fallback = null;
+          for (let i = 0; i < attrs.length; i++) {
+            const name = attrs[i].name;
+            const value = attrs[i].value;
+            if (!usableDataAttr(name, value)) continue;
+            if (TEST_DATA_ATTRS.indexOf(name.toLowerCase()) !== -1) return { name, value };
+            if (!fallback) fallback = { name, value };
+          }
+          return fallback;
+        };
+        const docRoleCount = (role) => {
+          let c = 0;
+          for (let i = 0; i < nodes.length; i++) if (roleOf(nodes[i]) === role) c++;
+          return c;
+        };
+        const rawText = (n) => (n.textContent || "").replace(/\s+/g, " ").trim();
+        const namesRatherThanReports = (t) => {
+          const letters = t.replace(/[^A-Za-z]/g, "").length;
+          if (letters < 2) return false;
+          const digits = t.replace(/[^0-9]/g, "").length;
+          return digits <= letters;
+        };
+        const usableDiscriminator = (t) => !!t && t.length <= 60 && t !== targetText && namesRatherThanReports(t);
+        const discriminatingText = (anc) => {
+          const heading = anc.querySelector('h1,h2,h3,h4,h5,h6,[role="heading"]');
+          if (heading) {
+            const t = rawText(heading);
+            if (usableDiscriminator(t)) return t;
+          }
+          const els = anc.querySelectorAll("*");
+          if (els.length > 200) return null;
+          for (let i = 0; i < els.length; i++) {
+            const n = els[i];
+            if (n === el || n.children.length > 0) continue;
+            const t = rawText(n);
+            if (!usableDiscriminator(t)) continue;
+            return t;
+          }
+          return null;
+        };
+        const filterMatchCount = (role, text) => {
+          const needle = text.toLowerCase();
+          let c = 0;
+          for (let i = 0; i < nodes.length; i++) {
+            if (roleOf(nodes[i]) !== role) continue;
+            if (normText(nodes[i]).indexOf(needle) !== -1) c++;
+          }
+          return c;
+        };
+        let node = el.parentElement;
+        let depth = 0;
+        while (node && depth < 12 && ancestors.length < 4) {
+          depth++;
+          const tag = (node.tagName || "").toLowerCase();
+          if (tag === "body" || tag === "html") break;
+          const testId = node.getAttribute("data-testid");
+          const id = node.getAttribute("id");
+          const explicitRole = node.getAttribute("role");
+          const ariaLabel = node.getAttribute("aria-label");
+          const anchorRole = explicitRole || (CONTAINER_TAGS.includes(tag) ? tagRoles[tag] : null) || null;
+          const dataAttr = stableDataAttr(node);
+          if (testId || id || anchorRole || ariaLabel || dataAttr) {
+            let scopedRoleCount = -1;
+            if (rolesUsable) {
+              const scoped = node.querySelectorAll(roleSources);
+              if (scoped.length <= 2e3) {
+                scopedRoleCount = 0;
+                for (let i = 0; i < scoped.length; i++) {
+                  const n = scoped[i];
+                  if (roleOf(n) !== targetRole) continue;
+                  if (targetLevel != null && levelOf(n) !== targetLevel) continue;
+                  scopedRoleCount++;
+                }
+              }
+            }
+            const scopedTextCount = countTextOwners(node, 2e3);
+            let filterText = null;
+            try {
+              if (anchorRole && nodesUsable) filterText = discriminatingText(node);
+            } catch {
+              filterText = null;
+            }
+            ancestors.push({
+              tag,
+              depth,
+              testId: testId || null,
+              id: id || null,
+              role: explicitRole || null,
+              ariaLabel: ariaLabel || null,
+              ...scopedRoleCount >= 0 ? { scopedRoleCount } : {},
+              ...scopedTextCount >= 0 ? { scopedTextCount } : {},
+              ...testId ? { testIdCount: count(`[data-testid=${JSON.stringify(testId)}]`) } : {},
+              ...id ? { idCount: count(`#${cssEsc(id)}`) } : {},
+              ...anchorRole && nodesUsable ? { roleCount: docRoleCount(anchorRole) } : {},
+              ...filterText ? { filterText, filterRoleCount: filterMatchCount(anchorRole, filterText) } : {},
+              ...dataAttr ? { dataAttr, dataAttrCount: count(`[${dataAttr.name}=${JSON.stringify(dataAttr.value)}]`) } : {}
+            });
+          }
+          node = node.parentElement;
+        }
+      }
+    } catch {
+    }
+  }
+  const hasLabel = !!(el.labels && el.labels.length > 0);
+  const labelText = includeLabelText ? hasLabel ? (el.labels[0].textContent || "").replace(/\s+/g, " ").trim().slice(0, 120) || null : null : void 0;
+  return {
+    tagName: el.tagName?.toLowerCase?.() ?? "unknown",
+    attributes: attrMap,
+    // Collapse whitespace so multi-line text can't produce a getByText
+    // suggestion with literal newlines in it.
+    textContent: (el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 80),
+    center: {
+      x: Math.round(r.x + r.width / 2),
+      y: Math.round(r.y + r.height / 2)
+    },
+    hasLabel,
+    ...includeLabelText ? { labelText } : {},
+    selectorCounts,
+    ...includeStructural ? { rolePosition, ancestors } : {}
+  };
+}
+function installPickerOverlay(arg) {
+  const g = globalThis;
+  const doc = g.document;
+  if (!doc || !doc.body) {
+    if (arg.transport === "postMessage") g.parent.postMessage({ type: "pickerClosed" }, "*");
+    else g.__piwiPickState = "skipped";
+    return;
+  }
+  const Z = 2147483600;
+  const highlight = doc.createElement("div");
   highlight.id = "__piwi_picker_highlight";
-  highlight.style.cssText = "position:fixed;pointer-events:none;z-index:" + Z + ";display:none;box-sizing:border-box;border:2px solid #7c3aed;background:rgba(124,58,237,.12);border-radius:3px;";
-  doc.body.appendChild(highlight);
-  var banner = doc.createElement("div");
+  highlight.style.cssText = `position:fixed;pointer-events:none;z-index:${Z};display:none;box-sizing:border-box;border:2px solid #a855f7;background:rgba(168,85,247,.14);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.9),0 0 0 3px rgba(59,7,100,.55),inset 0 0 0 1px rgba(255,255,255,.5);`;
+  const banner = doc.createElement("div");
   banner.id = "__piwi_picker_banner";
-  banner.style.cssText = "position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:" + (Z + 2) + ";background:#111827;color:#f9fafb;font:13px/1.5 system-ui,sans-serif;padding:10px 16px;border-radius:8px;box-shadow:0 4px 24px rgba(0,0,0,.4);max-width:80vw;";
-  banner.innerHTML = '<div>Click an element to generate locators</div><div style="color:#9ca3af;margin-top:3px;font-size:11px">↑ parent · ↓ child · Esc skip</div>';
+  banner.style.cssText = `position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:${Z + 2};background:#111827;color:#f9fafb;font:13px/1.5 system-ui,sans-serif;border:1px solid #312e81;padding:10px 16px;border-radius:10px;box-shadow:0 4px 24px rgba(0,0,0,.5);max-width:min(680px,86vw);`;
+  const hlTokens = (expr) => {
+    const escHtml = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+    const re = /('(?:\\.|[^'])*'|"(?:\\.|[^"])*")|([A-Za-z_$][\w$]*)(?=\s*\()|([A-Za-z_$][\w$]*)(?=\s*:)|(true|false|null|\d+)|([{}(),.])/g;
+    let html = "";
+    let last = 0;
+    let m;
+    while ((m = re.exec(expr)) !== null) {
+      if (m.index > last) html += escHtml(expr.slice(last, m.index));
+      const color = m[1] ? "#86efac" : m[2] ? "#d8b4fe" : m[3] ? "#93c5fd" : m[4] ? "#fcd34d" : "#9ca3af";
+      html += `<span style="color:${color}">${escHtml(m[0])}</span>`;
+      last = re.lastIndex;
+    }
+    if (last < expr.length) html += escHtml(expr.slice(last));
+    return html;
+  };
+  const MONO = "ui-monospace,SFMono-Regular,Menlo,Consolas,monospace";
+  const hlLocator = (expr) => `<code style="font-family:${MONO}">${hlTokens(expr)}</code>`;
+  const head = doc.createElement("div");
+  head.innerHTML = arg.transport === "postMessage" ? "Click an element to generate locators" : arg.failing ? `Piwi locator picker — click the element that should replace ${hlLocator(arg.failing)}` : "Piwi inspector — click any element to generate locators for it";
+  const locatorLine = doc.createElement("div");
+  locatorLine.id = "__piwi_picker_locator";
+  locatorLine.style.cssText = `display:none;margin-top:7px;padding:5px 9px;border-radius:7px;background:#0b1120;border:1px solid #4c1d95;font:13.5px/1.55 ${MONO};word-break:break-word;overflow-wrap:anywhere;`;
+  const foot = doc.createElement("div");
+  foot.id = "__piwi_picker_foot";
+  foot.style.cssText = "color:#9ca3af;margin-top:6px;font-size:12px;";
+  foot.textContent = "↑ parent · ↓ child · Esc skip";
+  banner.appendChild(head);
+  banner.appendChild(locatorLine);
+  banner.appendChild(foot);
+  const label = doc.createElement("div");
+  label.id = "__piwi_picker_label";
+  label.style.cssText = `position:fixed;pointer-events:none;z-index:${Z + 1};display:none;box-sizing:border-box;max-width:min(620px,92vw);background:#0b1120;color:#f9fafb;border:1px solid #7c3aed;border-radius:7px;padding:4px 8px;font:12.5px/1.45 ${MONO};white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 18px rgba(0,0,0,.5);`;
+  doc.body.appendChild(highlight);
+  doc.body.appendChild(label);
   doc.body.appendChild(banner);
-  g.parent.postMessage({ type: "pickerReady" }, "*");
-  function describe(el) {
-    var tag = (el.tagName || "?").toLowerCase();
-    var testId = el.getAttribute && el.getAttribute("data-testid");
-    if (testId) return "getByTestId('" + testId + "')";
+  const escJs = (s) => s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+  const describe = (el) => {
+    const tag = (el.tagName || "?").toLowerCase();
+    const testId = el.getAttribute && el.getAttribute("data-testid");
+    if (testId) return `getByTestId('${escJs(testId)}')`;
     if (el.labels && el.labels.length > 0) {
-      var labelText = (el.labels[0].textContent || "").replace(/\s+/g, " ").trim().slice(0, 80);
-      if (labelText) return "getByLabel('" + labelText + "')";
+      const labelText = (el.labels[0].textContent || "").replace(/\s+/g, " ").trim().slice(0, 80);
+      if (labelText) return `getByLabel('${escJs(labelText)}')`;
     }
-    var ariaLabel = el.getAttribute && el.getAttribute("aria-label");
-    if (ariaLabel) return "getByLabel('" + ariaLabel + "')";
-    var placeholder = el.getAttribute && el.getAttribute("placeholder");
-    if (placeholder) return "getByPlaceholder('" + placeholder + "')";
-    var alt = el.getAttribute && el.getAttribute("alt");
-    if (alt) return "getByAltText('" + alt + "')";
-    var titleAttr = el.getAttribute && el.getAttribute("title");
-    if (titleAttr) return "getByTitle('" + titleAttr + "')";
-    if (el.id) return "locator('#" + el.id + "')";
-    var cls = (el.getAttribute && el.getAttribute("class") || "").split(/\s+/).find(function(c) {
-      return c.length > 1;
-    });
-    if (cls) return "locator('." + cls + "')";
-    return tag;
-  }
-  function buildChain(raw) {
-    var chain2 = [];
-    var node = raw;
+    const ariaLabel = el.getAttribute && el.getAttribute("aria-label");
+    if (ariaLabel) return `getByLabel('${escJs(ariaLabel)}')`;
+    const placeholder = el.getAttribute && el.getAttribute("placeholder");
+    if (placeholder) return `getByPlaceholder('${escJs(placeholder)}')`;
+    const alt = el.getAttribute && el.getAttribute("alt");
+    if (alt) return `getByAltText('${escJs(alt)}')`;
+    const titleAttr = el.getAttribute && el.getAttribute("title");
+    if (titleAttr) return `getByTitle('${escJs(titleAttr)}')`;
+    if (el.id) return `locator('#${escJs(el.id)}')`;
+    const cls = (el.getAttribute && el.getAttribute("class") || "").split(/\s+/).find((c) => c.length > 1);
+    return cls ? `locator('.${escJs(cls)}')` : tag;
+  };
+  const buildChain = (raw) => {
+    const chain2 = [];
+    let node = raw;
     while (node && chain2.length < 15) {
-      var t = (node.tagName || "").toLowerCase();
-      if (t === "body" || t === "html") break;
+      const tag = (node.tagName || "").toLowerCase();
+      if (tag === "body" || tag === "html") break;
       chain2.push(node);
       node = node.parentElement;
     }
     return chain2.length ? chain2 : [raw];
-  }
-  var ACTIONABLE = ["button", "a", "input", "select", "textarea", "summary", "option"];
-  function snapIndex(chain2) {
-    for (var i2 = 0; i2 < Math.min(chain2.length, 4); i2++) {
-      var el = chain2[i2];
-      var t = (el.tagName || "").toLowerCase();
-      if (ACTIONABLE.indexOf(t) !== -1) return i2;
-      if (el.getAttribute && (el.getAttribute("role") || el.getAttribute("data-testid"))) return i2;
+  };
+  const ACTIONABLE_TAGS = ["button", "a", "input", "select", "textarea", "summary", "option"];
+  const snapIndex = (chain2) => {
+    for (let i = 0; i < Math.min(chain2.length, 4); i++) {
+      const el = chain2[i];
+      const tag = (el.tagName || "").toLowerCase();
+      if (ACTIONABLE_TAGS.includes(tag)) return i;
+      if (el.getAttribute && (el.getAttribute("role") || el.getAttribute("data-testid"))) return i;
     }
     return 0;
-  }
-  var chain = [];
-  var idx = 0;
-  var lastRaw = null;
-  function current() {
-    return chain[idx] || null;
-  }
-  function refresh() {
-    var el = current();
+  };
+  const locatorOf = (el) => {
+    const hook = g.__piwiDescribeElement;
+    if (typeof hook === "function") {
+      try {
+        const derived = hook(el);
+        if (typeof derived === "string" && derived) return derived;
+      } catch {
+      }
+    }
+    return describe(el);
+  };
+  let chain = [];
+  let idx = 0;
+  let lastRaw = null;
+  let labeled = null;
+  const placeLabel = (r) => {
+    label.style.display = "block";
+    const lr = label.getBoundingClientRect();
+    const vw = g.innerWidth || doc.documentElement.clientWidth || 0;
+    const vh = g.innerHeight || doc.documentElement.clientHeight || 0;
+    let top = r.top - lr.height - 6;
+    if (top < 4) top = r.bottom + 6;
+    if (top + lr.height > vh - 4) top = Math.max(4, vh - lr.height - 4);
+    let left = r.left;
+    if (left + lr.width > vw - 6) left = vw - lr.width - 6;
+    if (left < 6) left = 6;
+    label.style.left = left + "px";
+    label.style.top = top + "px";
+  };
+  const current = () => chain[idx] ?? null;
+  const refresh = () => {
+    const el = current();
     if (!el) {
       highlight.style.display = "none";
+      label.style.display = "none";
       return;
     }
-    var r = el.getBoundingClientRect();
+    const r = el.getBoundingClientRect();
     highlight.style.display = "block";
     highlight.style.left = r.left + "px";
     highlight.style.top = r.top + "px";
     highlight.style.width = r.width + "px";
     highlight.style.height = r.height + "px";
-    var foot2 = doc.getElementById("__piwi_picker_foot");
-    if (foot2) foot2.textContent = describe(el) + " — click to pick · ↑ parent · ↓ child · Esc skip";
-  }
-  var foot = banner.querySelector("[style*=margin]");
-  if (foot) foot.id = "__piwi_picker_foot";
-  function probe(el) {
-    var attrs = {};
-    for (var i2 = 0; i2 < PROBED_ATTRS.length; i2++) {
-      var k = PROBED_ATTRS[i2];
-      var v = el.getAttribute(k) || el[k];
-      attrs[k] = typeof v === "string" ? v.slice(0, 200) : v ? String(v).slice(0, 200) : null;
-    }
-    var r = el.getBoundingClientRect();
-    var counts = {};
-    try {
-      var cssEsc = function(s) {
-        return g.CSS.escape(s);
-      };
-      var countSel = function(sel) {
-        try {
-          return doc.querySelectorAll(sel).length;
-        } catch (err) {
-          return void 0;
-        }
-      };
-      if (attrs["data-testid"]) counts.testId = countSel("[data-testid=" + JSON.stringify(attrs["data-testid"]) + "]");
-      if (attrs.id) counts.id = countSel("#" + cssEsc(attrs.id));
-      if (attrs.name) counts.name = countSel("[name=" + JSON.stringify(attrs.name) + "]");
-      var classList = (attrs["class"] || "").split(/\s+/).filter(function(c) {
-        return c.length > 1;
-      }).slice(0, 10);
-      if (classList.length > 0) {
-        var classCounts = {};
-        for (var j = 0; j < classList.length; j++) {
-          var n = countSel("." + cssEsc(classList[j]));
-          if (n !== void 0) classCounts[classList[j]] = n;
-        }
-        counts.classes = classCounts;
-      }
-    } catch (err) {
+    if (el !== labeled) {
+      labeled = el;
+      const tag = (el.tagName || "?").toLowerCase();
+      const locatorHtml = hlTokens(locatorOf(el));
+      label.innerHTML = `<span style="color:#c4b5fd">&lt;${tag}&gt;</span> ${locatorHtml}`;
+      locatorLine.innerHTML = locatorHtml;
+      locatorLine.style.display = "block";
     }
-    var labelText = null;
-    if (el.labels && el.labels.length > 0) {
-      labelText = (el.labels[0].textContent || "").replace(/\s+/g, " ").trim().slice(0, 120) || null;
-    }
-    return {
-      tagName: (el.tagName || "").toLowerCase(),
-      attributes: attrs,
-      textContent: (el.textContent || "").replace(/\s+/g, " ").trim().slice(0, 80) || null,
-      center: { x: Math.round(r.x + r.width / 2), y: Math.round(r.y + r.height / 2) },
-      hasLabel: !!(el.labels && el.labels.length > 0),
-      labelText,
-      selectorCounts: counts
-    };
-  }
-  function stop(e) {
+    placeLabel(r);
+    foot.textContent = "click to pick · ↑ parent · ↓ child · Esc skip";
+  };
+  const stop = (e) => {
     e.preventDefault();
     e.stopImmediatePropagation();
-  }
-  function isOwn(el) {
-    return el === banner || el === highlight || banner.contains && banner.contains(el) || el && el.__piwiHint;
-  }
-  var bannerDocked = "top";
-  function dockBanner(side) {
+  };
+  const isOwn = (el) => el === banner || el === highlight || el === label || banner.contains && banner.contains(el) || !!(el && el.__piwiHint);
+  let bannerDocked = "top";
+  const dockBanner = (side) => {
     if (bannerDocked === side) return;
     bannerDocked = side;
     if (side === "bottom") {
@@ -844,11 +1195,12 @@ function installSnapshotPicker(config) {
       banner.style.top = "12px";
       banner.style.bottom = "auto";
     }
-  }
-  function onMove(e) {
-    var raw = e.target;
+  };
+  const onMove = (e) => {
+    const raw = e.target;
     if (!raw || isOwn(raw)) {
       highlight.style.display = "none";
+      label.style.display = "none";
       return;
     }
     if (raw !== lastRaw) {
@@ -857,36 +1209,109 @@ function installSnapshotPicker(config) {
       idx = snapIndex(chain);
     }
     refresh();
-    var el = current();
+    const el = current();
     if (el) {
-      var r = el.getBoundingClientRect();
-      var bannerRect = banner.getBoundingClientRect();
-      var margin = 8;
-      if (r.left < bannerRect.right + margin && r.right > bannerRect.left - margin && r.top < bannerRect.bottom + margin && r.bottom > bannerRect.top - margin) {
+      const r = el.getBoundingClientRect();
+      const br = banner.getBoundingClientRect();
+      const margin = 8;
+      if (r.left < br.right + margin && r.right > br.left - margin && r.top < br.bottom + margin && r.bottom > br.top - margin) {
         dockBanner(bannerDocked === "top" ? "bottom" : "top");
       }
     }
-  }
-  function handleKey(k) {
-    if (k === "Escape") {
-      doClose();
-      return;
+  };
+  const suppressed = ["mousedown", "mouseup", "pointerdown", "pointerup", "auxclick", "dblclick"];
+  const removePickingListeners = () => {
+    doc.removeEventListener("mousemove", onMove, true);
+    doc.removeEventListener("click", onClick, true);
+    doc.removeEventListener("keydown", onKey, true);
+    if (arg.transport === "postMessage") g.removeEventListener("message", onParentMsg, false);
+  };
+  const removeSuppressed = () => {
+    for (const t of suppressed) doc.removeEventListener(t, stop, true);
+  };
+  const cleanup = () => {
+    highlight.remove();
+    label.remove();
+    banner.remove();
+  };
+  const reportPicked = (el) => {
+    removePickingListeners();
+    highlight.style.display = "none";
+    label.style.display = "none";
+    if (arg.transport === "postMessage") {
+      const probeFn = g.__piwiProbe;
+      const attrs = typeof probeFn === "function" ? probeFn(el, arg.probeArg) : null;
+      g.__piwiSnapshotExtras?.onPick?.();
+      doc.addEventListener("click", stop, true);
+      doc.addEventListener("keydown", stop, true);
+      foot.textContent = "Analyzing element…";
+      g.parent.postMessage({ type: "elementPicked", attrs }, "*");
+    } else {
+      removeSuppressed();
+      g.__piwiPickedElement = el;
+      g.__piwiPickState = "picked";
+      foot.textContent = "Analyzing element…";
     }
-    if (k === "ArrowUp") {
-      idx = Math.min(idx + 1, chain.length - 1);
-      refresh();
+  };
+  const reportSkipped = () => {
+    removePickingListeners();
+    if (arg.transport === "postMessage") {
+      doc.removeEventListener("click", stop, true);
+      doc.removeEventListener("keydown", stop, true);
+      removeSuppressed();
+      g.__piwiSnapshotExtras?.onClose?.();
+      cleanup();
+      g.parent.postMessage({ type: "pickerClosed" }, "*");
+    } else {
+      removeSuppressed();
+      g.__piwiPickState = "skipped";
+      cleanup();
     }
-    if (k === "ArrowDown") {
-      idx = Math.max(idx - 1, 0);
-      refresh();
+  };
+  const onClick = (e) => {
+    stop(e);
+    const el = current();
+    if (!el || isOwn(e.target)) return;
+    reportPicked(el);
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      stop(e);
+      reportSkipped();
+      return;
     }
-  }
-  function onKey(e) {
-    if (e.key === "Escape" || e.key === "ArrowUp" || e.key === "ArrowDown") {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
       stop(e);
-      handleKey(e.key);
+      if (e.key === "ArrowUp") idx = Math.min(idx + 1, chain.length - 1);
+      else idx = Math.max(idx - 1, 0);
+      refresh();
     }
+  };
+  const onParentMsg = (e) => {
+    const d = e.data;
+    if (!d || typeof d.type !== "string" || d.type !== "piwiPickerKey" || typeof d.key !== "string") return;
+    onKey({
+      key: d.key,
+      preventDefault() {
+      },
+      stopImmediatePropagation() {
+      }
+    });
+  };
+  g.__piwiPickCleanup = cleanup;
+  doc.addEventListener("mousemove", onMove, true);
+  doc.addEventListener("click", onClick, true);
+  doc.addEventListener("keydown", onKey, true);
+  for (const t of suppressed) doc.addEventListener(t, stop, true);
+  if (arg.transport === "postMessage") {
+    g.addEventListener("message", onParentMsg, false);
+    g.parent.postMessage({ type: "pickerReady" }, "*");
   }
+}
+function installSnapshotPickerExtras() {
+  var doc = void 0;
+  var g = void 0;
+  var Z = 2147483600;
   var hintBoxes = [];
   function clearHints() {
     for (var i2 = 0; i2 < hintBoxes.length; i2++) {
@@ -985,8 +1410,7 @@ function installSnapshotPicker(config) {
   function onParentMsg(e) {
     var d = e.data;
     if (!d || typeof d.type !== "string") return;
-    if (d.type === "piwiPickerKey" && typeof d.key === "string") handleKey(d.key);
-    else if (d.type === "piwiHighlight") {
+    if (d.type === "piwiHighlight") {
       try {
         highlightHints(d.hints);
       } catch (err) {
@@ -1008,37 +1432,43 @@ function installSnapshotPicker(config) {
       }
     }
   }
-  function onClick(e) {
-    stop(e);
-    var el = current();
-    if (!el || isOwn(e.target)) return;
-    var attrs = probe(el);
-    highlight.style.display = "none";
-    clearHints();
-    banner.innerHTML = '<div style="text-align:center;color:#9ca3af;">Analyzing element…</div>';
-    removeListeners();
-    g.parent.postMessage({ type: "elementPicked", attrs }, "*");
-  }
-  var suppressed = ["mousedown", "mouseup", "pointerdown", "pointerup", "auxclick", "dblclick"];
-  function removeListeners() {
-    doc.removeEventListener("mousemove", onMove, true);
-    doc.removeEventListener("click", onClick, true);
-    doc.removeEventListener("keydown", onKey, true);
-    g.removeEventListener("message", onParentMsg, false);
-    for (var i2 = 0; i2 < suppressed.length; i2++) doc.removeEventListener(suppressed[i2], stop, true);
-  }
-  function doClose() {
-    removeListeners();
-    clearHints();
-    highlight.remove();
-    banner.remove();
-    g.parent.postMessage({ type: "pickerClosed" }, "*");
-  }
-  doc.addEventListener("mousemove", onMove, true);
-  doc.addEventListener("click", onClick, true);
-  doc.addEventListener("keydown", onKey, true);
   g.addEventListener("message", onParentMsg, false);
-  for (var i = 0; i < suppressed.length; i++) doc.addEventListener(suppressed[i], stop, true);
+  function stop(e) {
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+  var INERT_EVENTS = [
+    "mousedown",
+    "mouseup",
+    "pointerdown",
+    "pointerup",
+    "auxclick",
+    "dblclick",
+    "contextmenu",
+    "submit",
+    "beforeinput",
+    "input",
+    "change",
+    "paste",
+    "cut",
+    "drop",
+    "dragstart",
+    "keypress",
+    "keyup",
+    "touchstart",
+    "touchend"
+  ];
+  for (var i = 0; i < INERT_EVENTS.length; i++) doc.addEventListener(INERT_EVENTS[i], stop, true);
+  g.__piwiSnapshotExtras = {
+    onPick: function() {
+      clearHints();
+    },
+    onClose: function() {
+      clearHints();
+      g.removeEventListener("message", onParentMsg, false);
+      for (var i2 = 0; i2 < INERT_EVENTS.length; i2++) doc.removeEventListener(INERT_EVENTS[i2], stop, true);
+    }
+  };
   function reportHeight() {
     var h = Math.max(doc.documentElement ? doc.documentElement.scrollHeight : 0, doc.body ? doc.body.scrollHeight : 0);
     if (h > 0) g.parent.postMessage({ type: "piwiContentHeight", height: h }, "*");
@@ -1053,9 +1483,14 @@ function installSnapshotPicker(config) {
   } catch (err) {
   }
 }
+const escScriptClose = (src) => src.replace(/<\/(script)/gi, "<\\/$1");
 function snapshotPickerScriptTag(config) {
-  const src = String(installSnapshotPicker).replace(/<\/(script)/gi, "<\\/$1");
-  return `<script>(${src})(${JSON.stringify(config)})<\/script>`;
+  const probeArg = { keep: config.probedAttrs, includeStructural: false, includeLabelText: true };
+  const overlayArg = { transport: "postMessage", probeArg };
+  const probeSrc = escScriptClose(String(probeElementAttrs));
+  const extrasSrc = escScriptClose(String(installSnapshotPickerExtras));
+  const overlaySrc = escScriptClose(String(installPickerOverlay));
+  return `<script>globalThis.__piwiProbe = (${probeSrc});(${extrasSrc})();(${overlaySrc})(${JSON.stringify(overlayArg)});<\/script>`;
 }
 function stripBaseTag(html) {
   return html.replace(/<base\b[^>]*>/gi, "");
@@ -1088,7 +1523,9 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       snapshotPending.value = true;
       snapshotError.value = null;
       try {
-        const query = viewSource.value ? `?source=${viewSource.value}` : "";
+        const params = new URLSearchParams({ inlineStyles: "1" });
+        if (viewSource.value) params.set("source", viewSource.value);
+        const query = `?${params.toString()}`;
         snapshot.value = await $fetch(
           `/api/test-runs/${props.runId}/cases/${props.testRunsCaseId}/dom-snapshot${query}`
         );
@@ -1301,11 +1738,12 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
       }, 2e3);
     }
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_UModal = _sfc_main$o;
+      const _component_UModal = _sfc_main$q;
       const _component_UIcon = _sfc_main$p;
       const _component_UButton = _sfc_main$k$1;
       const _component_UInput = _sfc_main$d$1;
       const _component_UBadge = _sfc_main$7$1;
+      const _component_LocatorCode = __nuxt_component_0;
       _push(ssrRenderComponent(_component_UModal, mergeProps({
         open: isOpen.value,
         "onUpdate:open": ($event) => isOpen.value = $event,
@@ -1545,7 +1983,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                 }, null, _parent2, _scopeId));
                 _push2(`</div><div class="space-y-1" role="radiogroup" aria-label="Alternative locators"${_scopeId}><!--[-->`);
                 ssrRenderList(unref(alternatives), (alt, i) => {
-                  _push2(ssrRenderComponent(__nuxt_component_6, {
+                  _push2(ssrRenderComponent(__nuxt_component_7, {
                     key: i,
                     alt,
                     copied: unref(copiedKey) === `picked-${i}`,
@@ -1563,7 +2001,13 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     name: "i-lucide-star",
                     class: "size-5 text-primary shrink-0"
                   }, null, _parent2, _scopeId));
-                  _push2(`<div class="flex-1 min-w-0"${_scopeId}><p class="text-xs font-medium text-primary"${_scopeId}> Recommended (score: ${ssrInterpolate(unref(recommendation).recommended.score)}) </p><code class="text-sm font-mono block truncate mt-0.5"${_scopeId}>${ssrInterpolate(unref(recommendation).recommended.locator)}</code></div>`);
+                  _push2(`<div class="flex-1 min-w-0"${_scopeId}><p class="text-xs font-medium text-primary"${_scopeId}> Recommended (score: ${ssrInterpolate(unref(recommendation).recommended.score)}) </p>`);
+                  _push2(ssrRenderComponent(_component_LocatorCode, {
+                    locator: unref(recommendation).recommended.locator,
+                    truncate: "",
+                    class: "text-sm mt-0.5"
+                  }, null, _parent2, _scopeId));
+                  _push2(`</div>`);
                   _push2(ssrRenderComponent(_component_UButton, {
                     size: "sm",
                     color: "primary",
@@ -1832,7 +2276,7 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     "aria-label": "Alternative locators"
                   }, [
                     (openBlock(true), createBlock(Fragment, null, renderList(unref(alternatives), (alt, i) => {
-                      return openBlock(), createBlock(__nuxt_component_6, {
+                      return openBlock(), createBlock(__nuxt_component_7, {
                         key: i,
                         alt,
                         copied: unref(copiedKey) === `picked-${i}`,
@@ -1859,7 +2303,11 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
                     }),
                     createVNode("div", { class: "flex-1 min-w-0" }, [
                       createVNode("p", { class: "text-xs font-medium text-primary" }, " Recommended (score: " + toDisplayString(unref(recommendation).recommended.score) + ") ", 1),
-                      createVNode("code", { class: "text-sm font-mono block truncate mt-0.5" }, toDisplayString(unref(recommendation).recommended.locator), 1)
+                      createVNode(_component_LocatorCode, {
+                        locator: unref(recommendation).recommended.locator,
+                        truncate: "",
+                        class: "text-sm mt-0.5"
+                      }, null, 8, ["locator"])
                     ]),
                     createVNode(_component_UButton, {
                       size: "sm",
@@ -2086,7 +2534,7 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const cardComponent = computed(() => props.storageKey ? __nuxt_component_24 : __nuxt_component_11);
+    const cardComponent = computed(() => props.storageKey ? __nuxt_component_25 : __nuxt_component_11);
     const cardBind = computed(() => props.storageKey ? { storageKey: props.storageKey } : {});
     const {
       data: healing,
@@ -2248,13 +2696,14 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
       () => showAllAlternatives.value ? alternatives.value : alternatives.value.slice(0, ALT_PREVIEW)
     );
     return (_ctx, _push, _parent, _attrs) => {
+      const _component_LocatorCode = __nuxt_component_0;
       const _component_UButton = _sfc_main$k$1;
-      const _component_UAlert = _sfc_main$k;
+      const _component_UAlert = _sfc_main$l;
       const _component_NuxtLink = __nuxt_component_12;
       const _component_UIcon = _sfc_main$p;
       const _component_UBadge = _sfc_main$7$1;
       const _component_DiffPatch = __nuxt_component_1$2;
-      const _component_LocatorAlternativeRow = __nuxt_component_6;
+      const _component_LocatorAlternativeRow = __nuxt_component_7;
       const _component_DocLink = __nuxt_component_9;
       _push(`<!--[-->`);
       if (!unref(pending) && !unref(error) && unref(hasData)) {
@@ -2346,7 +2795,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   }),
                   _: 1
                 }, _parent2, _scopeId));
-                _push2(`</p><code class="text-sm font-mono block truncate mt-0.5"${_scopeId}>${ssrInterpolate(unref(userPick).locator)}</code></div>`);
+                _push2(`</p>`);
+                _push2(ssrRenderComponent(_component_LocatorCode, {
+                  locator: unref(userPick).locator,
+                  truncate: "",
+                  class: "text-sm mt-0.5"
+                }, null, _parent2, _scopeId));
+                _push2(`</div>`);
                 _push2(ssrRenderComponent(_component_UButton, {
                   size: "sm",
                   color: "primary",
@@ -2438,7 +2893,12 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   }, null, _parent2, _scopeId));
                   _push2(`</div>`);
                 } else {
-                  _push2(`<!--[--><code class="text-sm font-mono block truncate"${_scopeId}>${ssrInterpolate(unref(recommended).locator)}</code>`);
+                  _push2(`<!--[-->`);
+                  _push2(ssrRenderComponent(_component_LocatorCode, {
+                    locator: unref(recommended).locator,
+                    truncate: "",
+                    class: "text-sm"
+                  }, null, _parent2, _scopeId));
                   if (unref(argChanges).length) {
                     _push2(`<p class="text-xs flex flex-wrap items-center gap-x-1.5 gap-y-0.5"${_scopeId}><!--[-->`);
                     ssrRenderList(unref(argChanges), (c, i) => {
@@ -2528,7 +2988,13 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   name: "i-lucide-shield-check",
                   class: "size-5 text-success shrink-0"
                 }, null, _parent2, _scopeId));
-                _push2(`<div class="flex-1 min-w-0"${_scopeId}><p class="text-xs font-medium text-success-600 dark:text-success-400"${_scopeId}> Most stable option (score: ${ssrInterpolate(unref(recommendation).durable.score)}) </p><code class="text-sm font-mono block truncate mt-0.5"${_scopeId}>${ssrInterpolate(unref(recommendation).durable.locator)}</code><p class="text-xs text-gray-500 mt-0.5"${_scopeId}>Sturdier, but changes the locator style</p></div>`);
+                _push2(`<div class="flex-1 min-w-0"${_scopeId}><p class="text-xs font-medium text-success-600 dark:text-success-400"${_scopeId}> Most stable option (score: ${ssrInterpolate(unref(recommendation).durable.score)}) </p>`);
+                _push2(ssrRenderComponent(_component_LocatorCode, {
+                  locator: unref(recommendation).durable.locator,
+                  truncate: "",
+                  class: "text-sm mt-0.5"
+                }, null, _parent2, _scopeId));
+                _push2(`<p class="text-xs text-gray-500 mt-0.5"${_scopeId}>Sturdier, but changes the locator style</p></div>`);
                 _push2(ssrRenderComponent(_component_UButton, {
                   size: "sm",
                   color: "neutral",
@@ -2708,7 +3174,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                         _: 1
                       })
                     ]),
-                    createVNode("code", { class: "text-sm font-mono block truncate mt-0.5" }, toDisplayString(unref(userPick).locator), 1)
+                    createVNode(_component_LocatorCode, {
+                      locator: unref(userPick).locator,
+                      truncate: "",
+                      class: "text-sm mt-0.5"
+                    }, null, 8, ["locator"])
                   ]),
                   createVNode(_component_UButton, {
                     size: "sm",
@@ -2785,7 +3255,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                       patch: unref(suggestedEdit).patch
                     }, null, 8, ["patch"])
                   ])) : (openBlock(), createBlock(Fragment, { key: 1 }, [
-                    createVNode("code", { class: "text-sm font-mono block truncate" }, toDisplayString(unref(recommended).locator), 1),
+                    createVNode(_component_LocatorCode, {
+                      locator: unref(recommended).locator,
+                      truncate: "",
+                      class: "text-sm"
+                    }, null, 8, ["locator"]),
                     unref(argChanges).length ? (openBlock(), createBlock("p", {
                       key: 0,
                       class: "text-xs flex flex-wrap items-center gap-x-1.5 gap-y-0.5"
@@ -2867,7 +3341,11 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
                   }),
                   createVNode("div", { class: "flex-1 min-w-0" }, [
                     createVNode("p", { class: "text-xs font-medium text-success-600 dark:text-success-400" }, " Most stable option (score: " + toDisplayString(unref(recommendation).durable.score) + ") ", 1),
-                    createVNode("code", { class: "text-sm font-mono block truncate mt-0.5" }, toDisplayString(unref(recommendation).durable.locator), 1),
+                    createVNode(_component_LocatorCode, {
+                      locator: unref(recommendation).durable.locator,
+                      truncate: "",
+                      class: "text-sm mt-0.5"
+                    }, null, 8, ["locator"]),
                     createVNode("p", { class: "text-xs text-gray-500 mt-0.5" }, "Sturdier, but changes the locator style")
                   ]),
                   createVNode(_component_UButton, {
@@ -2967,16 +3445,20 @@ const _sfc_main$d = /* @__PURE__ */ defineComponent({
             fn: withCtx((_, _push2, _parent2, _scopeId) => {
               if (_push2) {
                 if (unref(recommendation)?.recommended) {
-                  _push2(`<code class="text-xs font-mono"${_scopeId}>${ssrInterpolate(unref(recommendation).recommended.locator)}</code>`);
+                  _push2(ssrRenderComponent(_component_LocatorCode, {
+                    locator: unref(recommendation).recommended.locator,
+                    class: "text-xs"
+                  }, null, _parent2, _scopeId));
                 } else {
                   _push2(`<span${_scopeId}>${ssrInterpolate(unref(alternatives).length)} alternative${ssrInterpolate(unref(alternatives).length === 1 ? "" : "s")}</span>`);
                 }
               } else {
                 return [
-                  unref(recommendation)?.recommended ? (openBlock(), createBlock("code", {
+                  unref(recommendation)?.recommended ? (openBlock(), createBlock(_component_LocatorCode, {
                     key: 0,
-                    class: "text-xs font-mono"
-                  }, toDisplayString(unref(recommendation).recommended.locator), 1)) : (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(alternatives).length) + " alternative" + toDisplayString(unref(alternatives).length === 1 ? "" : "s"), 1))
+                    locator: unref(recommendation).recommended.locator,
+                    class: "text-xs"
+                  }, null, 8, ["locator"])) : (openBlock(), createBlock("span", { key: 1 }, toDisplayString(unref(alternatives).length) + " alternative" + toDisplayString(unref(alternatives).length === 1 ? "" : "s"), 1))
                 ];
               }
             }),
@@ -3287,7 +3769,7 @@ _sfc_main$d.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/LocatorHealingPanel.vue");
   return _sfc_setup$d ? _sfc_setup$d(props, ctx) : void 0;
 };
-const __nuxt_component_18 = Object.assign(_sfc_main$d, { __name: "LocatorHealingPanel" });
+const __nuxt_component_19 = Object.assign(_sfc_main$d, { __name: "LocatorHealingPanel" });
 const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "EnvironmentDiffCard",
   __ssrInlineRender: true,
@@ -3298,7 +3780,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const cardComponent = computed(() => props.storageKey ? __nuxt_component_24 : __nuxt_component_11);
+    const cardComponent = computed(() => props.storageKey ? __nuxt_component_25 : __nuxt_component_11);
     const cardBind = computed(() => props.storageKey ? { storageKey: props.storageKey } : {});
     const {
       data: diff,
@@ -3328,7 +3810,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
     const card = ref(null);
     __expose({ reveal: () => card.value?.reveal?.() });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_UAlert = _sfc_main$k;
+      const _component_UAlert = _sfc_main$l;
       const _component_UIcon = _sfc_main$p;
       if (!unref(pending) && !unref(error) && unref(diff)?.status === "ok") {
         ssrRenderVNode(_push, createVNode(resolveDynamicComponent(unref(cardComponent)), mergeProps({
@@ -3452,7 +3934,7 @@ _sfc_main$c.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/shared/EnvironmentDiffCard.vue");
   return _sfc_setup$c ? _sfc_setup$c(props, ctx) : void 0;
 };
-const __nuxt_component_19 = Object.assign(_sfc_main$c, { __name: "EnvironmentDiffCard" });
+const __nuxt_component_20 = Object.assign(_sfc_main$c, { __name: "EnvironmentDiffCard" });
 const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "ScreenshotLightbox",
   __ssrInlineRender: true,
@@ -3528,7 +4010,7 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const cardComponent = computed(() => props.storageKey ? __nuxt_component_24 : __nuxt_component_11);
+    const cardComponent = computed(() => props.storageKey ? __nuxt_component_25 : __nuxt_component_11);
     const cardBind = computed(() => props.storageKey ? { storageKey: props.storageKey } : {});
     const config = useRuntimeConfig();
     const {
@@ -3576,8 +4058,8 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
     __expose({ reveal: () => card.value?.reveal?.() });
     return (_ctx, _push, _parent, _attrs) => {
       const _component_UBadge = _sfc_main$7$1;
-      const _component_UAlert = _sfc_main$k;
-      const _component_UTabs = _sfc_main$l;
+      const _component_UAlert = _sfc_main$l;
+      const _component_UTabs = _sfc_main$m;
       const _component_ScreenshotLightbox = __nuxt_component_4$2;
       if (!unref(pending) && !unref(error) && unref(diff)) {
         ssrRenderVNode(_push, createVNode(resolveDynamicComponent(unref(cardComponent)), mergeProps({
@@ -3781,7 +4263,7 @@ _sfc_main$a.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/VisualDiffCard.vue");
   return _sfc_setup$a ? _sfc_setup$a(props, ctx) : void 0;
 };
-const __nuxt_component_20 = Object.assign(_sfc_main$a, { __name: "VisualDiffCard" });
+const __nuxt_component_21 = Object.assign(_sfc_main$a, { __name: "VisualDiffCard" });
 const DISPLAY_CAP = 2e4;
 const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "DomSnapshotCard",
@@ -3793,7 +4275,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   },
   setup(__props, { expose: __expose }) {
     const props = __props;
-    const cardComponent = computed(() => props.storageKey ? __nuxt_component_24 : __nuxt_component_11);
+    const cardComponent = computed(() => props.storageKey ? __nuxt_component_25 : __nuxt_component_11);
     const cardBind = computed(() => props.storageKey ? { storageKey: props.storageKey } : {});
     const {
       data: snapshot,
@@ -3819,7 +4301,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     const card = ref(null);
     __expose({ reveal: () => card.value?.reveal?.() });
     return (_ctx, _push, _parent, _attrs) => {
-      const _component_UTooltip = _sfc_main$m;
+      const _component_UTooltip = _sfc_main$n;
       const _component_UButton = _sfc_main$k$1;
       const _component_CodeBlock = __nuxt_component_5;
       if (!unref(pending) && !unref(error) && unref(snapshot)?.status === "ok" && unref(snapshot).html) {
@@ -3947,7 +4429,7 @@ _sfc_main$9.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/DomSnapshotCard.vue");
   return _sfc_setup$9 ? _sfc_setup$9(props, ctx) : void 0;
 };
-const __nuxt_component_26 = Object.assign(_sfc_main$9, { __name: "DomSnapshotCard" });
+const __nuxt_component_27 = Object.assign(_sfc_main$9, { __name: "DomSnapshotCard" });
 const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "TestEvidenceSection",
   __ssrInlineRender: true,
@@ -4615,7 +5097,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const cardComponent = computed(() => props.plain ? "div" : props.storageKey ? __nuxt_component_24 : __nuxt_component_11);
+    const cardComponent = computed(() => props.plain ? "div" : props.storageKey ? __nuxt_component_25 : __nuxt_component_11);
     const cardBind = computed(
       () => props.plain ? {} : {
         icon: "i-lucide-database",
@@ -4775,7 +5257,7 @@ _sfc_main.setup = (props, ctx) => {
   (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("components/test-case/PageStateCard.vue");
   return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
 };
-const __nuxt_component_23 = Object.assign(_sfc_main, { __name: "PageStateCard" });
+const __nuxt_component_24 = Object.assign(_sfc_main, { __name: "PageStateCard" });
 function useCopyRich(options = {}) {
   const copied = ref(false);
   const toast = useToast();
@@ -4812,5 +5294,5 @@ function useCopyRich(options = {}) {
   return { copyRich, copied };
 }
 
-export { __nuxt_component_24 as _, __nuxt_component_18 as a, __nuxt_component_19 as b, __nuxt_component_20 as c, __nuxt_component_26 as d, __nuxt_component_6$1 as e, isVideoFile as f, __nuxt_component_1$1 as g, __nuxt_component_2 as h, isImageFile as i, __nuxt_component_3$1 as j, __nuxt_component_4$1 as k, __nuxt_component_3 as l, __nuxt_component_4 as m, __nuxt_component_23 as n, __nuxt_component_1$2 as o, __nuxt_component_1 as p, __nuxt_component_3$2 as q, __nuxt_component_4$2 as r, stripAnsi as s, useCopyRich as u };
-//# sourceMappingURL=useCopyRich-BemRsKgv.mjs.map
+export { __nuxt_component_25 as _, __nuxt_component_19 as a, __nuxt_component_20 as b, __nuxt_component_21 as c, __nuxt_component_27 as d, __nuxt_component_6 as e, isVideoFile as f, __nuxt_component_1$1 as g, __nuxt_component_2 as h, isImageFile as i, __nuxt_component_3$1 as j, __nuxt_component_4$1 as k, __nuxt_component_3 as l, __nuxt_component_4 as m, __nuxt_component_24 as n, __nuxt_component_1$2 as o, __nuxt_component_1 as p, __nuxt_component_3$2 as q, __nuxt_component_4$2 as r, stripAnsi as s, useCopyRich as u };
+//# sourceMappingURL=useCopyRich-Cd5Yj_Wy.mjs.map