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

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

@@ -1,615 +0,0 @@
-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}`;
-        }
-    }
-    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);
-    }
-    function isFormControl(element) {
-        return ['input', 'textarea', 'select'].includes(element.tagName.toLowerCase());
-    }
-    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 '';
-    }
-    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)}"]`);
-        }
-        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: `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',
-        };
-    }
-    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;
-        background-color: rgba(15, 118, 110, 0.12) !important;
-        cursor: crosshair !important;
-      }
-
-      html.${ACTIVE_CLASS},
-      html.${ACTIVE_CLASS} * {
-        cursor: crosshair !important;
-      }
-
-      #${ROOT_ID} {
-        position: fixed;
-        right: 20px;
-        bottom: 20px;
-        z-index: 2147483647;
-        width: min(360px, calc(100vw - 32px));
-        padding: 16px;
-        border-radius: 18px;
-        border: 1px solid rgba(15, 23, 42, 0.14);
-        background: rgba(255, 255, 255, 0.96);
-        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
-        backdrop-filter: blur(12px);
-        color: #0f172a;
-        font-family: "Segoe UI", "Helvetica Neue", sans-serif;
-      }
-
-      #${ROOT_ID} * {
-        box-sizing: border-box;
-        font-family: inherit;
-      }
-
-      #${ROOT_ID} .appraise-picker-heading {
-        margin: 0 0 6px;
-        font-size: 15px;
-        font-weight: 700;
-      }
-
-      #${ROOT_ID} .appraise-picker-copy {
-        margin: 0;
-        color: #475569;
-        font-size: 12px;
-        line-height: 1.45;
-      }
-
-      #${ROOT_ID} .appraise-picker-status {
-        margin: 10px 0 0;
-        color: #0f766e;
-        font-size: 12px;
-        font-weight: 600;
-      }
-
-      #${ROOT_ID} .appraise-picker-card {
-        margin-top: 14px;
-        padding: 12px;
-        border-radius: 14px;
-        background: #f8fafc;
-        border: 1px solid rgba(148, 163, 184, 0.25);
-      }
-
-      #${ROOT_ID} .appraise-picker-label {
-        display: block;
-        margin-bottom: 6px;
-        color: #334155;
-        font-size: 11px;
-        font-weight: 700;
-        letter-spacing: 0.04em;
-        text-transform: uppercase;
-      }
-
-      #${ROOT_ID} .appraise-picker-value {
-        margin: 0;
-        color: #0f172a;
-        font-size: 12px;
-        line-height: 1.5;
-        white-space: pre-wrap;
-        word-break: break-word;
-      }
-
-      #${ROOT_ID} .appraise-picker-actions {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 8px;
-        margin-top: 14px;
-      }
-
-      #${ROOT_ID} button {
-        border: none;
-        border-radius: 999px;
-        padding: 10px 14px;
-        font-size: 12px;
-        font-weight: 700;
-        cursor: pointer;
-      }
-
-      #${ROOT_ID} button:disabled {
-        cursor: not-allowed;
-        opacity: 0.6;
-      }
-
-      #${ROOT_ID} .appraise-picker-primary {
-        background: #0f766e;
-        color: #ffffff;
-      }
-
-      #${ROOT_ID} .appraise-picker-secondary {
-        background: #e2e8f0;
-        color: #0f172a;
-      }
-
-      #${ROOT_ID} .appraise-picker-error {
-        margin: 10px 0 0;
-        color: #b91c1c;
-        font-size: 12px;
-        line-height: 1.4;
-      }
-    `;
-        document.documentElement.appendChild(style);
-    }
-    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);
-        })
-            .catch(error => {
-            state.error = error instanceof Error ? error.message : 'Unable to inspect that element.';
-            setPicking(false);
-        });
-    }, true);
-    installOrRender();
-}

package/templates/default/packages/locator-picker-companion/dist/launcher.d.ts

@@ -1,11 +0,0 @@
-export declare function getLocatorPickerCompanionPaths(repoRoot?: string): {
-    packageRoot: string;
-    sourceRoot: string;
-    distCliPath: string;
-    tsconfigPath: string;
-    tscCliPath: string;
-};
-export declare function resolveLocatorPickerCompanionInvocation(cliArgs: string[], repoRoot?: string): Promise<{
-    command: string;
-    args: string[];
-}>;

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

@@ -1,59 +0,0 @@
-import { access, readdir, stat } from 'fs/promises';
-import { execa } from 'execa';
-import path from 'path';
-async function pathExists(targetPath) {
-    try {
-        await access(targetPath);
-        return true;
-    }
-    catch (_a) {
-        return false;
-    }
-}
-async function getLatestModifiedTime(targetPath) {
-    const stats = await stat(targetPath);
-    if (!stats.isDirectory()) {
-        return stats.mtimeMs;
-    }
-    const entries = await readdir(targetPath, { withFileTypes: true });
-    const times = await Promise.all(entries.map(entry => getLatestModifiedTime(path.join(targetPath, entry.name))));
-    return Math.max(stats.mtimeMs, ...times);
-}
-export function getLocatorPickerCompanionPaths(repoRoot = process.cwd()) {
-    const packageRoot = path.join(repoRoot, 'packages', 'locator-picker-companion');
-    return {
-        packageRoot,
-        sourceRoot: path.join(packageRoot, 'src'),
-        distCliPath: path.join(packageRoot, 'dist', 'cli.js'),
-        tsconfigPath: path.join(packageRoot, 'tsconfig.json'),
-        tscCliPath: path.join(repoRoot, 'node_modules', 'typescript', 'bin', 'tsc'),
-    };
-}
-async function ensureLocatorPickerCompanionBuilt(repoRoot = process.cwd()) {
-    const { distCliPath, sourceRoot, tsconfigPath, tscCliPath } = getLocatorPickerCompanionPaths(repoRoot);
-    if (await pathExists(distCliPath)) {
-        const [distMtime, srcMtime] = await Promise.all([
-            getLatestModifiedTime(distCliPath),
-            getLatestModifiedTime(sourceRoot),
-        ]);
-        if (distMtime >= srcMtime) {
-            return distCliPath;
-        }
-    }
-    await execa(process.execPath, [tscCliPath, '-p', tsconfigPath], {
-        cwd: repoRoot,
-        env: process.env,
-        stdio: 'pipe',
-    });
-    if (!(await pathExists(distCliPath))) {
-        throw new Error('Locator picker companion build completed without producing dist/cli.js.');
-    }
-    return distCliPath;
-}
-export async function resolveLocatorPickerCompanionInvocation(cliArgs, repoRoot = process.cwd()) {
-    const distCliPath = await ensureLocatorPickerCompanionBuilt(repoRoot);
-    return {
-        command: process.execPath,
-        args: [distCliPath, ...cliArgs],
-    };
-}

package/templates/default/packages/locator-picker-companion/dist/selector-generator.d.ts

@@ -1,3 +0,0 @@
-import type { ElementHandle, Page } from 'playwright';
-import type { CompanionPickedLocatorPayload } from './types.js';
-export declare function generatePickedLocatorPayload(page: Page, elementHandle: ElementHandle): Promise<CompanionPickedLocatorPayload>;