create-appraisejs 0.3.1-alpha.0 → 0.3.1-alpha.1

package/templates/default/packages/locator-picker-companion/dist/injected-picker-script.js

@@ -1,288 +1,300 @@
 export function installLocatorPickerOverlay() {
-    var _a;
-    const globalState = window;
-    const ROOT_ID = 'appraise-locator-picker-root';
-    const STYLE_ID = 'appraise-locator-picker-style';
-    const HOVER_CLASS = 'appraise-locator-picker-hover';
-    const ACTIVE_CLASS = 'appraise-locator-picker-active';
-    const state = (_a = globalState.__appraiseLocatorPickerState) !== null && _a !== void 0 ? _a : (globalState.__appraiseLocatorPickerState = {
-        picking: false,
-        submitting: false,
-        hoveredElement: null,
-        preview: null,
-        error: '',
-        elements: {},
-    });
-    function stopOverlayEvent(event) {
-        event.preventDefault();
-        event.stopPropagation();
-    }
-    function normalizeText(value) {
-        return (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim();
-    }
-    function escapeForCss(value) {
-        return value.replace(/[^a-zA-Z0-9_-]/g, match => `\\${match}`);
-    }
-    function escapeForSelectorText(value) {
-        return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-    }
-    function normalizeRoute(value) {
-        if (!value) {
-            return '/';
-        }
-        try {
-            return new URL(value).pathname || '/';
-        }
-        catch (_a) {
-            return value.startsWith('/') ? value : `/${value}`;
-        }
+  var _a
+  const globalState = window
+  const ROOT_ID = 'appraise-locator-picker-root'
+  const STYLE_ID = 'appraise-locator-picker-style'
+  const HOVER_CLASS = 'appraise-locator-picker-hover'
+  const ACTIVE_CLASS = 'appraise-locator-picker-active'
+  const state =
+    (_a = globalState.__appraiseLocatorPickerState) !== null && _a !== void 0
+      ? _a
+      : (globalState.__appraiseLocatorPickerState = {
+          picking: false,
+          submitting: false,
+          hoveredElement: null,
+          preview: null,
+          error: '',
+          elements: {},
+        })
+  function stopOverlayEvent(event) {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+  function normalizeText(value) {
+    return (value !== null && value !== void 0 ? value : '').replace(/\s+/g, ' ').trim()
+  }
+  function escapeForCss(value) {
+    return value.replace(/[^a-zA-Z0-9_-]/g, match => `\\${match}`)
+  }
+  function escapeForSelectorText(value) {
+    return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"')
+  }
+  function normalizeRoute(value) {
+    if (!value) {
+      return '/'
     }
-    function isLikelyStableIdentifier(value) {
-        if (!value) {
-            return false;
-        }
-        const normalized = value.trim();
-        if (!normalized || normalized.length > 120) {
-            return false;
-        }
-        return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized);
+    try {
+      return new URL(value).pathname || '/'
+    } catch (_a) {
+      return value.startsWith('/') ? value : `/${value}`
     }
-    function isFormControl(element) {
-        return ['input', 'textarea', 'select'].includes(element.tagName.toLowerCase());
+  }
+  function isLikelyStableIdentifier(value) {
+    if (!value) {
+      return false
     }
-    function getLabelText(element) {
-        if (!isFormControl(element)) {
-            return '';
-        }
-        const input = element;
-        if (input.labels && input.labels.length > 0) {
-            return normalizeText(Array.from(input.labels)
-                .map(label => label.textContent || '')
-                .join(' '));
-        }
-        return '';
+    const normalized = value.trim()
+    if (!normalized || normalized.length > 120) {
+      return false
     }
-    function getAccessibleName(element) {
-        const ariaLabel = normalizeText(element.getAttribute('aria-label'));
-        if (ariaLabel) {
-            return ariaLabel;
-        }
-        const labelledBy = normalizeText(element.getAttribute('aria-labelledby'));
-        if (labelledBy) {
-            const text = labelledBy
-                .split(/\s+/)
-                .map(id => { var _a; return ((_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.textContent) || ''; })
-                .join(' ');
-            const normalized = normalizeText(text);
-            if (normalized) {
-                return normalized;
-            }
-        }
-        const labelText = getLabelText(element);
-        if (labelText) {
-            return labelText;
-        }
-        const alt = normalizeText(element.getAttribute('alt'));
-        if (alt) {
-            return alt;
-        }
-        const title = normalizeText(element.getAttribute('title'));
-        if (title) {
-            return title;
-        }
-        const placeholder = normalizeText(element.getAttribute('placeholder'));
-        if (placeholder) {
-            return placeholder;
-        }
-        return normalizeText(element.textContent).slice(0, 240);
+    return !/\d{4,}/.test(normalized) && !/[A-Fa-f0-9]{8,}/.test(normalized)
+  }
+  function isFormControl(element) {
+    return ['input', 'textarea', 'select'].includes(element.tagName.toLowerCase())
+  }
+  function getLabelText(element) {
+    if (!isFormControl(element)) {
+      return ''
     }
-    function getRole(element) {
-        const explicitRole = normalizeText(element.getAttribute('role'));
-        if (explicitRole) {
-            return explicitRole;
-        }
-        const tagName = element.tagName.toLowerCase();
-        if (tagName === 'button') {
-            return 'button';
-        }
-        if (tagName === 'a' && element.hasAttribute('href')) {
-            return 'link';
-        }
-        if (tagName === 'textarea') {
-            return 'textbox';
-        }
-        if (tagName === 'select') {
-            return 'combobox';
-        }
-        if (tagName === 'img') {
-            return 'img';
-        }
-        if (tagName === 'input') {
-            const type = (element.getAttribute('type') || 'text').toLowerCase();
-            if (['button', 'submit', 'reset'].includes(type)) {
-                return 'button';
-            }
-            if (type === 'checkbox') {
-                return 'checkbox';
-            }
-            if (type === 'radio') {
-                return 'radio';
-            }
-            return 'textbox';
-        }
-        return '';
-    }
-    function countRoleNameMatches(role, accessibleName) {
-        let count = 0;
-        for (const candidate of Array.from(document.querySelectorAll('*'))) {
-            if (getRole(candidate) !== role) {
-                continue;
-            }
-            if (getAccessibleName(candidate) !== accessibleName) {
-                continue;
-            }
-            count += 1;
-            if (count > 1) {
-                break;
-            }
-        }
-        return count;
-    }
-    function buildCssSelector(element) {
-        const tagName = element.tagName.toLowerCase();
-        const name = element.getAttribute('name');
-        const type = element.getAttribute('type');
-        const ariaLabel = element.getAttribute('aria-label');
-        const parts = [tagName];
-        if (isLikelyStableIdentifier(name)) {
-            parts.push(`[name="${escapeForSelectorText(name)}"]`);
-        }
-        if (isLikelyStableIdentifier(type)) {
-            parts.push(`[type="${escapeForSelectorText(type)}"]`);
-        }
-        if (isLikelyStableIdentifier(ariaLabel)) {
-            parts.push(`[aria-label="${escapeForSelectorText(ariaLabel)}"]`);
-        }
-        if (parts.length === 1) {
-            const stableClasses = Array.from(element.classList || []).filter(isLikelyStableIdentifier).slice(0, 2);
-            if (stableClasses.length > 0) {
-                parts.push(...stableClasses.map(className => `.${escapeForCss(className)}`));
-            }
-        }
-        return parts.length > 1 ? `css=${parts.join('')}` : '';
+    const input = element
+    if (input.labels && input.labels.length > 0) {
+      return normalizeText(
+        Array.from(input.labels)
+          .map(label => label.textContent || '')
+          .join(' '),
+      )
     }
-    function buildXPathSelector(element, text) {
-        const tagName = element.tagName.toLowerCase();
-        const id = element.getAttribute('id');
-        if (id) {
-            return `xpath=//*[@id="${id.replace(/"/g, '\\"')}"]`;
-        }
-        if (text) {
-            return `xpath=//${tagName}[normalize-space()="${text.replace(/"/g, '\\"')}"]`;
-        }
-        return `xpath=//${tagName}`;
-    }
-    function buildPrimarySelector(element) {
-        for (const attributeName of ['data-testid', 'data-test', 'data-qa']) {
-            const value = element.getAttribute(attributeName);
-            if (isLikelyStableIdentifier(value)) {
-                return {
-                    selector: `css=[${attributeName}="${escapeForSelectorText(value)}"]`,
-                    strategy: 'test-id',
-                };
-            }
-        }
-        const accessibleName = getAccessibleName(element);
-        const role = getRole(element);
-        if (role && accessibleName && countRoleNameMatches(role, accessibleName) === 1) {
-            return {
-                selector: `role=${role}[name="${escapeForSelectorText(accessibleName)}"]`,
-                strategy: 'role',
-            };
-        }
-        const labelText = getLabelText(element);
-        if (labelText) {
-            return {
-                selector: `label="${escapeForSelectorText(labelText)}"`,
-                strategy: 'label',
-            };
-        }
-        const placeholder = normalizeText(element.getAttribute('placeholder'));
-        if (placeholder) {
-            return {
-                selector: `placeholder="${escapeForSelectorText(placeholder)}"`,
-                strategy: 'placeholder',
-            };
-        }
-        const id = element.getAttribute('id');
-        if (isLikelyStableIdentifier(id)) {
-            return {
-                selector: `css=#${escapeForCss(id)}`,
-                strategy: 'id',
-            };
-        }
-        const cssSelector = buildCssSelector(element);
-        if (cssSelector) {
-            return {
-                selector: cssSelector,
-                strategy: 'css',
-            };
-        }
-        return {
-            selector: buildXPathSelector(element, normalizeText(element.textContent).slice(0, 120)),
-            strategy: 'xpath',
-        };
+    return ''
+  }
+  function getAccessibleName(element) {
+    const ariaLabel = normalizeText(element.getAttribute('aria-label'))
+    if (ariaLabel) {
+      return ariaLabel
+    }
+    const labelledBy = normalizeText(element.getAttribute('aria-labelledby'))
+    if (labelledBy) {
+      const text = labelledBy
+        .split(/\s+/)
+        .map(id => {
+          var _a
+          return ((_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.textContent) || ''
+        })
+        .join(' ')
+      const normalized = normalizeText(text)
+      if (normalized) {
+        return normalized
+      }
+    }
+    const labelText = getLabelText(element)
+    if (labelText) {
+      return labelText
+    }
+    const alt = normalizeText(element.getAttribute('alt'))
+    if (alt) {
+      return alt
+    }
+    const title = normalizeText(element.getAttribute('title'))
+    if (title) {
+      return title
+    }
+    const placeholder = normalizeText(element.getAttribute('placeholder'))
+    if (placeholder) {
+      return placeholder
+    }
+    return normalizeText(element.textContent).slice(0, 240)
+  }
+  function getRole(element) {
+    const explicitRole = normalizeText(element.getAttribute('role'))
+    if (explicitRole) {
+      return explicitRole
+    }
+    const tagName = element.tagName.toLowerCase()
+    if (tagName === 'button') {
+      return 'button'
+    }
+    if (tagName === 'a' && element.hasAttribute('href')) {
+      return 'link'
+    }
+    if (tagName === 'textarea') {
+      return 'textbox'
+    }
+    if (tagName === 'select') {
+      return 'combobox'
+    }
+    if (tagName === 'img') {
+      return 'img'
+    }
+    if (tagName === 'input') {
+      const type = (element.getAttribute('type') || 'text').toLowerCase()
+      if (['button', 'submit', 'reset'].includes(type)) {
+        return 'button'
+      }
+      if (type === 'checkbox') {
+        return 'checkbox'
+      }
+      if (type === 'radio') {
+        return 'radio'
+      }
+      return 'textbox'
+    }
+    return ''
+  }
+  function countRoleNameMatches(role, accessibleName) {
+    let count = 0
+    for (const candidate of Array.from(document.querySelectorAll('*'))) {
+      if (getRole(candidate) !== role) {
+        continue
+      }
+      if (getAccessibleName(candidate) !== accessibleName) {
+        continue
+      }
+      count += 1
+      if (count > 1) {
+        break
+      }
+    }
+    return count
+  }
+  function buildCssSelector(element) {
+    const tagName = element.tagName.toLowerCase()
+    const name = element.getAttribute('name')
+    const type = element.getAttribute('type')
+    const ariaLabel = element.getAttribute('aria-label')
+    const parts = [tagName]
+    if (isLikelyStableIdentifier(name)) {
+      parts.push(`[name="${escapeForSelectorText(name)}"]`)
     }
-    function buildPreviewPayload(element) {
-        const selection = buildPrimarySelector(element);
+    if (isLikelyStableIdentifier(type)) {
+      parts.push(`[type="${escapeForSelectorText(type)}"]`)
+    }
+    if (isLikelyStableIdentifier(ariaLabel)) {
+      parts.push(`[aria-label="${escapeForSelectorText(ariaLabel)}"]`)
+    }
+    if (parts.length === 1) {
+      const stableClasses = Array.from(element.classList || [])
+        .filter(isLikelyStableIdentifier)
+        .slice(0, 2)
+      if (stableClasses.length > 0) {
+        parts.push(...stableClasses.map(className => `.${escapeForCss(className)}`))
+      }
+    }
+    return parts.length > 1 ? `css=${parts.join('')}` : ''
+  }
+  function buildXPathSelector(element, text) {
+    const tagName = element.tagName.toLowerCase()
+    const id = element.getAttribute('id')
+    if (id) {
+      return `xpath=//*[@id="${id.replace(/"/g, '\\"')}"]`
+    }
+    if (text) {
+      return `xpath=//${tagName}[normalize-space()="${text.replace(/"/g, '\\"')}"]`
+    }
+    return `xpath=//${tagName}`
+  }
+  function buildPrimarySelector(element) {
+    for (const attributeName of ['data-testid', 'data-test', 'data-qa']) {
+      const value = element.getAttribute(attributeName)
+      if (isLikelyStableIdentifier(value)) {
         return {
-            selector: selection.selector,
-            strategy: selection.strategy,
-            currentUrl: window.location.href,
-            pathname: normalizeRoute(window.location.href),
-            pageTitle: document.title || '',
-            tagName: element.tagName.toLowerCase(),
-            text: normalizeText(element.textContent).slice(0, 240) || undefined,
-            accessibleName: getAccessibleName(element) || undefined,
-        };
-    }
-    function clearHover() {
-        if (state.hoveredElement instanceof Element) {
-            state.hoveredElement.classList.remove(HOVER_CLASS);
+          selector: `css=[${attributeName}="${escapeForSelectorText(value)}"]`,
+          strategy: 'test-id',
         }
-        state.hoveredElement = null;
+      }
     }
-    function setPicking(enabled) {
-        state.picking = enabled;
-        document.documentElement.classList.toggle(ACTIVE_CLASS, enabled);
-        if (!enabled) {
-            clearHover();
-        }
-        render();
+    const accessibleName = getAccessibleName(element)
+    const role = getRole(element)
+    if (role && accessibleName && countRoleNameMatches(role, accessibleName) === 1) {
+      return {
+        selector: `role=${role}[name="${escapeForSelectorText(accessibleName)}"]`,
+        strategy: 'role',
+      }
     }
-    function resolveElement(target) {
-        if (target instanceof Element) {
-            return target;
-        }
-        if (target instanceof Node) {
-            return target.parentElement;
-        }
-        return null;
+    const labelText = getLabelText(element)
+    if (labelText) {
+      return {
+        selector: `label="${escapeForSelectorText(labelText)}"`,
+        strategy: 'label',
+      }
     }
-    function getMountTarget() {
-        var _a, _b;
-        return (_b = (_a = document.body) !== null && _a !== void 0 ? _a : document.documentElement) !== null && _b !== void 0 ? _b : null;
+    const placeholder = normalizeText(element.getAttribute('placeholder'))
+    if (placeholder) {
+      return {
+        selector: `placeholder="${escapeForSelectorText(placeholder)}"`,
+        strategy: 'placeholder',
+      }
     }
-    function ensureStyle() {
-        if (!document.documentElement) {
-            return;
-        }
-        if (document.getElementById(STYLE_ID)) {
-            return;
-        }
-        const style = document.createElement('style');
-        style.id = STYLE_ID;
-        style.textContent = `
+    const id = element.getAttribute('id')
+    if (isLikelyStableIdentifier(id)) {
+      return {
+        selector: `css=#${escapeForCss(id)}`,
+        strategy: 'id',
+      }
+    }
+    const cssSelector = buildCssSelector(element)
+    if (cssSelector) {
+      return {
+        selector: cssSelector,
+        strategy: 'css',
+      }
+    }
+    return {
+      selector: buildXPathSelector(element, normalizeText(element.textContent).slice(0, 120)),
+      strategy: 'xpath',
+    }
+  }
+  function buildPreviewPayload(element) {
+    const selection = buildPrimarySelector(element)
+    return {
+      selector: selection.selector,
+      strategy: selection.strategy,
+      currentUrl: window.location.href,
+      pathname: normalizeRoute(window.location.href),
+      pageTitle: document.title || '',
+      tagName: element.tagName.toLowerCase(),
+      text: normalizeText(element.textContent).slice(0, 240) || undefined,
+      accessibleName: getAccessibleName(element) || undefined,
+    }
+  }
+  function clearHover() {
+    if (state.hoveredElement instanceof Element) {
+      state.hoveredElement.classList.remove(HOVER_CLASS)
+    }
+    state.hoveredElement = null
+  }
+  function setPicking(enabled) {
+    state.picking = enabled
+    document.documentElement.classList.toggle(ACTIVE_CLASS, enabled)
+    if (!enabled) {
+      clearHover()
+    }
+    render()
+  }
+  function resolveElement(target) {
+    if (target instanceof Element) {
+      return target
+    }
+    if (target instanceof Node) {
+      return target.parentElement
+    }
+    return null
+  }
+  function getMountTarget() {
+    var _a, _b
+    return (_b = (_a = document.body) !== null && _a !== void 0 ? _a : document.documentElement) !== null &&
+      _b !== void 0
+      ? _b
+      : null
+  }
+  function ensureStyle() {
+    if (!document.documentElement) {
+      return
+    }
+    if (document.getElementById(STYLE_ID)) {
+      return
+    }
+    const style = document.createElement('style')
+    style.id = STYLE_ID
+    style.textContent = `
       .${HOVER_CLASS} {
         outline: 2px solid #0f766e !important;
         outline-offset: 2px !important;
@@ -400,216 +412,249 @@ export function installLocatorPickerOverlay() {
         font-size: 12px;
         line-height: 1.4;
       }
-    `;
-        document.documentElement.appendChild(style);
+    `
+    document.documentElement.appendChild(style)
+  }
+  function ensureRoot() {
+    var _a
+    const mountTarget = getMountTarget()
+    if (!mountTarget) {
+      return
     }
-    function ensureRoot() {
-        var _a;
-        const mountTarget = getMountTarget();
-        if (!mountTarget) {
-            return;
-        }
-        if ((_a = state.elements.root) === null || _a === void 0 ? void 0 : _a.isConnected) {
-            return;
-        }
-        const root = document.createElement('div');
-        root.id = ROOT_ID;
-        root.setAttribute('role', 'dialog');
-        root.setAttribute('aria-label', 'Appraise locator picker');
-        const heading = document.createElement('p');
-        heading.className = 'appraise-picker-heading';
-        heading.textContent = 'Appraise Locator Picker';
-        const helperText = document.createElement('p');
-        helperText.className = 'appraise-picker-copy';
-        const statusText = document.createElement('p');
-        statusText.className = 'appraise-picker-status';
-        const previewCard = document.createElement('div');
-        previewCard.className = 'appraise-picker-card';
-        const selectorLabel = document.createElement('span');
-        selectorLabel.className = 'appraise-picker-label';
-        selectorLabel.textContent = 'Selector';
-        const selectorValue = document.createElement('pre');
-        selectorValue.className = 'appraise-picker-value';
-        const metadataLabel = document.createElement('span');
-        metadataLabel.className = 'appraise-picker-label';
-        metadataLabel.textContent = 'Page';
-        const metadataValue = document.createElement('p');
-        metadataValue.className = 'appraise-picker-value';
-        previewCard.appendChild(selectorLabel);
-        previewCard.appendChild(selectorValue);
-        previewCard.appendChild(metadataLabel);
-        previewCard.appendChild(metadataValue);
-        const errorValue = document.createElement('p');
-        errorValue.className = 'appraise-picker-error';
-        const actions = document.createElement('div');
-        actions.className = 'appraise-picker-actions';
-        const startButton = document.createElement('button');
-        startButton.className = 'appraise-picker-primary';
-        startButton.type = 'button';
-        startButton.textContent = 'Start picking';
-        startButton.addEventListener('click', event => {
-            stopOverlayEvent(event);
-            state.submitting = false;
-            state.preview = null;
-            state.error = '';
-            setPicking(true);
-        });
-        const useButton = document.createElement('button');
-        useButton.className = 'appraise-picker-primary';
-        useButton.type = 'button';
-        useButton.textContent = 'Use selector';
-        useButton.addEventListener('click', event => {
-            stopOverlayEvent(event);
-            if (!state.preview || state.submitting || !globalState.__appraiseLocatorPickerConfirm) {
-                return;
-            }
-            state.submitting = true;
-            state.error = '';
-            render();
-            void globalState
-                .__appraiseLocatorPickerConfirm(state.preview)
-                .catch(error => {
-                state.error = error instanceof Error ? error.message : 'Unable to use selector.';
-            })
-                .finally(() => {
-                state.submitting = false;
-                render();
-            });
-        });
-        const pickAgainButton = document.createElement('button');
-        pickAgainButton.className = 'appraise-picker-secondary';
-        pickAgainButton.type = 'button';
-        pickAgainButton.textContent = 'Pick again';
-        pickAgainButton.addEventListener('click', event => {
-            stopOverlayEvent(event);
-            state.submitting = false;
-            state.preview = null;
-            state.error = '';
-            setPicking(true);
-        });
-        const cancelButton = document.createElement('button');
-        cancelButton.className = 'appraise-picker-secondary';
-        cancelButton.type = 'button';
-        cancelButton.textContent = 'Cancel';
-        cancelButton.addEventListener('click', event => {
-            stopOverlayEvent(event);
-            if (state.submitting || !globalState.__appraiseLocatorPickerCancel) {
-                return;
-            }
-            state.submitting = true;
-            render();
-            void globalState.__appraiseLocatorPickerCancel().catch(() => undefined);
-        });
-        actions.append(startButton, useButton, pickAgainButton, cancelButton);
-        root.append(heading, helperText, statusText, previewCard, errorValue, actions);
-        root.addEventListener('pointerdown', event => event.stopPropagation());
-        root.addEventListener('click', event => event.stopPropagation());
-        mountTarget.appendChild(root);
-        state.elements = {
-            root,
-            startButton,
-            useButton,
-            pickAgainButton,
-            cancelButton,
-            helperText,
-            statusText,
-            selectorValue,
-            metadataValue,
-            errorValue,
-        };
-    }
-    function render() {
-        var _a, _b;
-        ensureStyle();
-        ensureRoot();
-        document.documentElement.classList.toggle(ACTIVE_CLASS, state.picking);
-        if (state.hoveredElement && !state.hoveredElement.isConnected) {
-            state.hoveredElement = null;
-        }
-        const { helperText, statusText, selectorValue, metadataValue, errorValue, startButton, useButton, pickAgainButton, cancelButton } = state.elements;
-        if (!helperText || !statusText || !selectorValue || !metadataValue || !errorValue || !startButton || !useButton || !pickAgainButton || !cancelButton) {
-            return;
-        }
-        helperText.textContent = state.preview
-            ? 'Review the generated selector, then confirm it or pick a different element.'
-            : 'Start picking, hover to highlight, then click one element to preview a single generated selector.';
-        if (state.picking) {
-            statusText.textContent = 'Picking mode is on';
-        }
-        else if (state.preview) {
-            statusText.textContent = 'Selection ready';
-        }
-        else {
-            statusText.textContent = 'Waiting to start';
-        }
-        selectorValue.textContent = (_b = (_a = state.preview) === null || _a === void 0 ? void 0 : _a.selector) !== null && _b !== void 0 ? _b : 'No selector picked yet.';
-        metadataValue.textContent = state.preview
-            ? [state.preview.pageTitle || '(untitled page)', state.preview.currentUrl].filter(Boolean).join('\n')
-            : 'The selected page metadata will appear here.';
-        errorValue.textContent = state.error;
-        startButton.style.display = state.preview ? 'none' : 'inline-flex';
-        useButton.style.display = state.preview ? 'inline-flex' : 'none';
-        pickAgainButton.style.display = state.preview ? 'inline-flex' : 'none';
-        useButton.disabled = !state.preview || state.submitting;
-        pickAgainButton.disabled = state.submitting;
-        cancelButton.disabled = state.submitting;
-    }
-    function installOrRender() {
-        render();
-    }
-    if (!globalState.__appraiseLocatorPickerDomListenersBound) {
-        globalState.__appraiseLocatorPickerDomListenersBound = true;
-        document.addEventListener('DOMContentLoaded', installOrRender);
-        window.addEventListener('load', installOrRender);
-    }
-    if (globalState.__appraiseLocatorPickerInstalled) {
-        installOrRender();
-        return;
-    }
-    globalState.__appraiseLocatorPickerInstalled = true;
-    document.addEventListener('mouseover', event => {
-        if (!state.picking) {
-            return;
-        }
-        const target = resolveElement(event.target);
-        if (!target || target.closest(`#${ROOT_ID}`)) {
-            return;
-        }
-        clearHover();
-        target.classList.add(HOVER_CLASS);
-        state.hoveredElement = target;
-    }, true);
-    document.addEventListener('mouseout', event => {
-        if (!state.picking) {
-            return;
-        }
-        const target = resolveElement(event.target);
-        if (target instanceof Element) {
-            target.classList.remove(HOVER_CLASS);
-        }
-    }, true);
-    document.addEventListener('click', event => {
-        if (!state.picking) {
-            return;
-        }
-        const target = resolveElement(event.target);
-        if (!target || target.closest(`#${ROOT_ID}`)) {
-            return;
-        }
-        event.preventDefault();
-        event.stopPropagation();
-        event.stopImmediatePropagation();
-        void Promise.resolve()
-            .then(() => {
-            const preview = buildPreviewPayload(target);
-            state.preview = preview;
-            state.error = '';
-            setPicking(false);
+    if ((_a = state.elements.root) === null || _a === void 0 ? void 0 : _a.isConnected) {
+      return
+    }
+    const root = document.createElement('div')
+    root.id = ROOT_ID
+    root.setAttribute('role', 'dialog')
+    root.setAttribute('aria-label', 'Appraise locator picker')
+    const heading = document.createElement('p')
+    heading.className = 'appraise-picker-heading'
+    heading.textContent = 'Appraise Locator Picker'
+    const helperText = document.createElement('p')
+    helperText.className = 'appraise-picker-copy'
+    const statusText = document.createElement('p')
+    statusText.className = 'appraise-picker-status'
+    const previewCard = document.createElement('div')
+    previewCard.className = 'appraise-picker-card'
+    const selectorLabel = document.createElement('span')
+    selectorLabel.className = 'appraise-picker-label'
+    selectorLabel.textContent = 'Selector'
+    const selectorValue = document.createElement('pre')
+    selectorValue.className = 'appraise-picker-value'
+    const metadataLabel = document.createElement('span')
+    metadataLabel.className = 'appraise-picker-label'
+    metadataLabel.textContent = 'Page'
+    const metadataValue = document.createElement('p')
+    metadataValue.className = 'appraise-picker-value'
+    previewCard.appendChild(selectorLabel)
+    previewCard.appendChild(selectorValue)
+    previewCard.appendChild(metadataLabel)
+    previewCard.appendChild(metadataValue)
+    const errorValue = document.createElement('p')
+    errorValue.className = 'appraise-picker-error'
+    const actions = document.createElement('div')
+    actions.className = 'appraise-picker-actions'
+    const startButton = document.createElement('button')
+    startButton.className = 'appraise-picker-primary'
+    startButton.type = 'button'
+    startButton.textContent = 'Start picking'
+    startButton.addEventListener('click', event => {
+      stopOverlayEvent(event)
+      state.submitting = false
+      state.preview = null
+      state.error = ''
+      setPicking(true)
+    })
+    const useButton = document.createElement('button')
+    useButton.className = 'appraise-picker-primary'
+    useButton.type = 'button'
+    useButton.textContent = 'Use selector'
+    useButton.addEventListener('click', event => {
+      stopOverlayEvent(event)
+      if (!state.preview || state.submitting || !globalState.__appraiseLocatorPickerConfirm) {
+        return
+      }
+      state.submitting = true
+      state.error = ''
+      render()
+      void globalState
+        .__appraiseLocatorPickerConfirm(state.preview)
+        .catch(error => {
+          state.error = error instanceof Error ? error.message : 'Unable to use selector.'
+        })
+        .finally(() => {
+          state.submitting = false
+          render()
+        })
+    })
+    const pickAgainButton = document.createElement('button')
+    pickAgainButton.className = 'appraise-picker-secondary'
+    pickAgainButton.type = 'button'
+    pickAgainButton.textContent = 'Pick again'
+    pickAgainButton.addEventListener('click', event => {
+      stopOverlayEvent(event)
+      state.submitting = false
+      state.preview = null
+      state.error = ''
+      setPicking(true)
+    })
+    const cancelButton = document.createElement('button')
+    cancelButton.className = 'appraise-picker-secondary'
+    cancelButton.type = 'button'
+    cancelButton.textContent = 'Cancel'
+    cancelButton.addEventListener('click', event => {
+      stopOverlayEvent(event)
+      if (state.submitting || !globalState.__appraiseLocatorPickerCancel) {
+        return
+      }
+      state.submitting = true
+      render()
+      void globalState.__appraiseLocatorPickerCancel().catch(() => undefined)
+    })
+    actions.append(startButton, useButton, pickAgainButton, cancelButton)
+    root.append(heading, helperText, statusText, previewCard, errorValue, actions)
+    root.addEventListener('pointerdown', event => event.stopPropagation())
+    root.addEventListener('click', event => event.stopPropagation())
+    mountTarget.appendChild(root)
+    state.elements = {
+      root,
+      startButton,
+      useButton,
+      pickAgainButton,
+      cancelButton,
+      helperText,
+      statusText,
+      selectorValue,
+      metadataValue,
+      errorValue,
+    }
+  }
+  function render() {
+    var _a, _b
+    ensureStyle()
+    ensureRoot()
+    document.documentElement.classList.toggle(ACTIVE_CLASS, state.picking)
+    if (state.hoveredElement && !state.hoveredElement.isConnected) {
+      state.hoveredElement = null
+    }
+    const {
+      helperText,
+      statusText,
+      selectorValue,
+      metadataValue,
+      errorValue,
+      startButton,
+      useButton,
+      pickAgainButton,
+      cancelButton,
+    } = state.elements
+    if (
+      !helperText ||
+      !statusText ||
+      !selectorValue ||
+      !metadataValue ||
+      !errorValue ||
+      !startButton ||
+      !useButton ||
+      !pickAgainButton ||
+      !cancelButton
+    ) {
+      return
+    }
+    helperText.textContent = state.preview
+      ? 'Review the generated selector, then confirm it or pick a different element.'
+      : 'Start picking, hover to highlight, then click one element to preview a single generated selector.'
+    if (state.picking) {
+      statusText.textContent = 'Picking mode is on'
+    } else if (state.preview) {
+      statusText.textContent = 'Selection ready'
+    } else {
+      statusText.textContent = 'Waiting to start'
+    }
+    selectorValue.textContent =
+      (_b = (_a = state.preview) === null || _a === void 0 ? void 0 : _a.selector) !== null && _b !== void 0
+        ? _b
+        : 'No selector picked yet.'
+    metadataValue.textContent = state.preview
+      ? [state.preview.pageTitle || '(untitled page)', state.preview.currentUrl].filter(Boolean).join('\n')
+      : 'The selected page metadata will appear here.'
+    errorValue.textContent = state.error
+    startButton.style.display = state.preview ? 'none' : 'inline-flex'
+    useButton.style.display = state.preview ? 'inline-flex' : 'none'
+    pickAgainButton.style.display = state.preview ? 'inline-flex' : 'none'
+    useButton.disabled = !state.preview || state.submitting
+    pickAgainButton.disabled = state.submitting
+    cancelButton.disabled = state.submitting
+  }
+  function installOrRender() {
+    render()
+  }
+  if (!globalState.__appraiseLocatorPickerDomListenersBound) {
+    globalState.__appraiseLocatorPickerDomListenersBound = true
+    document.addEventListener('DOMContentLoaded', installOrRender)
+    window.addEventListener('load', installOrRender)
+  }
+  if (globalState.__appraiseLocatorPickerInstalled) {
+    installOrRender()
+    return
+  }
+  globalState.__appraiseLocatorPickerInstalled = true
+  document.addEventListener(
+    'mouseover',
+    event => {
+      if (!state.picking) {
+        return
+      }
+      const target = resolveElement(event.target)
+      if (!target || target.closest(`#${ROOT_ID}`)) {
+        return
+      }
+      clearHover()
+      target.classList.add(HOVER_CLASS)
+      state.hoveredElement = target
+    },
+    true,
+  )
+  document.addEventListener(
+    'mouseout',
+    event => {
+      if (!state.picking) {
+        return
+      }
+      const target = resolveElement(event.target)
+      if (target instanceof Element) {
+        target.classList.remove(HOVER_CLASS)
+      }
+    },
+    true,
+  )
+  document.addEventListener(
+    'click',
+    event => {
+      if (!state.picking) {
+        return
+      }
+      const target = resolveElement(event.target)
+      if (!target || target.closest(`#${ROOT_ID}`)) {
+        return
+      }
+      event.preventDefault()
+      event.stopPropagation()
+      event.stopImmediatePropagation()
+      void Promise.resolve()
+        .then(() => {
+          const preview = buildPreviewPayload(target)
+          state.preview = preview
+          state.error = ''
+          setPicking(false)
+        })
+        .catch(error => {
+          state.error = error instanceof Error ? error.message : 'Unable to inspect that element.'
+          setPicking(false)
         })
-            .catch(error => {
-            state.error = error instanceof Error ? error.message : 'Unable to inspect that element.';
-            setPicking(false);
-        });
-    }, true);
-    installOrRender();
+    },
+    true,
+  )
+  installOrRender()
 }