Dosson 0.9.10: source code

This is every file of Dosson 0.9.10 that is not minified third-party code, one after the other. The extension is
plain JavaScript with no build step, so this is what runs in your browser.

Files:
  manifest.json
  index.html
  index.js
  background.js
  mainThread.js
  frames.js
  perf.js
  disableClear.js
  security/secrets.js
  detect/detect.js
  detect/detectors.json
  detect/js/ace.js
  detect/js/aframe.js
  detect/js/ag-grid.js
  detect/js/alpine.js
  detect/js/amcharts.js
  detect/js/angular.js
  detect/js/angularjs.js
  detect/js/animejs.js
  detect/js/aos.js
  detect/js/apexcharts.js
  detect/js/astro.js
  detect/js/aura.js
  detect/js/aurelia.js
  detect/js/axios.js
  detect/js/babylon.js
  detect/js/backbone.js
  detect/js/barba.js
  detect/js/blazor.js
  detect/js/canjs.js
  detect/js/capacitor.js
  detect/js/chartjs.js
  detect/js/choices.js
  detect/js/ckeditor.js
  detect/js/cleave.js
  detect/js/clipboardjs.js
  detect/js/clojurescript.js
  detect/js/closure.js
  detect/js/codemirror.js
  detect/js/cordova.js
  detect/js/core-js.js
  detect/js/cyclejs.js
  detect/js/d3.js
  detect/js/datatables.js
  detect/js/dayjs.js
  detect/js/devextreme.js
  detect/js/docusaurus.js
  detect/js/dojo.js
  detect/js/dompurify.js
  detect/js/draftjs.js
  detect/js/dropzone.js
  detect/js/echarts.js
  detect/js/elm.js
  detect/js/ember.js
  detect/js/extjs.js
  detect/js/fabric.js
  detect/js/fancybox.js
  detect/js/filepond.js
  detect/js/flatpickr.js
  detect/js/flickity.js
  detect/js/floating-ui.js
  detect/js/flutter.js
  detect/js/framer-motion.js
  detect/js/framework7.js
  detect/js/fresh.js
  detect/js/fusejs.js
  detect/js/gatsby.js
  detect/js/glide.js
  detect/js/google-charts.js
  detect/js/google-maps.js
  detect/js/gridsome.js
  detect/js/gsap.js
  detect/js/gwt.js
  detect/js/hammerjs.js
  detect/js/handlebars.js
  detect/js/handsontable.js
  detect/js/highcharts.js
  detect/js/highlightjs.js
  detect/js/hlsjs.js
  detect/js/howler.js
  detect/js/htmx.js
  detect/js/hyperapp.js
  detect/js/immutable.js
  detect/js/inertia.js
  detect/js/inferno.js
  detect/js/inputmask.js
  detect/js/instantsearch.js
  detect/js/interactjs.js
  detect/js/intercooler.js
  detect/js/intl-tel-input.js
  detect/js/ionic.js
  detect/js/isotope.js
  detect/js/jquery.js
  detect/js/jquery-migrate.js
  detect/js/jquery-mobile.js
  detect/js/jquery-ui.js
  detect/js/jquery-validation.js
  detect/js/js-cookie.js
  detect/js/katex.js
  detect/js/kendo.js
  detect/js/knockout.js
  detect/js/konva.js
  detect/js/lazysizes.js
  detect/js/leaflet.js
  detect/js/lenis.js
  detect/js/lexical.js
  detect/js/lightbox2.js
  detect/js/lit.js
  detect/js/livewire.js
  detect/js/locomotive-scroll.js
  detect/js/lodash.js
  detect/js/lottie.js
  detect/js/lwc.js
  detect/js/mapbox-gl.js
  detect/js/maplibre.js
  detect/js/marked.js
  detect/js/marko.js
  detect/js/masonry.js
  detect/js/mathjax.js
  detect/js/mermaid.js
  detect/js/meteor.js
  detect/js/million.js
  detect/js/mithril.js
  detect/js/mobx.js
  detect/js/modernizr.js
  detect/js/moment.js
  detect/js/monaco.js
  detect/js/mootools.js
  detect/js/next.js
  detect/js/nuxt.js
  detect/js/onsen.js
  detect/js/openlayers.js
  detect/js/owl-carousel.js
  detect/js/p5.js
  detect/js/paperjs.js
  detect/js/parsley.js
  detect/js/petite-vue.js
  detect/js/phaser.js
  detect/js/phoenix-liveview.js
  detect/js/photoswipe.js
  detect/js/pikaday.js
  detect/js/pinia.js
  detect/js/pixi.js
  detect/js/plotly.js
  detect/js/plyr.js
  detect/js/polymer.js
  detect/js/popper.js
  detect/js/preact.js
  detect/js/prism.js
  detect/js/prosemirror.js
  detect/js/prototype.js
  detect/js/quill.js
  detect/js/qwik.js
  detect/js/ractive.js
  detect/js/react.js
  detect/js/react-router.js
  detect/js/recharts.js
  detect/js/redux.js
  detect/js/redwood.js
  detect/js/requirejs.js
  detect/js/riot.js
  detect/js/rxjs.js
  detect/js/scriptaculous.js
  detect/js/scrollreveal.js
  detect/js/select2.js
  detect/js/sencha-touch.js
  detect/js/slate.js
  detect/js/slick.js
  detect/js/socketio.js
  detect/js/solid.js
  detect/js/sortablejs.js
  detect/js/splide.js
  detect/js/stencil.js
  detect/js/stimulus.js
  detect/js/svelte.js
  detect/js/sveltekit.js
  detect/js/swiper.js
  detect/js/syncfusion.js
  detect/js/three.js
  detect/js/tinymce.js
  detect/js/tippy.js
  detect/js/tiptap.js
  detect/js/tom-select.js
  detect/js/turbo.js
  detect/js/turbolinks.js
  detect/js/underscore.js
  detect/js/unpoly.js
  detect/js/uppy.js
  detect/js/vaadin.js
  detect/js/velocity.js
  detect/js/videojs.js
  detect/js/vite.js
  detect/js/vitepress.js
  detect/js/vue.js
  detect/js/vue-router.js
  detect/js/vuepress.js
  detect/js/vuex.js
  detect/js/webix.js
  detect/js/webpack.js
  detect/js/wicket.js
  detect/js/yui.js
  detect/js/zepto.js
  detect/css/7css.js
  detect/css/98css.js
  detect/css/adminlte.js
  detect/css/angular-material.js
  detect/css/animate-css.js
  detect/css/antd.js
  detect/css/aphrodite.js
  detect/css/arco.js
  detect/css/atlaskit.js
  detect/css/atomizer.js
  detect/css/balloon-css.js
  detect/css/baseweb.js
  detect/css/basscss.js
  detect/css/blueprint.js
  detect/css/bootstrap.js
  detect/css/bootstrap-icons.js
  detect/css/bootstrap-reboot.js
  detect/css/bootstrap-vue.js
  detect/css/bootswatch.js
  detect/css/bourbon.js
  detect/css/boxicons.js
  detect/css/buefy.js
  detect/css/bulma.js
  detect/css/carbon.js
  detect/css/chakra.js
  detect/css/chota.js
  detect/css/cirrus.js
  detect/css/clarity.js
  detect/css/coreui.js
  detect/css/css-modules.js
  detect/css/daisyui.js
  detect/css/devextreme-themes.js
  detect/css/divi.js
  detect/css/element.js
  detect/css/elementor.js
  detect/css/emotion.js
  detect/css/eui.js
  detect/css/evergreen.js
  detect/css/feather.js
  detect/css/flowbite.js
  detect/css/fluent-ui.js
  detect/css/font-awesome.js
  detect/css/foundation.js
  detect/css/framework7-css.js
  detect/css/geist.js
  detect/css/glyphicons.js
  detect/css/goober.js
  detect/css/google-fonts.js
  detect/css/grommet.js
  detect/css/gutenberg.js
  detect/css/halfmoon.js
  detect/css/headlessui.js
  detect/css/heroicons.js
  detect/css/heroui.js
  detect/css/hint-css.js
  detect/css/hover-css.js
  detect/css/ionic-css.js
  detect/css/ionicons.js
  detect/css/jss.js
  detect/css/kendo-themes.js
  detect/css/kube.js
  detect/css/linaria.js
  detect/css/line-awesome.js
  detect/css/lucide.js
  detect/css/magic-css.js
  detect/css/mantine.js
  detect/css/material-icons.js
  detect/css/material-tailwind.js
  detect/css/material-web.js
  detect/css/materialize.js
  detect/css/mdbootstrap.js
  detect/css/mdc.js
  detect/css/mdi.js
  detect/css/mdl.js
  detect/css/milligram.js
  detect/css/mini-css.js
  detect/css/modern-normalize.js
  detect/css/mui.js
  detect/css/mvp-css.js
  detect/css/naive-ui.js
  detect/css/neat.js
  detect/css/nes-css.js
  detect/css/new-css.js
  detect/css/normalize.js
  detect/css/octicons.js
  detect/css/onsen-css.js
  detect/css/open-props.js
  detect/css/oruga.js
  detect/css/panda.js
  detect/css/papercss.js
  detect/css/patternfly.js
  detect/css/phosphor.js
  detect/css/picnic.js
  detect/css/pico.js
  detect/css/polaris.js
  detect/css/preline.js
  detect/css/prime.js
  detect/css/primer.js
  detect/css/pure.js
  detect/css/quasar.js
  detect/css/radix.js
  detect/css/react-bootstrap.js
  detect/css/reactstrap.js
  detect/css/rebass.js
  detect/css/remixicon.js
  detect/css/sakura.js
  detect/css/sanitize-css.js
  detect/css/semantic-ui.js
  detect/css/shadcn.js
  detect/css/shoelace.js
  detect/css/shopify-dawn.js
  detect/css/simple-css.js
  detect/css/simple-line-icons.js
  detect/css/skeleton.js
  detect/css/slds.js
  detect/css/spectre.js
  detect/css/spectrum.js
  detect/css/stitches.js
  detect/css/styled-components.js
  detect/css/stylex.js
  detect/css/susy.js
  detect/css/syncfusion-themes.js
  detect/css/tabler.js
  detect/css/tabler-icons.js
  detect/css/tachyons.js
  detect/css/tailwind.js
  detect/css/tdesign.js
  detect/css/theme-ui.js
  detect/css/themify.js
  detect/css/tuicss.js
  detect/css/twind.js
  detect/css/uikit.js
  detect/css/unocss.js
  detect/css/vanilla-extract.js
  detect/css/vant.js
  detect/css/view-ui.js
  detect/css/vuetify.js
  detect/css/water-css.js
  detect/css/windicss.js
  detect/css/wpbakery.js
  detect/css/xp-css.js

Third-party code, minified and not repeated here:
  3rd-party/custom-elements.min.js: custom-elements polyfill 1.6.0 (@webcomponents/custom-elements, BSD-3-Clause)
  3rd-party/tuicss.min.js: TuiCSS (MIT)
web-vitals 3.5.2 (Apache-2.0) and TuiCSS's stylesheet are pasted inside index.js.


==============================================================================
manifest.json  (68 lines)
==============================================================================

{
    "name": "Dosson",
    "version": "0.9.10",
    "manifest_version": 3,
    "description": "Performance and usage, DOS style",
    "homepage_url": "https://bocares.com/dosson/",
    "icons": {
        "16": "images/16x16.png",
        "48": "images/48x48.png",
        "128": "images/128x128.png"
    },
    "action": {
        "default_icon": {
            "16": "images/16x16.png",
            "48": "images/48x48.png",
            "128": "images/128x128.png"
        },
        "default_title": "Dosson"
    },
    "host_permissions": [
        "*://*/*"
    ],
    "permissions": [
        "tabs",
        "storage",
        "activeTab",
        "scripting"
    ],
    "web_accessible_resources": [
        {
            "resources": [
                "mainThread.js",
                "disableClear.js"
            ],
            "matches": [
                "*://*/*"
            ]
        }
    ],
    "content_scripts": [
        {
            "matches": [
                "*://*/*"
            ],
            "js": [
                "perf.js"
            ],
            "run_at": "document_start"
        },
        {
            "matches": [
                "*://*/*"
            ],
            "css": [
            ],
            "js": [
                "3rd-party/custom-elements.min.js",
                "3rd-party/tuicss.min.js",
                "frames.js",
                "index.js"
            ],
            "run_at": "document_idle"
        }
    ],
    "background": {
        "service_worker": "background.js"
    }
}


==============================================================================
index.html  (18 lines)
==============================================================================

<!DOCTYPE html>
<html>
<head>
    <title>Welcome to dosson</title>
    <style>
        .main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
        }
    </style>
</head>
<body>
    <script src="index.js"></script>
    </body>
</html>


==============================================================================
index.js  (3646 lines)
==============================================================================

try {
    let script = document.createElement('script');
    script.src = chromeRuntimeGetURL('disableClear.js');
    (document.head || document.documentElement).appendChild(script);
} catch (e) {
    __error(`Caught error trying to add a script: ${e}`)
}


function __info(message) {
    console.log(`%c--> ${message}`, 'background: green; color: white');
}

function __error(message) {
    console.error(`%c--> ${message}`, 'background: red; color: white');
}

// a key Dosson used: no default action, and the page never sees it. Dosson listens on the window in the capture
// phase, so this runs before the page's own listeners (Gmail's ← → would move between emails)
function consumeKey(event) {
    event.preventDefault();
    event.stopPropagation();
}

/* chrome function. Let's make alternative for our test page */
function chromeStorageSyncSet(toPersist, callback) {
    if (chrome && chrome.storage && chrome.storage.sync && chrome.storage.sync.set) {
        chrome.storage.sync.set(toPersist, callback);
    }
    else {
        __info(`Going to be using localstorage instead of chrome.storage.sync.set`);
        for (let key in toPersist) {
            localStorage.setItem(key, JSON.stringify(toPersist[key]));
        }
        callback();
    }
}
function chromeStorageSyncGet(toRetrieveArray, callback) {
    if (chrome && chrome.storage && chrome.storage.sync && chrome.storage.sync.get) {
        chrome.storage.sync.get(toRetrieveArray, callback);
    } else {
        __info(`Going to be using localstorage instead of chrome.storage.sync.get`);
        const result = {};
        toRetrieveArray.forEach(key => {
            const value = localStorage.getItem(key);
            if (value !== null) {
                result[key] = JSON.parse(value);
            }
        })
        callback(result);
    }
};
// the test page is a single tab, so it has nothing to listen to
function chromeStorageOnChanged(callback) {
    if (chrome && chrome.storage && chrome.storage.onChanged) {
        chrome.storage.onChanged.addListener(callback);
    }
}

// whether Dosson shows in this tab. background.js keeps it per tab id; the test page uses sessionStorage, which is
// per tab too. A page left from before the extension reloaded gets no answer, so it stays hidden
async function getTabVisible() {
    if (!isExtension()) {
        return sessionStorage.getItem('dossonVisible') === 'true';
    }
    return (await sendToExtension({ type: 'dossonGetVisible' })).visible === true;
}

function setTabVisible(visible) {
    if (!isExtension()) {
        sessionStorage.setItem('dossonVisible', visible);
        return;
    }
    sendToExtension({ type: 'dossonSetVisible', visible }).then(response => {
        if (response.error) {
            __error(`Could not save Dosson's visibility: ${response.error}`);
        }
    });
}

function chromeRuntimeGetURL(script) {
    if (chrome && chrome.runtime && chrome.runtime.getURL) {
        return chrome.runtime.getURL('mainThread.js');
    } else {
        return "./" + script
    }

}

// Dosson shows or hides when dossonToggleKey is tapped dossonTogglePresses times in a row,
// each tap less than DOSSON_TOGGLE_DELAY ms after the previous one
const DOSSON_TOGGLE_KEYS = [
    { key: 'Escape', label: 'Esc' },
    { key: 'Control', label: 'Ctrl' },
    { key: 'Shift', label: 'Shift' },
    { key: 'Alt', label: 'Alt' }
];
const DOSSON_TOGGLE_PRESSES = [2, 3, 4, 5];
const DOSSON_TOGGLE_DELAY = 500;
// defaults until the storage answers; the property names are the storage keys
const dossonSettings = { dossonToggleKey: 'Escape', dossonTogglePresses: 2, dossonFontSize: 21 };
// Dosson's font size in px, whatever the page's (TuiCSS makes everything inherit it), within these bounds
const DOSSON_FONT_SIZE_MIN = 10;
const DOSSON_FONT_SIZE_MAX = 40;
// the font size the px sizes of levels (widths, offsets) were made for
const DOSSON_FONT_SIZE_DESIGN = 17;

// keep only the stored values Dosson knows about
function applyDossonSettings(stored) {
    if (DOSSON_TOGGLE_KEYS.some(toggleKey => toggleKey.key === stored.dossonToggleKey)) {
        dossonSettings.dossonToggleKey = stored.dossonToggleKey;
    }
    if (DOSSON_TOGGLE_PRESSES.includes(stored.dossonTogglePresses)) {
        dossonSettings.dossonTogglePresses = stored.dossonTogglePresses;
    }
    if (Number.isInteger(stored.dossonFontSize) && stored.dossonFontSize >= DOSSON_FONT_SIZE_MIN && stored.dossonFontSize <= DOSSON_FONT_SIZE_MAX) {
        dossonSettings.dossonFontSize = stored.dossonFontSize;
    }
    applyDossonFontSize();
}

// on <level-one>: its levels and panels live in its shadow root, so they all inherit it
function applyDossonFontSize() {
    const levelOne = document.querySelector('level-one');
    if (levelOne) {
        levelOne.style.fontSize = `${dossonSettings.dossonFontSize}px`;
        if (levelOne.isRendered) {
            levelOne.style.width = dossonPx(200);
            levelOne.layout();
        }
    }
}

// a size in px made for a 17px font (DOSSON_FONT_SIZE_DESIGN), scaled to the one Settings chose: levels keep their
// proportions. In px, not em: keepInViewport does arithmetic on them
function dossonPx(px) {
    return `${Math.round(px * dossonSettings.dossonFontSize / DOSSON_FONT_SIZE_DESIGN)}px`;
}

// the size Settings → Bigger (step 1) or Smaller text (step -1) switches to
function dossonFontSizeAfter(step) {
    return Math.min(DOSSON_FONT_SIZE_MAX, Math.max(DOSSON_FONT_SIZE_MIN, dossonSettings.dossonFontSize + step));
}

// the font size Dosson switches to after that step, like "22px", or "max"/"min" when it can't change
function dossonFontSizeLabel(step) {
    const size = dossonFontSizeAfter(step);
    return size === dossonSettings.dossonFontSize ? (step > 0 ? 'max' : 'min') : `${size}px`;
}

function saveDossonSetting(name, value) {
    dossonSettings[name] = value;
    chromeStorageSyncSet({ [name]: value }, () => { __info(`Dosson setting ${name} set to ${value}`); });
}

// what each kind of iframe (see getIframeKind in frames.js) is. The page around an iframe can only read the
// window of a same-origin one; Dosson reads the others through background.js
const IFRAME_KINDS = {
    same: 'Same origin as the page around it',
    cross: "Other origin: the page around it can't read its window",
    sandbox: 'Sandboxed without allow-same-origin: a unique origin, like cross',
    srcdoc: 'HTML inlined in the srcdoc attribute, same origin as the page around it',
    blank: 'No src (about:blank), usually filled by a script, same origin as the page around it',
    data: 'data: URL: a unique origin, like cross',
    blob: 'blob: URL created by a script, same origin as that script',
    ext: 'Added by another extension: Chrome keeps Dosson out'
};
// wide enough for a 20-character host and "sandbox >"
const IFRAME_LIST_WIDTH = '330px';
// wide enough for "Latest released" and a GitHub owner/repo
const FRAMEWORK_DETAILS_WIDTH = '400px';
// wide enough for "Supabase service-role key" and "MEDIUM >"
const SECRET_LIST_WIDTH = '440px';
const SECRET_DETAILS_WIDTH = '520px';
// a level shows 12 rows. A list longer than VIRTUAL_LIST_MIN only has those 12 in the DOM (see Level2.renderRows)
const LEVEL_ROWS = 12;
const VIRTUAL_LIST_MIN = 100;
// the object a finding's path is in: a.b for a.b.c, a.b for a.b["x-y"] or a.b[0]; '' when there's none (a cookie)
function secretParent(display) {
    const parent = display.replace(/(?:\.[A-Za-z_$][\w$]*|\[(?:\d+|"(?:[^"\\]|\\.)*")\])$/, '');
    return parent !== display ? parent : '';
}
const SECRET_WHERE = { window: 'Variable', localStorage: 'localStorage', sessionStorage: 'sessionStorage', cookie: 'Cookie' };
// Settings → Privacy
const DOSSON_PRIVACY = [
    "We don't collect anything: no analytics, nothing from the websites you visit. There is no Dosson server that it connects to.",
    "Everything Dosson shows is read and computed in your browser, on the page you're looking at. Your settings are saved by Chrome, like any extension's.",
    "Opening a framework's details asks deps.dev or GitHub when its versions came out. The request names the framework, nothing about the page.",
    "The full policy: bocares.com/dosson/privacy"
];
// wide enough for "API calls (1,234)" and "12.3 MB >"
const NETWORK_LIST_WIDTH = '400px';
// wide enough for a 25-character file name and "1200×800 → 300×200"
const RESOURCE_LIST_WIDTH = '520px';

// Performance → Network, in the order shown
const RESOURCE_KINDS = [
    { id: 'document', name: 'Documents', help: 'The page itself and its iframes (their own requests are not counted)' },
    { id: 'js', name: 'JavaScript' },
    { id: 'css', name: 'CSS' },
    { id: 'api', name: 'API calls', help: 'fetch, XMLHttpRequest and sendBeacon' },
    { id: 'font', name: 'Fonts' },
    { id: 'image', name: 'Images' },
    { id: 'media', name: 'Media', help: 'Video, audio and subtitles' },
    { id: 'other', name: 'Other' }
];
const RESOURCE_EXTENSIONS = {
    js: ['js', 'mjs', 'cjs'],
    css: ['css'],
    font: ['woff', 'woff2', 'ttf', 'otf', 'eot'],
    image: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'avif', 'svg', 'ico', 'bmp'],
    media: ['mp4', 'webm', 'mp3', 'ogg', 'oga', 'm4a', 'wav', 'm3u8', 'mpd', 'vtt'],
    api: ['json'],
    document: ['html', 'htm']
};

function formatBytes(bytes) {
    if (bytes < 1000) {
        return `${bytes} B`;
    }
    const units = ['kB', 'MB', 'GB'];
    let value = bytes / 1000;
    let unit = 0;
    while (value >= 1000 && unit < units.length - 1) {
        value /= 1000;
        unit++;
    }
    return `${value < 10 ? value.toFixed(1) : Math.round(value)} ${units[unit]}`;
}

// the page's requests: every one perf.js saw from document_start, or (on test.html) the 250 Chrome keeps
function getResourceEntries() {
    const navigation = performance.getEntriesByType('navigation');
    const watched = globalThis[Symbol.for('dosson')]?.resources;
    // extensions' files (Dosson's mainThread.js…) are not the page's
    const ownFiles = entry => !entry.name.startsWith('chrome-extension:');
    if (watched) {
        return { entries: [...navigation, ...watched.entries].filter(ownFiles), dropped: watched.dropped };
    }
    try {
        // only raises the limit for what comes next: what Chrome already dropped is gone
        performance.setResourceTimingBufferSize(Math.max(performance.getEntriesByType('resource').length, 10000));
    } catch (e) {
        // older browsers
    }
    return { entries: [...navigation, ...performance.getEntriesByType('resource')].filter(ownFiles), dropped: 0 };
}

function getResourceKind(entry) {
    const initiator = entry.initiatorType;
    if (['fetch', 'xmlhttprequest', 'beacon'].includes(initiator)) {
        return 'api';
    }
    if (['navigation', 'iframe', 'frame'].includes(initiator)) {
        return 'document';
    }
    // the response's MIME type (Chrome 129+), then the file extension, then what asked for it
    const type = entry.contentType || '';
    if (type) {
        if (type.includes('css')) return 'css';
        if (type.includes('javascript') || type.includes('ecmascript')) return 'js';
        if (type.startsWith('font/') || type.includes('font')) return 'font';
        if (type.startsWith('image/')) return 'image';
        if (type.startsWith('video/') || type.startsWith('audio/') || type.includes('mpegurl') || type.includes('dash')) return 'media';
        if (type.includes('json')) return 'api';
        if (type.includes('html')) return 'document';
    }
    let extension = '';
    try {
        extension = new URL(entry.name).pathname.match(/\.([a-z0-9]+)$/i)?.[1].toLowerCase() || '';
    } catch (e) {
        // not a URL
    }
    const byExtension = Object.keys(RESOURCE_EXTENSIONS).find(kind => RESOURCE_EXTENSIONS[kind].includes(extension));
    if (byExtension) {
        return byExtension;
    }
    return { script: 'js', img: 'image', image: 'image', video: 'media', audio: 'media', track: 'media' }[initiator] || 'other';
}

// a URL's last path segment, or its host
function shortUrlName(url) {
    try {
        const { hostname, pathname } = new URL(url);
        const last = pathname.split('/').filter(Boolean).pop();
        return last ? decodeURIComponent(last) : hostname;
    } catch (e) {
        return url;
    }
}

// what the network gave each request: bytes, or why it has none
function getResourceSize(entry) {
    if (entry.transferSize > 0) {
        return { transfer: entry.transferSize, decoded: entry.decodedBodySize || 0, state: 'network' };
    }
    if (entry.decodedBodySize > 0) {
        return { transfer: 0, decoded: entry.decodedBodySize, state: 'cache' };
    }
    // another origin without Timing-Allow-Origin hides its size (or the request failed or was empty)
    return { transfer: 0, decoded: 0, state: 'hidden' };
}

// a short CSS-like name for an element: tag#id.class
function describeElement(element) {
    const id = element.id ? `#${element.id}` : '';
    const className = typeof element.className === 'string' ? element.className.trim().split(/\s+/).filter(Boolean).slice(0, 2).map(name => `.${name}`).join('') : '';
    return `${element.localName}${id}${className}`;
}

// walk the page's elements, open shadow roots included, Dosson's own left out.
// A loop, not recursion: some pages nest deeper than the call stack
function measureDom() {
    const stats = {
        elements: 0, maxDepth: 0, maxChildren: 0, maxChildrenElement: null, shadowRoots: [], customElements: 0,
        iframes: 0, images: [], scripts: 0, inlineScript: 0, inlineStyle: 0
    };
    const stack = [[document.documentElement, 1]];
    while (stack.length) {
        const [element, depth] = stack.pop();
        // Dosson's menu, templates and mainThread.js tags
        if (element.localName === 'level-one' || element.id === 'dosson_action-template' || element.id === 'dosson_action-header'
            || (element.localName === 'script' && element.src.startsWith('chrome-extension:'))) {
            continue;
        }
        stats.elements++;
        stats.maxDepth = Math.max(stats.maxDepth, depth);
        if (element.childElementCount > stats.maxChildren) {
            stats.maxChildren = element.childElementCount;
            stats.maxChildrenElement = element;
        }
        const name = element.localName;
        if (name.includes('-')) {
            stats.customElements++;
        }
        if (name === 'iframe' || name === 'frame') {
            stats.iframes++;
        } else if (name === 'img') {
            stats.images.push(element);
        } else if (name === 'script') {
            stats.scripts++;
            if (!element.src) {
                stats.inlineScript += element.textContent.length;
            }
        } else if (name === 'style') {
            stats.inlineStyle += element.textContent.length;
        }
        if (element.shadowRoot) {
            stats.shadowRoots.push(element.shadowRoot);
            [...element.shadowRoot.children].forEach(child => stack.push([child, depth + 1]));
        }
        [...element.children].forEach(child => stack.push([child, depth + 1]));
    }
    return stats;
}

// count the rules of every readable stylesheet. Another origin's sheet without CORS throws on cssRules,
// and so can a sheet still loading: those are counted as not readable
function measureCss(shadowRoots) {
    const stats = { sheets: 0, unreadable: [], total: 0, style: 0, grouping: 0, fontFace: 0, keyframes: 0, import: 0, other: 0 };
    const seen = new Set();
    const readSheet = sheet => {
        if (!sheet || seen.has(sheet)) {
            return;
        }
        seen.add(sheet);
        stats.sheets++;
        let rules;
        try {
            rules = sheet.cssRules;
        } catch (e) {
            rules = null;
        }
        if (!rules) {
            stats.unreadable.push(sheet.href || 'inline');
            return;
        }
        countRules(rules);
    };
    const countRules = rules => {
        for (const rule of rules) {
            stats.total++;
            if (rule instanceof CSSStyleRule) {
                stats.style++;
            } else if (rule instanceof CSSImportRule) {
                stats.import++;
                readSheet(rule.styleSheet);
                continue;
            } else if (rule instanceof CSSFontFaceRule) {
                stats.fontFace++;
            } else if (rule instanceof CSSKeyframesRule) {
                // its keyframes are not rules of their own
                stats.keyframes++;
                continue;
            } else if (rule instanceof CSSGroupingRule || rule instanceof CSSConditionRule) {
                stats.grouping++;
            } else {
                stats.other++;
            }
            // @media, @supports, @layer, @container and nested style rules hold more rules
            if (rule.cssRules?.length) {
                countRules(rule.cssRules);
            }
        }
    };
    [document, ...shadowRoots].forEach(root => {
        [...root.styleSheets].forEach(readSheet);
        (root.adoptedStyleSheets || []).forEach(readSheet);
    });
    return stats;
}

// mainThread.js reads globals in the page's main world: the page's own when asked on window, a same-origin iframe's
// when asked on its <iframe>. It answers on the same target during dispatchEvent, so this is synchronous; null when
// mainThread.js hasn't loaded yet
function readWindowFromPage(target) {
    let detail = null;
    const listener = (e) => { detail = e.detail; };
    target.addEventListener('dossonWindowChanges', listener);
    target.dispatchEvent(new CustomEvent('dossonGetWindowChanges', { bubbles: true, composed: true }));
    target.removeEventListener('dossonWindowChanges', listener);
    return detail;
}

// the page's globals. On a busy page, mainThread.js can load seconds after Dosson's menu shows: wait for it
function readPageWindow() {
    return new Promise(resolve => {
        const answer = readWindowFromPage(window);
        if (answer) {
            resolve(answer);
            return;
        }
        const notLoaded = { error: "Dosson's page script (mainThread.js) didn't load on this page" };
        const retry = () => {
            clearTimeout(timeout);
            resolve(readWindowFromPage(window) || notLoaded);
        };
        const timeout = setTimeout(() => {
            window.removeEventListener('dossonMainThreadReady', retry);
            resolve(notLoaded);
        }, 10000);
        window.addEventListener('dossonMainThreadReady', retry, { once: true });
    });
}

function sendToExtension(message) {
    return new Promise(resolve => {
        try {
            chrome.runtime.sendMessage(message, response => {
                resolve(response || { error: chrome.runtime.lastError?.message || 'No answer from the extension' });
            });
        } catch (e) {
            // the extension was reloaded after this page loaded
            resolve({ error: `${e.message}. Reload the page` });
        }
    });
}

// background.js reads any frame Chrome lets extensions into, whatever its origin. path is the frame's position
// from the top window: [1, 0] is window[1][0]
function readFrameFromExtension(path) {
    return sendToExtension({ type: 'dossonReadFrame', path });
}

// only extension contexts have getManifest. It stays after the extension reloads, unlike chrome.runtime.id
function isExtension() {
    return typeof chrome !== 'undefined' && !!chrome.runtime && !!chrome.runtime.getManifest;
}

// Settings → Source Code: the text of source.txt, which make-release.mjs writes next to the files of a release. A build
// loaded unpacked doesn't have it
async function readDossonSource() {
    if (isExtension()) {
        return sendToExtension({ type: 'dossonReadSource' });
    }
    try {
        const response = await fetch('source.txt');
        return response.ok ? { text: await response.text() } : { error: 'The source code is in released builds' };
    } catch (e) {
        return { error: 'The source code is in released builds' };
    }
}

// the document's text as the rows a panel shows: lines cut every `columns` characters (a minified line is thousands
// long), with the number of the line each row comes from
function sourceRows(text, columns) {
    const rows = [];
    const lines = [];
    text.split('\n').forEach((line, index) => {
        line = line.replace(/\t/g, '    ');
        for (let start = 0; start === 0 || start < line.length; start += columns) {
            rows.push(line.slice(start, start + columns));
            lines.push(index + 1);
        }
    });
    return { rows, lines };
}

// Dosson's version, from manifest.json (fetched next to index.js on test.html), or undefined
async function dossonVersion() {
    if (isExtension()) {
        return chrome.runtime.getManifest().version;
    }
    try {
        return (await (await fetch('manifest.json')).json()).version;
    } catch (e) {
        return undefined;
    }
}

// add a script to the page's main world, resolving once it has run
function addPageScript(src) {
    return new Promise((resolve, reject) => {
        const script = document.createElement('script');
        script.src = src;
        // added together, scripts download at once and still run in the order they were added
        script.async = false;
        script.onload = () => {
            script.remove();
            resolve();
        };
        script.onerror = () => reject(new Error(`Can't load ${src}`));
        (document.head || document.documentElement).appendChild(script);
    });
}

// a row for something that failed: the short reason on the right, the whole error in its help and, on Enter, → or
// a click, in a panel (Chrome's messages, with file names and paths, don't fit in the help line)
function errorRow(name, value, error) {
    const message = String(error || 'No answer');
    return {
        name,
        value: `${value} >`,
        help: message,
        open: () => {
            const panel = document.createElement('dosson-text');
            panel.label = name;
            panel.paragraphs = [message];
            return panel;
        }
    };
}

// what frameworks the top page uses: { checked, found: [{ id, name, kind, href, npm, github, version, evidence }] } or { error }.
// The detectors (detect/) run in the page's main world, and only from here: Dosson adds nothing until Frameworks
// opens. The extension runs them through background.js, which works under any CSP; the test page adds <script>s
async function detectFrameworks() {
    if (isExtension()) {
        return sendToExtension({ type: 'dossonDetectFrameworks' });
    }
    try {
        const { js, css } = await (await fetch('./detect/detectors.json')).json();
        const files = ['detect/detect.js', ...js.map(id => `detect/js/${id}.js`), ...css.map(id => `detect/css/${id}.js`)];
        // all at once, run in order: each detector registers with detect.js. One by one, the 390 files took 40 s from
        // the site's demo
        await Promise.all(files.map(file => addPageScript(`./${file}`)));
    } catch (e) {
        return { error: e.message };
    }
    return pageSource(window).request({ type: 'frameworks' });
}

// Security → Secrets: { frames: [{ path, href, findings, stats }], skipped } or { error }. security/secrets.js runs in
// each frame's main world, only from here. The extension scans every frame through background.js; the test page adds
// the script and scans the frames it can reach (same origin)
async function scanSecrets() {
    if (isExtension()) {
        return sendToExtension({ type: 'dossonScanSecrets' });
    }
    try {
        await addPageScript('./security/secrets.js');
    } catch (e) {
        return { error: e.message };
    }
    return pageSource(window).request({ type: 'secrets' });
}

// the <iframe> holding the frame at path (its index at each level from the top window), when the page can reach it
function findIframeElement(path) {
    let doc = document;
    let frameWindow = window;
    let element = null;
    for (const index of path) {
        frameWindow = frameWindow[index];
        element = doc && collectIframes(doc).find(iframe => iframe.contentWindow === frameWindow);
        if (!element) {
            return null;
        }
        doc = element.contentDocument;
    }
    return element;
}

// a framework's releases: deps.dev lists every version of an npm package with its date, GitHub's releases cover
// what isn't on npm. Both allow any origin. The extension fetches through background.js, the test page directly
const DEPS_DEV_PACKAGES = 'https://api.deps.dev/v3/systems/npm/packages/';
const GITHUB_REPOS = 'https://api.github.com/repos/';
function fetchJson(url) {
    if (isExtension()) {
        return sendToExtension({ type: 'dossonFetchJson', url });
    }
    return fetch(url).then(response => response.ok ? response.json() : { error: `${response.status} ${response.statusText}`.trim() },
        error => ({ error: error.message }));
}

// { versions: [{ version, date, latest }], source } or { error }, read once per page (GitHub allows 60 calls an hour)
const dossonReleases = new Map();
function readReleases({ npm, github }) {
    const key = npm ? `npm:${npm}` : `github:${github}`;
    if (!dossonReleases.has(key)) {
        const releases = (npm ? readNpmReleases(npm) : readGithubReleases(github)).catch(error => ({ error: error.message }));
        dossonReleases.set(key, releases);
        // a failure is tried again next time
        releases.then(result => result.error && dossonReleases.delete(key));
    }
    return dossonReleases.get(key);
}

async function readNpmReleases(npm) {
    const data = await fetchJson(DEPS_DEV_PACKAGES + encodeURIComponent(npm));
    if (data.error || !Array.isArray(data.versions)) {
        return { error: data.error || 'No versions' };
    }
    // isDefault: npm's "latest" tag
    const versions = data.versions.map(({ versionKey, publishedAt, isDefault }) => ({ version: versionKey.version, date: publishedAt, latest: isDefault }));
    return { versions, source: `npm package ${npm}` };
}

async function readGithubReleases(github) {
    const data = await fetchJson(`${GITHUB_REPOS}${github}/releases?per_page=100`);
    if (!Array.isArray(data)) {
        return { error: data.error || 'No releases' };
    }
    // tags read v1.2.3, r1.12.42, rel/wicket-10.0.0, release/METEOR@3.1: keep the version
    const versions = data.filter(release => !release.draft).map(release => ({
        version: release.tag_name.match(/\d+(?:\.\d+)+(?:[-+][\w.]+)?/)?.[0] || release.tag_name,
        date: release.published_at,
        prerelease: release.prerelease
    }));
    // the highest version, not the newest release: a repo can ship patches for older majors (8.0.31 after 10.0.0)
    const latest = versions.filter(release => !release.prerelease).sort((a, b) => compareVersions(b.version, a.version))[0];
    if (latest) {
        latest.latest = true;
    }
    return { versions, source: `GitHub releases of ${github}` };
}

// 10.0.1 after 9.2.0: numbers compared one by one
function compareVersions(a, b) {
    const partsA = a.split(/[.+-]/).map(Number), partsB = b.split(/[.+-]/).map(Number);
    for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
        const difference = (partsA[i] || 0) - (partsB[i] || 0);
        if (difference) {
            return difference;
        }
    }
    return 0;
}

// the release a detected version is: the same version, else the newest stable one in a range (18.x, 18, 3.2).
// undefined when there's none, or for versions like ≥8
function findRelease(versions, detected) {
    let version = (detected || '').replace(/^v/, '');
    // three.js reports its revision, r160 for 0.160.x
    const revision = version.match(/^r(\d+)$/);
    if (revision) {
        version = `0.${revision[1]}`;
    }
    const exact = versions.find(release => release.version === version);
    if (exact && !revision) {
        return exact;
    }
    const range = version.replace(/\.x$/i, '');
    if (!/^\d+(\.\d+)*$/.test(range)) {
        return undefined;
    }
    const inRange = versions.filter(release => (release.version === range || release.version.startsWith(`${range}.`)) && !/-/.test(release.version));
    return inRange.sort((a, b) => compareVersions(b.version, a.version))[0];
}

// 2024-04-26 (1 year ago)
function formatReleaseDate(date) {
    const days = Math.floor((Date.now() - new Date(date)) / 86400000);
    const [count, unit] = days >= 365 ? [Math.floor(days / 365), 'year'] : days >= 30 ? [Math.floor(days / 30), 'month'] : [days, 'day'];
    return { day: date.slice(0, 10), age: count ? `${count} ${unit}${count > 1 ? 's' : ''} ago` : 'today' };
}

function openInNewTab(url) {
    window.open(url, '_blank', 'noopener,noreferrer');
}

// Where a value lives, for the object inspector and the run panel. request({ type, path, args }) goes to the
// mainThread.js that can reach the value and resolves with its answer (see handle in mainThread.js).
// pageSource: the page's own window, or a same-origin iframe's when target is its <iframe>
let dossonRequestId = 0;
function pageSource(target) {
    return {
        request: (request) => new Promise(resolve => {
            const id = ++dossonRequestId;
            const listener = (e) => {
                if (e.detail.id === id) {
                    target.removeEventListener('dossonResponse', listener);
                    resolve(e.detail.response);
                }
            };
            target.addEventListener('dossonResponse', listener);
            target.dispatchEvent(new CustomEvent('dossonRequest', { bubbles: true, composed: true, detail: { id, request } }));
        })
    };
}

// any other frame, through background.js
function frameSource(path) {
    return { request: (request) => sendToExtension({ type: 'dossonFrameRequest', path, request }) };
}

// JSON when it parses (42, true, null, "text", [1, 2], {"a": 1}), else the text itself. Empty fields at the end are
// left out, so optional parameters stay undefined
function parseArguments(texts) {
    const last = texts.findLastIndex(text => text.trim() !== '');
    return texts.slice(0, last + 1).map(text => {
        if (text.trim() === '') {
            return undefined;
        }
        try {
            return JSON.parse(text);
        } catch (e) {
            return text;
        }
    });
}

// Variables: booleans, numbers, strings, objects, arrays, then the other types (null, undefined, window…) one after
// the other by name. Names sort alphanumerically: n2 before n10
const VARIABLE_TYPE_ORDER = ['boolean', 'number', 'string', 'object', 'array'];
// one collator: localeCompare with options builds one per call, seconds for Google Meet's 10,000 variables
const NUMERIC_COLLATOR = new Intl.Collator(undefined, { numeric: true });
const COLLATOR = new Intl.Collator();
function compareVariables(a, b) {
    const rank = ({ type }) => VARIABLE_TYPE_ORDER.includes(type) ? VARIABLE_TYPE_ORDER.indexOf(type) : VARIABLE_TYPE_ORDER.length;
    return rank(a) - rank(b)
        || (rank(a) === VARIABLE_TYPE_ORDER.length ? COLLATOR.compare(String(a.type), String(b.type)) : 0)
        || NUMERIC_COLLATOR.compare(a.name, b.name);
}

// panels: path leads from source's window to the value (see resolve in mainThread.js), name labels it
// mode is what the panel lists first (see Inspector.mode): 'variables' from Inspect → Variables
function createInspector(source, path, name, mode = 'all') {
    return Object.assign(document.createElement('dosson-inspector'), { source, path, name, mode });
}

function createRunPanel(source, path, name) {
    return Object.assign(document.createElement('dosson-run'), { source, path, name });
}

// The egg: typing e g g (a letter at most DOSSON_EGG_DELAY ms after the previous one) opens Snake, a DOS game. Its rules
// are plain functions of a state ({ snake: [head, …], direction, food, score, over, won }, cells are { x, y })
const DOSSON_EGG = 'egg';
const DOSSON_EGG_DELAY = 1000;
const SNAKE_COLS = 20;
const SNAKE_ROWS = 12;
const SNAKE_DIRECTIONS = { ArrowUp: { x: 0, y: -1 }, ArrowDown: { x: 0, y: 1 }, ArrowLeft: { x: -1, y: 0 }, ArrowRight: { x: 1, y: 0 } };
let snakeBest = 0;

function snakeNewGame(random = Math.random) {
    const state = { snake: [{ x: 5, y: 6 }, { x: 4, y: 6 }, { x: 3, y: 6 }], direction: SNAKE_DIRECTIONS.ArrowRight, food: null, score: 0, over: false, won: false };
    state.food = snakePlaceFood(state, random);
    return state;
}

// a free cell, or null when the snake fills the board
function snakePlaceFood({ snake }, random) {
    const free = [];
    for (let y = 0; y < SNAKE_ROWS; y++) {
        for (let x = 0; x < SNAKE_COLS; x++) {
            if (!snake.some(cell => cell.x === x && cell.y === y)) {
                free.push({ x, y });
            }
        }
    }
    return free.length ? free[Math.floor(random() * free.length)] : null;
}

// one tick toward direction (a turn straight back is ignored). The snake dies on a wall or on itself, grows on food
function snakeStep(state, direction = state.direction, random = Math.random) {
    if (state.over) {
        return state;
    }
    const turn = direction.x === -state.direction.x && direction.y === -state.direction.y ? state.direction : direction;
    const head = { x: state.snake[0].x + turn.x, y: state.snake[0].y + turn.y };
    const eats = state.food?.x === head.x && state.food?.y === head.y;
    // the tail moves away unless it grows, so the head may take its cell
    const body = eats ? state.snake : state.snake.slice(0, -1);
    const crashed = head.x < 0 || head.y < 0 || head.x >= SNAKE_COLS || head.y >= SNAKE_ROWS || body.some(cell => cell.x === head.x && cell.y === head.y);
    if (crashed) {
        return { ...state, direction: turn, over: true };
    }
    const next = { ...state, snake: [head, ...body], direction: turn, score: state.score + (eats ? 1 : 0) };
    if (eats) {
        next.food = snakePlaceFood(next, random);
        next.won = next.over = next.food === null;
    }
    return next;
}

// the board as text, two characters a cell
function snakeDraw({ snake, food }) {
    const lines = [];
    for (let y = 0; y < SNAKE_ROWS; y++) {
        let line = '';
        for (let x = 0; x < SNAKE_COLS; x++) {
            const index = snake.findIndex(cell => cell.x === x && cell.y === y);
            line += index === 0 ? '▓▓' : index > 0 ? '██' : food?.x === x && food?.y === y ? '♦♦' : '··';
        }
        lines.push(line);
    }
    return lines.join('\n');
}

// the letter typed with the others of the last second: what is left of the egg's word when it isn't complete
function eggProgress(typed, key, elapsed) {
    return ((elapsed < DOSSON_EGG_DELAY ? typed : '') + key.toLowerCase()).slice(-DOSSON_EGG.length);
}

// the panel or level that has the keyboard: the last of the chain of open children
function deepestOpen(component) {
    while (component.openedChild) {
        component = component.openedChild;
    }
    return component;
}

// scroll an iframe into view and outline it for 2 s. An animation leaves the page's own styles untouched
function showOnPage(iframe) {
    iframe.scrollIntoView({ block: 'nearest' });
    const outline = { outline: '4px solid #0ff', outlineOffset: '-4px' };
    iframe.animate([outline, outline], { duration: 2000 });
}

// cut text to max characters with an ellipsis; keepEnd keeps the end of a host name, where its domain is
function shorten(text, max, keepEnd = false) {
    if (text.length <= max) {
        return text;
    }
    return keepEnd ? `…${text.slice(1 - max)}` : `${text.slice(0, max - 1)}…`;
}



class Level1 extends HTMLElement {

    openedChild = null;
    // Define a custom HTML element named Actions
    constructor() {
        super();
        __info(`level1::constructor`)
        // Attach a shadow root to the element
        this.attachShadow({ mode: 'open' });
        this.actions = [
            { name: "Performance", shortcut: "P", action: "performance", index: 0 },
            { name: "Inspect", shortcut: "I", action: "inspect", index: 1 },
            { name: "Frameworks", shortcut: "F", action: "frameworks", index: 2 },
            { name: "Security", shortcut: "C", action: "security", index: 3 },
            { name: "Settings", shortcut: "S", action: "settings", index: 4 }
        ];

        // this.setupTasks();
    }

    // Lifecycle method called when the element is connected to the DOM
    connectedCallback() {
        __info(`level1::connectedCallback`)
        this.tabIndex = 0;
        this.loadCSS();
        this.loadJS();
        if (!this.isRendered) {
            this.render();
        }
        this.addKeyboardListeners();
        this.selectedIndex = 0;
        this.updateHoverState();
    }



    loadJS() {
        __info(`level1::loadJS`)
        function domReady(t) { document.addEventListener("DOMContentLoaded", t), "interactive" !== document.readyState && "complete" !== document.readyState || t() } function tabsController() { const t = document.getElementsByClassName("tui-tab"); if (!t.length) return; for (const e of t) e.addEventListener("click", function (e) { if (e.target.classList.contains("disabled")) return; for (const e of t) e.classList.remove("active"); const o = document.getElementsByClassName("tui-tab-content"); if (!o) throw "No tab content elements found."; for (const t of o) t.style.display = "none"; const n = e.target.getAttribute("data-tab-content"); if (n) { const t = document.getElementById(n); if (!t) throw 'No tab content element with id "' + n + '" found.'; t.style.display = "block" } e.target.classList.add("active") }); const e = document.querySelector(".tui-tab.active"); e ? e.click() : t[0].click() } function datetimeController() { const t = document.getElementsByClassName("tui-datetime"); function e() { for (const e of t) { if (null === e) continue; let t = e.getAttribute("data-format"); const o = new Date, n = (o.getMonth() + 1).toString().padStart(2, "0"), a = o.getDate().toString().padStart(2, "0"), c = (o.getDay() + 1).toString().padStart(2, "0"), s = o.getFullYear().toString(), i = o.getHours().toString().padStart(2, "0"), l = (parseInt(i) + 24) % "12" || "12", r = o.getMinutes().toString().padStart(2, "0"), d = o.getSeconds().toString().padStart(2, "0"), u = parseInt(i) >= 12 ? "PM" : "AM"; t = (t = (t = (t = (t = (t = (t = (t = (t = t.replace("M", n)).replace("d", a)).replace("e", c)).replace("y", s)).replace("H", i)).replace("h", l)).replace("m", r)).replace("s", d)).replace("a", u), e.innerHTML = t } } t.length && (e(), setTimeout(() => { setInterval(e, 1e3) }, 1e3 - (new Date).getMilliseconds())) } function sidenavController() { const t = document.querySelector(".tui-sidenav-button"); t && t.addEventListener("click", () => { const t = document.querySelector(".tui-sidenav"); if (!t) throw "No sidenav element found."; t.classList.contains("active") ? t.classList.remove("active") : t.classList.add("active") }) } function modalController() { const t = document.querySelector(".tui-overlap"); if (!t) return; const e = document.getElementsByClassName("tui-modal-button"); for (const o of e) o.addEventListener("click", e => { t.classList.add("active"); const o = e.target.getAttribute("data-modal"); if (!o) throw "Modal close button data-modal attribute is empty or not set."; { const t = document.getElementById(o); if (!t) throw 'No modal element with id of "' + o + '" found.'; t.classList.add("active") } }); const o = document.getElementsByClassName("tui-modal-close-button"); if (e.length > 0 && !o.length) throw "No modal close buttons found."; for (const e of o) e.addEventListener("click", e => { t.classList.remove("active"); const o = e.target.getAttribute("data-modal"); if (!o) throw "Modal close button data-modal attribute is empty or not set."; { const t = document.getElementById(o); if (!t) throw 'No modal element with id of "' + o + '" found.'; t.classList.remove("active") } }) } domReady(function () { tabsController(), datetimeController(), sidenavController(), modalController() });
    }


    loadCSS() {

        __info(`level1::loadCSS`)
        let style;
        style = document.createElement('style');
        style.textContent = getCssString();
        this.shadowRoot.appendChild(style);
    }

    // Method to render the element's content
    render() {
        __info(`level1::render`)
        // TODO: Consider moving the template fetching and cloning outside of the render method for performance
        const headerTemplate = document.getElementById('dosson_action-header');
        const headerNode = document.importNode(headerTemplate.content, true);
        this.shadowRoot.appendChild(headerNode);

        const div = document.createElement('div');
        div.className = "main tui-window purple-168";
        // https://github.com/vinibiavatti1/TuiCss/wiki/Fieldset
        const fieldset = document.createElement('fieldset');
        const legend = document.createElement('legend');
        legend.textContent = "Dosson"
        const span = document.createElement('span');
        span.classList.add("tui-fieldset-text");
        // span.textContent = 'ESC-ESC close';
        fieldset.appendChild(legend);
        fieldset.appendChild(span);
        // or double ? tui-border-double
        fieldset.className = "tui-fieldset legend tui-border-double";


        div.appendChild(fieldset);

        // a tiny × on the top border hides Dosson like the show/hide key; it's easier to hit than it looks
        div.style.position = 'relative';
        const closeButton = document.createElement('span');
        closeButton.className = 'dosson-close';
        closeButton.textContent = '×';
        closeButton.addEventListener('mouseenter', () => {
            const { label } = DOSSON_TOGGLE_KEYS.find(toggleKey => toggleKey.key === dossonSettings.dossonToggleKey);
            closeButton.title = `${Array(dossonSettings.dossonTogglePresses).fill(label).join(' ')} or click to close`;
        });
        closeButton.addEventListener('click', (event) => {
            event.preventDefault();
            event.stopPropagation();
            this.close();
        });
        div.appendChild(closeButton);

        const ul = document.createElement('ul');
        ul.classList.add('actions');
        const template = document.getElementById('dosson_action-template');

        this.actions.forEach(action => {
            const clone = document.importNode(template.content, true);
            const li = clone.querySelector('li');
            li.dataset.action = action.action;
            const a = li.querySelector('a');
            a.addEventListener('click', (event) => {
                event.preventDefault();
                this.openedChild?.close();
                this.selectedIndex = action.index;
                this.updateHoverState();
                this[action.action](action);
            });
            const shortcutSpan = a.querySelector('.tui-shortcut');
            shortcutSpan.textContent = '>';
            const nameSpan = a.querySelector('span:last-child');
            nameSpan.textContent = action.name;
            ul.appendChild(clone);
        });

        fieldset.appendChild(ul);
        this.shadowRoot.appendChild(div);
        this.style.position = 'fixed';
        this.style.top = '50%';
        this.style.left = '50%';
        this.style.transform = 'translate(-50%, -50%)';
        // TuiCSS makes everything inherit the font size: a fixed one, whatever the page's (Settings changes it)
        this.style.fontSize = `${dossonSettings.dossonFontSize}px`;
        this.style.width = dossonPx(200);
        this.style.display = 'inline-block';
        this.style['vertical-align'] = "top";
        this.style["z-index"] = 2147483647;
        this.style.visibility = 'visible';
        this.isRendered = true;
        this.bringToFront();
    }

    // Dosson stays above the page: z-index alone isn't enough (Salesforce's agent uses 2147483642, and dialogs or
    // popovers the page opens sit in the top layer, above any z-index), so <level-one> is a popover in the top layer
    // too. Showing it again puts it back above whatever the page opened since
    bringToFront() {
        if (typeof this.showPopover !== 'function' || !this.isConnected) {
            return;
        }
        if (!this.hasAttribute('popover')) {
            this.setAttribute('popover', 'manual');
            // undo the browser's popover style: inset 0, margin auto, a border, a background, overflow auto (which
            // would cut off the levels that open to the right)
            Object.assign(this.style, { right: 'auto', bottom: 'auto', margin: '0', padding: '0', border: '0', background: 'transparent', overflow: 'visible' });
        }
        if (this.matches(':popover-open')) {
            this.hidePopover();
        }
        this.showPopover();
    }

    // Method to handle keydown events
    handleKeyDown = (event) => {
        __info(`level1::handleKeyDown`)
        switch (event.key) {
            case 'ArrowDown':
                this.selectedIndex = (this.selectedIndex + 1) % this.actions.length;
                consumeKey(event);
                break;
            case 'ArrowUp':
                this.selectedIndex = (this.selectedIndex - 1 + this.actions.length) % this.actions.length;
                consumeKey(event);
                break;
            case 'ArrowLeft':
                this.close();
                consumeKey(event);
                break;
            case 'Enter':
            case 'ArrowRight':
                this[this.actions[this.selectedIndex]['action']](this.actions[this.selectedIndex]);
                consumeKey(event);
                break;
        }
        this.updateHoverState();

    }

    // Method to update the hover state of the action elements
    updateHoverState() {
        __info(`level1::updateHoverState`)
        const actionElements = this.shadowRoot.querySelectorAll('.actions li');
        actionElements.forEach((el, i) => {
            if (i === this.selectedIndex) {
                el.classList.add('hover');
            } else {
                el.classList.remove('hover');
            }
        });
    }



    getMS(on) {

        on(result).then()
        __info(`level1::getLCP (need to use WebVitals)`);
        return new Promise((resolve) => {
            const po = new PerformanceObserver((entryList) => {
                const entries = entryList.getEntries();
                const lastEntry = entries[entries.length - 1];
                const lcp = lastEntry.renderTime || lastEntry.loadTime;
                __info('Largest Contentful Paint (LCP): ' + lcp + 'ms');
                resolve(lcp);
            });
            po.observe({ type: 'largest-contentful-paint', buffered: true });
        });
    }

    noop() {
        __info(`level1::noop `);
        return new Promise((resolve) => {
            setTimeout(resolve, 5000);
        });

    }

    performance(action) {
        __info(`level1::performance`)
        const l2 = document.createElement('level-two');
        const { onLCP, onCLS, onFCP, onFID, onINP, onTTFB } = this.loadWebVitals()

        l2.index = action.index;
        l2.name = action.name;
        l2.actions = [
            { name: "LCP", ms: onLCP, help: "Largest Contentful Paint: when the biggest image or text block is painted. Good ≤ 2.5 s", href: "https://web.dev/articles/lcp" },
            { name: "FID", ms: onFID, help: "First Input Delay: wait before the first click, tap or key is handled. Good ≤ 100 ms. Replaced by INP", href: "https://web.dev/articles/fid" },
            { name: "CLS", ms: onCLS, help: "Cumulative Layout Shift: how much the content jumps around. A score, not ms. Good ≤ 0.1", href: "https://web.dev/articles/cls" },
            { name: "FCP", ms: onFCP, help: "First Contentful Paint: when the first text or image is painted. Good ≤ 1.8 s", href: "https://web.dev/articles/fcp" },
            { name: "INP", ms: onINP, help: "Interaction to Next Paint: how fast the page reacts to clicks, taps and keys. Good ≤ 200 ms", href: "https://web.dev/articles/inp" },
            { name: "TTFB", ms: onTTFB, help: "Time to First Byte: when the first byte of the server response arrives. Good ≤ 800 ms", href: "https://web.dev/articles/ttfb" },
            { name: "TBT", ms: this.noop, help: "Total Blocking Time: time the main thread is blocked by long tasks. Good ≤ 200 ms. Not measured yet", href: "https://web.dev/articles/tbt" },
            ...this.pageWeightRows()
        ];
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l2);
        this.openedChild = l2;
        l2.addEventListener('closeMe', this.removeChildComponent.bind(this));
    }

    // Performance's rows after the web vitals, measured when it opens: network, CSS, DOM and device
    pageWeightRows() {
        const rows = [];
        const tryRow = (name, build) => {
            try {
                rows.push(...[build()].flat());
            } catch (e) {
                __error(`level1::pageWeightRows ${name}: ${e}`);
                rows.push(errorRow(name, 'error', e));
            }
        };
        let dom = null;
        tryRow('Network', () => this.networkRow());
        tryRow('DOM nodes', () => {
            dom = measureDom();
            return this.domRow(dom);
        });
        tryRow('CSS rules', () => this.cssRow(measureCss(dom?.shadowRoots || [])));
        tryRow('Device', () => this.deviceRows());
        return rows;
    }

    networkRow() {
        const { entries, dropped } = getResourceEntries();
        const pageOrigin = location.origin;
        const kinds = new Map(RESOURCE_KINDS.map(kind => [kind.id, { ...kind, entries: [], transfer: 0, decoded: 0, cache: 0, hidden: 0 }]));
        let total = 0;
        let otherOrigins = 0;
        let cache = 0;
        let hidden = 0;
        entries.forEach(entry => {
            const size = getResourceSize(entry);
            const kind = kinds.get(getResourceKind(entry));
            kind.entries.push({ entry, size });
            kind.transfer += size.transfer;
            kind.decoded += size.decoded;
            kind[size.state]++;
            total += size.transfer;
            cache += size.state === 'cache' ? 1 : 0;
            hidden += size.state === 'hidden' ? 1 : 0;
            try {
                if (new URL(entry.name).origin !== pageOrigin) {
                    otherOrigins += size.transfer;
                }
            } catch (e) {
                // not a URL
            }
        });
        const kindRows = [...kinds.values()].filter(kind => kind.entries.length).map(kind => ({
            name: `${kind.name} (${kind.entries.length.toLocaleString()})`,
            value: `${formatBytes(kind.transfer)} >`,
            help: [
                kind.help,
                `${formatBytes(kind.transfer)} downloaded, ${formatBytes(kind.decoded)} once decompressed`,
                kind.cache ? `${kind.cache} from the cache` : '',
                kind.hidden ? `${kind.hidden} from other origins that don't tell their size` : ''
            ].filter(Boolean).join('. '),
            children: kind.entries
                .sort((a, b) => b.size.transfer - a.size.transfer || b.size.decoded - a.size.decoded)
                .map(({ entry, size }) => ({
                    name: shortUrlName(entry.name),
                    value: size.state === 'network' ? formatBytes(size.transfer) : size.state === 'cache' ? 'cache' : '?',
                    help: `${entry.name}. ${size.state === 'hidden'
                        ? "Another origin that doesn't send Timing-Allow-Origin: Chrome hides its size"
                        : `${formatBytes(size.transfer)} downloaded${size.state === 'cache' ? ' (from the cache)' : ''}, ${formatBytes(size.decoded)} once decompressed`}, in ${Math.round(entry.duration)} ms`
                })),
            width: RESOURCE_LIST_WIDTH
        }));
        const requests = entries.length + dropped;
        return {
            name: 'Network',
            value: `${formatBytes(total)} >`,
            help: `${formatBytes(total)} downloaded in ${requests.toLocaleString()} requests since the page loaded (headers included, the cache counts 0). Requests made inside iframes are not counted`,
            children: [
                ...kindRows,
                { name: 'Requests', value: requests.toLocaleString(), help: 'Every request since the page loaded, the page itself included' },
                { name: 'Other origins', value: formatBytes(otherOrigins), help: `Downloaded from origins other than ${pageOrigin}: CDNs, third parties` },
                { name: 'From the cache', value: cache.toLocaleString(), help: 'Requests the browser answered from its cache: nothing downloaded' },
                { name: 'Size unknown', value: hidden.toLocaleString(), help: "Requests to other origins that don't send Timing-Allow-Origin: Chrome hides their size, so the total is missing them (failed requests count here too)" },
                ...(dropped ? [{ name: 'Not listed', value: dropped.toLocaleString(), help: 'Requests after the first 50,000: counted, not listed or measured' }] : [])
            ],
            width: NETWORK_LIST_WIDTH
        };
    }

    domRow(dom) {
        const dpr = window.devicePixelRatio || 1;
        const shown = dom.images.map(image => ({ image, rect: image.getBoundingClientRect() }));
        const imageRow = (name, help, images, describe) => ({
            name,
            value: images.length ? `${images.length.toLocaleString()} >` : '0',
            help,
            children: images.map(({ image, rect }) => ({
                name: shortUrlName(image.currentSrc || image.src) || describeElement(image),
                value: describe(image, rect),
                help: image.currentSrc || image.src || describeElement(image)
            })),
            width: RESOURCE_LIST_WIDTH
        });
        const size = (image, rect) => `${image.naturalWidth}×${image.naturalHeight} → ${Math.round(rect.width)}×${Math.round(rect.height)}`;
        const unsized = shown.filter(({ image }) => !image.hasAttribute('width') || !image.hasAttribute('height'));
        const notLazy = shown.filter(({ image, rect }) => image.loading !== 'lazy' && rect.top + window.scrollY > window.innerHeight);
        // at least 1.5× the pixels it's shown with on this screen
        const oversized = shown.filter(({ image, rect }) => image.complete && rect.width > 0 && image.naturalWidth > rect.width * dpr * 1.5);
        const most = dom.maxChildrenElement ? describeElement(dom.maxChildrenElement) : '';
        return {
            name: 'DOM nodes',
            value: `${dom.elements.toLocaleString()} >`,
            help: 'Elements on the page, open shadow roots included (Dosson left out). Lighthouse warns above 800 and flags pages above 1,400',
            href: 'https://developer.chrome.com/docs/lighthouse/performance/dom-size',
            children: [
                { name: 'Deepest nesting', value: dom.maxDepth.toLocaleString(), help: 'Levels from <html> to the deepest element. Lighthouse warns above 32' },
                { name: 'Most children', value: dom.maxChildren.toLocaleString(), help: `${most ? `${most} has the most child elements. ` : ''}Lighthouse warns above 60` },
                { name: 'Shadow roots', value: dom.shadowRoots.length.toLocaleString(), help: 'Open shadow roots (closed ones cannot be seen)' },
                { name: 'Custom elements', value: dom.customElements.toLocaleString(), help: 'Elements with a - in their name: web components' },
                { name: 'Iframes', value: dom.iframes.toLocaleString(), help: 'Each one is a whole document of its own. Inspect → Iframes lists them' },
                { name: 'Images', value: dom.images.length.toLocaleString(), help: '<img> elements' },
                imageRow('Images without size', 'Images missing a width or height attribute: the page jumps when they load (CLS). Sizes set in CSS are not checked', unsized, size),
                imageRow('Below the fold, eager', 'Images below the first screen without loading="lazy": they load before they are needed', notLazy, (image, rect) => `${Math.round(rect.top + window.scrollY).toLocaleString()} px down`),
                imageRow('Bigger than shown', `Images at least 1.5× wider than shown on this screen (device pixel ratio ${dpr}): bytes downloaded for nothing`, oversized, size),
                { name: 'Scripts', value: dom.scripts.toLocaleString(), help: '<script> elements, inline and external' },
                { name: 'Inline scripts', value: formatBytes(dom.inlineScript), help: 'Text of the <script> elements without src (characters, about bytes)' },
                { name: 'Inline styles', value: formatBytes(dom.inlineStyle), help: 'Text of the <style> elements (characters, about bytes)' }
            ],
            width: NETWORK_LIST_WIDTH
        };
    }

    cssRow(css) {
        const unreadable = css.unreadable.length;
        let fonts = 0;
        try {
            document.fonts.forEach(font => fonts += font.status === 'loaded' ? 1 : 0);
        } catch (e) {
            // no FontFaceSet
        }
        return {
            name: 'CSS rules',
            // + : some sheets could not be counted
            value: `${css.total.toLocaleString()}${unreadable ? '+' : ''} >`,
            help: `Rules in the page's stylesheets, nested ones included${unreadable ? `, without the ${unreadable} sheet${unreadable > 1 ? 's' : ''} Chrome doesn't let scripts read` : ''}`,
            children: [
                { name: 'Stylesheets', value: css.sheets.toLocaleString(), help: '<link>, <style>, @import and sheets adopted by the document or shadow roots' },
                {
                    name: 'Not readable',
                    value: unreadable ? `${unreadable.toLocaleString()} >` : '0',
                    help: "Sheets from another origin without CORS (or still loading): Chrome doesn't let scripts read their rules, so they aren't counted",
                    children: css.unreadable.map(href => ({ name: shortUrlName(href), value: '', help: href })),
                    width: RESOURCE_LIST_WIDTH
                },
                { name: 'Style rules', value: css.style.toLocaleString(), help: 'Selectors with declarations' },
                { name: '@media, @supports…', value: css.grouping.toLocaleString(), help: '@media, @supports, @container, @layer and other rules that hold rules' },
                { name: '@font-face', value: css.fontFace.toLocaleString(), help: 'Fonts the CSS declares' },
                { name: '@keyframes', value: css.keyframes.toLocaleString(), help: 'Animations the CSS declares' },
                { name: '@import', value: css.import.toLocaleString(), help: 'Sheets loaded by other sheets: each one waits for the sheet that imports it' },
                { name: 'Other rules', value: css.other.toLocaleString(), help: '@property, @page, @counter-style, @font-feature-values…' },
                { name: 'Fonts loaded', value: fonts.toLocaleString(), help: 'Font faces the page has downloaded and can use (document.fonts)' }
            ],
            width: NETWORK_LIST_WIDTH
        };
    }

    // only what the browser tells (Chrome, not Firefox or Safari)
    deviceRows() {
        const rows = [];
        if (navigator.deviceMemory) {
            rows.push({ name: 'Device memory', value: `${navigator.deviceMemory} GB`, help: "The device's RAM, rounded to a power of 2 and capped by the browser, for privacy (navigator.deviceMemory)" });
        }
        if (navigator.hardwareConcurrency) {
            rows.push({ name: 'Logical cores', value: navigator.hardwareConcurrency.toLocaleString(), help: 'Logical processors the browser reports (navigator.hardwareConcurrency)' });
        }
        return rows;
    }

    // a panel (object inspector, run panel) takes the keyboard like a child level
    openPanel(panel) {
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(panel);
        this.openedChild = panel;
        panel.addEventListener('closeMe', this.removeChildComponent.bind(this));
    }

    // remove the child component and re-add the eventListeners
    removeChildComponent() {
        __info(`level1::removeChildComponent`)
        if (this.openedChild) {
            this.shadowRoot.removeChild(this.openedChild);
            this.openedChild = null;
        } else {
            __error(`Trying to remove a child when there is no opened child `)
        }
        this.addKeyboardListeners();
        document.querySelector('level-one')?.layout();
    }

    // slide the menu left until its open levels fit on screen, and back to the center as they close.
    // Levels that still don't fit overlap their parent (see keepInViewport)
    layout() {
        const margin = 16; // room for the windows' shadow
        const levels = [];
        for (let level = this.openedChild; level instanceof Level2; level = level.openedChild) {
            level.place();
            levels.push(level);
        }
        this.style.left = '50%';
        const deepest = levels[levels.length - 1] || this;
        const overflow = deepest.getBoundingClientRect().right + margin - window.innerWidth;
        const room = this.getBoundingClientRect().left - margin;
        this.style.left = `calc(50% - ${Math.max(0, Math.min(overflow, room))}px)`;
        levels.forEach(level => level.keepInViewport());
        this.bringToFront();
    }

    close() {
        __info(`level1::close`)
        // close the open levels first, or their keydown listeners stay on the document
        this.openedChild?.close();
        this.removeKeyboardListeners();
        this.removeEventListener('close', this.removeChildComponent)
        this.remove();
        // runDosson saves the hidden state, whether it was closed by ← or by the show/hide key
        this.dispatchEvent(new CustomEvent('dossonHidden'));
    }
    // TODO: Implement the inspect action
    inspect(action) {
        __info(`level1::inspect`);
        const l2 = document.createElement('level-two');
        l2.index = action.index;
        l2.name = action.name;
        const iframes = collectIframes(document).map(element => this.iframeRow(describeIframe(element), element));
        l2.actions = [{ name: "Loading ....", size: 0 }];
        readPageWindow().then(({ windowChanges, error }) => {
            __info(`got from main thread: ${windowChanges}`)
            l2.actions = error ? [errorRow('Not readable', 'locked', error)] : this.windowActions(windowChanges, iframes, pageSource(window));
            l2.render();
            l2.updateHoverState();
        });
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l2);
        this.openedChild = l2;
        l2.addEventListener('closeMe', this.removeChildComponent.bind(this));

    }


    // detection runs on each opening, so a framework loaded since shows up
    frameworks(action) {
        __info(`level1::frameworks`)
        const l2 = document.createElement('level-two');
        l2.index = action.index;
        l2.name = action.name;
        l2.actions = [{ name: "Loading ....", size: 0 }];
        detectFrameworks().then(result => {
            l2.actions = this.frameworkActions(result);
            l2.render();
            l2.updateHoverState();
        });
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l2);
        this.openedChild = l2;
        l2.addEventListener('closeMe', this.removeChildComponent.bind(this));
    }

    // the scan runs on each opening, so a value set since shows up
    security(action) {
        __info(`level1::security`)
        const l2 = document.createElement('level-two');
        l2.index = action.index;
        l2.name = action.name;
        l2.actions = [{ name: "Loading ....", size: 0 }];
        scanSecrets().then(result => {
            l2.actions = this.securityActions(result);
            l2.render();
            l2.updateHoverState();
        });
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l2);
        this.openedChild = l2;
        l2.addEventListener('closeMe', this.removeChildComponent.bind(this));
    }

    settings(action) {
        __info(`level1::settings`)
        const l2 = document.createElement('level-two');
        l2.index = action.index;
        l2.name = action.name;
        l2.actions = [
            {
                name: "Show/hide key",
                options: DOSSON_TOGGLE_KEYS.map(toggleKey => toggleKey.label),
                selected: DOSSON_TOGGLE_KEYS.findIndex(toggleKey => toggleKey.key === dossonSettings.dossonToggleKey),
                onChange: (selected) => saveDossonSetting('dossonToggleKey', DOSSON_TOGGLE_KEYS[selected].key),
                help: "Key to tap to show or hide Dosson. Enter, → or a click switches to the next one"
            },
            {
                name: "Presses",
                options: DOSSON_TOGGLE_PRESSES.map(String),
                selected: DOSSON_TOGGLE_PRESSES.indexOf(dossonSettings.dossonTogglePresses),
                onChange: (selected) => saveDossonSetting('dossonTogglePresses', DOSSON_TOGGLE_PRESSES[selected]),
                help: `How many taps in a row show or hide Dosson, each less than ${DOSSON_TOGGLE_DELAY / 1000} s after the previous one. Default 2`
            },
            ...[['Bigger text', 1], ['Smaller text', -1]].map(([name, step]) => ({
                name,
                step,
                value: dossonFontSizeLabel(step),
                run: () => {
                    saveDossonSetting('dossonFontSize', dossonFontSizeAfter(step));
                    applyDossonFontSize();
                    // both rows show the size they switch to
                    l2.actions.forEach(action => {
                        if (action.step) {
                            action.value = dossonFontSizeLabel(action.step);
                        }
                    });
                    l2.render();
                    l2.updateHoverState();
                    this.layout();
                },
                help: `Makes Dosson's text 1px ${step > 0 ? 'bigger' : 'smaller'}, to the size shown. Default 21px. Enter, → or a click changes it, and every page uses it`
            })),
            {
                name: "Privacy",
                value: '>',
                open: () => {
                    const panel = document.createElement('dosson-text');
                    panel.label = 'Privacy';
                    panel.paragraphs = DOSSON_PRIVACY;
                    return panel;
                },
                help: "What Dosson collects (nothing from the websites you visit) and what it connects to"
            },
            {
                name: "Source Code",
                value: '>',
                open: () => {
                    const panel = document.createElement('dosson-source');
                    panel.label = 'Source Code';
                    return panel;
                },
                help: "Dosson's whole source code as one long document, in this version. ↑ ↓ or Space turn the pages, D downloads it"
            }
        ];
        dossonVersion().then(version => {
            if (version && l2.isConnected) {
                l2.legendRight = `v${version}`;
                l2.render();
                l2.updateHoverState();
            }
        });
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l2);
        this.openedChild = l2;
        l2.addEventListener('closeMe', this.removeChildComponent.bind(this));
    }

    // Functions, Variables and Iframes: what Inspect shows for the page, and for each iframe
    // source is where the window's values live (see pageSource)
    windowActions(windowChanges, iframeRows, source) {
        // null when mainThread.js has no clean window to compare with (a sandboxed page)
        const windowProps = (windowChanges || []).sort((a, b) => COLLATOR.compare(a.name, b.name)).map(prop => ({
            ...prop,
            // a function opens the run panel, anything else the object inspector
            open: () => prop.type === 'function' ? createRunPanel(source, [prop.name], prop.name) : createInspector(source, [prop.name], prop.name, 'variables')
        }));
        const functions = windowProps.filter(prop => prop.type === 'function');
        const variables = windowProps.filter(prop => prop.type !== 'function').sort(compareVariables);
        return [
            { name: `Functions (${functions.length.toLocaleString()})`, children: functions },
            { name: `Variables (${variables.length.toLocaleString()})`, children: variables },
            { name: `Iframes (${iframeRows.length.toLocaleString()})`, children: iframeRows, width: IFRAME_LIST_WIDTH }
        ];
    }

    // description comes from describeIframe (frames.js). element is the <iframe> itself, when this document can
    // reach it: the top page's iframes, and those of its same-origin iframes. parentPath locates the frame holding it
    iframeRow(description, element, parentPath = []) {
        const { kind, host, src, id, title, width, height, index } = description;
        const path = parentPath && index >= 0 ? [...parentPath, index] : null;
        // only link http(s): a javascript: src would run in the page when clicked
        const isWeb = /^https?:/.test(src);
        const canOpen = kind !== 'ext';
        return {
            name: host ? shorten(host, 20, true) : id ? shorten(`#${id}`, 20) : '-',
            value: canOpen ? `${kind} >` : kind,
            help: `${title ? `"${title}". ` : ''}${IFRAME_KINDS[kind]}. ${width}×${height}px${isWeb ? `. ${shorten(src, 120)}` : ''}`,
            href: isWeb ? src : undefined,
            load: canOpen ? async () => [...await this.readFrame(src, element, path), ...this.iframeTools(description, element)] : undefined
        };
    }

    // from the page when the iframe is same-origin (the only way on the test page), else through background.js
    async readFrame(src, element, path) {
        const notReadable = (error) => [errorRow('Not readable', 'locked', error)];
        let frame;
        // mainThread.js only listens in the top page
        const fromPage = element?.ownerDocument === document ? readWindowFromPage(element) : null;
        if (fromPage?.windowChanges) {
            const children = collectIframes(element.contentDocument).map(child => this.iframeRow(describeIframe(child), child, path));
            frame = { windowChanges: fromPage.windowChanges, href: element.contentDocument.URL, iframeRows: children, source: pageSource(element) };
        } else if (!isExtension()) {
            return notReadable('The test page only reads same-origin iframes. Load Dosson as an extension for the others');
        } else if (!path) {
            return notReadable("Dosson can't locate this frame: iframes in shadow roots are left out of window.frames");
        } else {
            const fromExtension = await readFrameFromExtension(path);
            if (fromExtension.error) {
                return notReadable(fromExtension.error);
            }
            const children = fromExtension.iframes.map(child => this.iframeRow(child, undefined, path));
            frame = { windowChanges: fromExtension.windowChanges, href: fromExtension.href, iframeRows: children, source: frameSource(path) };
        }
        const actions = this.windowActions(frame.windowChanges, frame.iframeRows, frame.source);
        // a lazy iframe far from view still holds its first, empty document
        if (frame.href === 'about:blank' && /^https?:/.test(src)) {
            actions.unshift({ name: 'Not loaded yet', value: 'lazy?', help: `The frame still shows about:blank, not ${shorten(src, 120)}. Lazy iframes (loading="lazy") load when scrolled near` });
        }
        return actions;
    }

    // Show on page needs the element, and something to see; Copy URL only needs a web URL
    iframeTools({ src, width, height }, element) {
        const tools = [];
        if (element && width && height) {
            tools.push({ name: 'Show on page', value: 'Enter', run: () => showOnPage(element) });
        }
        if (/^https?:/.test(src)) {
            tools.push({
                name: 'Copy URL', value: 'Enter', run: async () => {
                    try {
                        await navigator.clipboard.writeText(src);
                        return 'copied';
                    } catch (e) {
                        return 'failed';
                    }
                }
            });
        }
        return tools;
    }

    // one row per framework found, JavaScript then CSS: its version (or "?") on the right, how it was found in the help.
    // Each opens its details (frameworkDetails)
    frameworkActions(result) {
        if (!result || result.error) {
            return [errorRow('Not detected', 'error', result?.error)];
        }
        if (!result.found.length) {
            return [{ name: 'None found', value: '-', help: `None of the ${result.checked} frameworks Dosson knows is on this page` }];
        }
        return result.found.map(framework => ({
            name: framework.name,
            value: `${framework.version || '?'} >`,
            help: `${framework.kind === 'js' ? 'JavaScript' : 'CSS'}. ${framework.version ? '' : 'Version unknown. '}Found by ${framework.evidence}`,
            href: framework.href,
            width: FRAMEWORK_DETAILS_WIDTH,
            load: () => this.frameworkDetails(framework)
        }));
    }

    // Secrets (one row per finding, most severe first) and what was scanned
    securityActions(result) {
        if (!result || result.error) {
            return [errorRow('Not scanned', 'error', result?.error)];
        }
        const frames = result.frames || [];
        // one finding per value: the same value found in several frames (a .google.com cookie read by the top page
        // and its iframes) or places is one entry listing them all. Frames of one origin share their storage and
        // cookies: those are listed once
        const byValue = new Map();
        const shared = new Set();
        frames.forEach(frame => frame.findings.forEach(finding => {
            const location = { frame, where: finding.where, display: finding.display, id: finding.id };
            if (finding.where !== 'window') {
                let origin = frame.href;
                try {
                    origin = new URL(frame.href).origin;
                } catch (e) { }
                const key = `${origin} ${finding.rule} ${finding.display}`;
                if (shared.has(key)) {
                    return;
                }
                shared.add(key);
            }
            const key = `${finding.rule} ${finding.fingerprint || `${finding.preview} ${finding.length}`}`;
            const existing = byValue.get(key);
            if (existing) {
                existing.locations.push(location);
                existing.alsoAt += finding.alsoAt;
            } else {
                byValue.set(key, { ...finding, locations: [location] });
            }
        }));
        const findings = [...byValue.values()];
        const order = { high: 0, medium: 1, low: 2 };
        findings.sort((a, b) => order[a.severity] - order[b.severity]);
        const count = (severity) => findings.filter(finding => finding.severity === severity).length;
        const totals = frames.reduce((sum, { stats }) => {
            ['globals', 'objects', 'strings', 'storage', 'cookies'].forEach(key => sum[key] += stats[key]);
            return sum;
        }, { globals: 0, objects: 0, strings: 0, storage: 0, cookies: 0 });
        const truncated = frames.filter(frame => frame.stats.truncated).map(frame => `${this.frameLabel(frame)}: ${frame.stats.truncated}`);
        const skipped = result.skipped ? ` ${result.skipped} frame${result.skipped > 1 ? 's' : ''} Dosson can't run in (sandboxed without allow-scripts) were skipped.` : '';
        const rows = this.groupSecrets(findings).map(group => group.length > 1 ? this.secretGroupRow(group) : this.secretRow(group[0]));
        return [
            {
                name: `Secrets (${findings.length})`,
                value: findings.length ? `${count('high')}H ${count('medium')}M ${count('low')}L >` : 'none',
                help: findings.length
                    ? `Values that look like credentials any script on the page can read: ${count('high')} high, ${count('medium')} medium, ${count('low')} low. Matches are clues, not proof: open one to see where it is`
                    : 'No value that looks like a credential in the variables, storage or cookies scripts can read',
                children: rows,
                width: SECRET_LIST_WIDTH
            },
            {
                name: 'Scanned',
                value: `${frames.length} frame${frames.length === 1 ? '' : 's'}`,
                help: `${totals.globals} globals, ${totals.objects} objects, ${totals.strings} strings, ${totals.storage} storage items, ${totals.cookies} cookies, in the top page and ${frames.length - 1} iframe${frames.length === 2 ? '' : 's'}.${skipped}${truncated.length ? ` Cut short: ${truncated.join('; ')}.` : ''} Only data properties: getters don't run. const and let at the top level of a script aren't on window, and closures can't be read`
            }
        ];
    }

    frameLabel({ path, href }) {
        if (!path.length) {
            return 'top page';
        }
        let host = '';
        try {
            host = new URL(href).host;
        } catch (e) { }
        return `iframe ${host || href || '?'} [${path.join(', ')}]`;
    }

    // a finding opens its details: where it is (every place it was found), the redacted value, why it was flagged.
    // Enter on the value or a place shows the whole value and its path, to copy
    secretRow(finding) {
        const [first, ...others] = finding.locations;
        const where = `${this.frameLabel(first.frame)}${others.length ? ` and ${others.length} more` : ''}`;
        return {
            name: finding.label,
            value: `${finding.severity.toUpperCase()}${others.length ? ` ×${finding.locations.length}` : ''} >`,
            help: `${first.display}, ${where}. ${finding.preview}. ${finding.why}`,
            width: SECRET_DETAILS_WIDTH,
            children: this.secretDetails(finding),
            data: {
                label: finding.label, rule: finding.rule, severity: finding.severity, why: finding.why, value: finding.preview,
                length: finding.length, alsoAt: finding.alsoAt,
                locations: finding.locations.map(({ frame, where, display }) => ({ frame: this.frameLabel(frame), href: frame.href, where, display }))
            }
        };
    }

    // findings of one rule side by side in one object (a module's CredentialRender, CredentialInteraction…) are one
    // row: lists of findings, in order, each group where its first finding was
    groupSecrets(findings) {
        const groups = new Map();
        findings.forEach((finding, i) => {
            let key = i;
            if (finding.locations.length === 1) {
                const [{ frame, display }] = finding.locations;
                const parent = secretParent(display);
                if (parent) {
                    key = `${finding.rule} ${frame.path.join(',')} ${parent}`;
                }
            }
            groups.set(key, [...(groups.get(key) || []), finding]);
        });
        return [...groups.values()];
    }

    // a group opens its findings, each named by its property
    secretGroupRow(findings) {
        const [first] = findings;
        const [{ frame, display }] = first.locations;
        const parent = secretParent(display);
        const names = findings.map(finding => finding.locations[0].display.slice(parent.length).replace(/^\./, ''));
        return {
            name: `${first.label} (${findings.length})`,
            value: `${first.severity.toUpperCase()} >`,
            help: `${findings.length} in ${parent}, ${this.frameLabel(frame)}: ${names.join(', ')}. ${first.why.replace(/^Named "[^"]*" and/, 'Named so and')}`,
            width: SECRET_LIST_WIDTH,
            children: findings.map((finding, i) => ({ ...this.secretRow(finding), name: names[i] })),
            data: { label: first.label, rule: first.rule, severity: first.severity, count: findings.length, parent, frame: this.frameLabel(frame), href: frame.href }
        };
    }

    secretDetails(finding) {
        const { locations } = finding;
        const open = () => this.secretPanel(finding);
        const rows = [
            { name: 'Severity', value: finding.severity.toUpperCase(), help: { high: 'A credential that should never reach a browser', medium: 'Probably a credential, or one of limited reach', low: 'Worth a look, often fine' }[finding.severity] }
        ];
        const also = finding.alsoAt ? `, and ${finding.alsoAt} more place${finding.alsoAt > 1 ? 's' : ''} with the same value` : '';
        if (locations.length === 1) {
            const [{ frame, where, display }] = locations;
            const label = this.frameLabel(frame);
            rows.push(
                { name: SECRET_WHERE[where], value: display, help: `${display}${also}. Enter shows the value and its path, to copy`, open },
                { name: 'Frame', value: label, help: frame.href ? shorten(frame.href, 200) : label }
            );
        } else {
            // one row per place: the frame, then where in it
            locations.forEach(({ frame, where, display }) => {
                const label = this.frameLabel(frame);
                rows.push({ name: label, value: display, help: `${SECRET_WHERE[where]} ${display}, in ${frame.href ? shorten(frame.href, 200) : label}. Enter shows the value and its path, to copy`, open });
            });
            rows[1].help += also;
        }
        rows.push(
            { name: 'Value', value: finding.preview, help: `Shortened on purpose: Enter shows it whole, with its path, to copy${locations.length > 1 ? `. The same value in all ${locations.length} places` : ''}`, open },
            { name: 'Why', value: finding.rule, help: finding.why }
        );
        const paths = [...new Set(locations.map(location => location.display))].join('\n');
        rows.push({
            name: 'Copy path', value: 'Enter', help: `Copies ${paths.replace(/\n/g, ', ')}`, run: async () => {
                try {
                    await navigator.clipboard.writeText(paths);
                    return 'copied';
                } catch (e) {
                    return 'failed';
                }
            }
        });
        return rows;
    }

    // the whole value, read from the frame whose scan found it (on test.html the top page scanned every frame), and
    // where it is
    secretPanel(finding) {
        const [{ frame, id }] = finding.locations;
        const source = frame.path.length && isExtension() ? frameSource(frame.path) : pageSource(window);
        const places = finding.locations.map(({ frame, display }) => ({ display, frame: this.frameLabel(frame) }));
        return Object.assign(document.createElement('dosson-secret'), { source, secretId: id, label: finding.label, places });
    }

    // GitHub, website, the version found and when it was released, the latest version and when
    async frameworkDetails({ href, npm, github, version, evidence }) {
        const rows = [];
        if (github) {
            const url = `https://github.com/${github}`;
            rows.push({ name: 'GitHub', value: github, help: `${url}. Enter opens it in a new tab`, href: url, run: () => openInNewTab(url) });
        }
        rows.push({ name: 'Website', value: new URL(href).host.replace(/^www\./, ''), help: `${href}. Enter opens it in a new tab`, href, run: () => openInNewTab(href) });
        rows.push({ name: 'Version', value: version || '?', help: `The version on this page. ${version ? `Found by ${evidence}` : `Unknown: found by ${evidence}`}` });
        if (!npm && !github) {
            rows.push({ name: 'Latest', value: '?', help: 'Not on npm or GitHub: Dosson has no way to read its releases' });
            return rows;
        }
        const releases = await readReleases({ npm, github });
        if (releases.error) {
            rows.push({ name: 'Latest', value: '?', help: `Can't read the releases (${npm ? `npm package ${npm}` : `GitHub ${github}`}): ${releases.error}` });
            return rows;
        }
        const current = version && findRelease(releases.versions, version);
        if (current) {
            const { day, age } = formatReleaseDate(current.date);
            const which = current.version === version ? '' : `${current.version}, the newest release matching ${version}. `;
            rows.push({ name: 'Released', value: day, help: `${which}Released ${age}. From the ${releases.source}` });
        } else {
            rows.push({ name: 'Released', value: '?', help: `${version ? `No release ${version}` : 'No version found'} in the ${releases.source}` });
        }
        const latest = releases.versions.find(release => release.latest);
        if (latest) {
            const { day, age } = formatReleaseDate(latest.date);
            const status = !current ? '' : compareVersions(current.version, latest.version) >= 0 ? 'This page is up to date. ' : 'This page is behind. ';
            rows.push({ name: 'Latest', value: latest.version, help: `${status}From the ${releases.source}`, href: github ? `https://github.com/${github}/releases` : `https://www.npmjs.com/package/${npm}` });
            rows.push({ name: 'Latest released', value: day, help: `${latest.version} was released ${age}` });
        } else {
            rows.push({ name: 'Latest', value: '?', help: `No stable release in the ${releases.source}` });
        }
        return rows;
    }

    // this load the webVitals we got from https://unpkg.com/web-vitals@3.5.2/dist/web-vitals.js
    // had to do a manipulation: remove the export statement in favor of getting
    // the object
    loadWebVitals() {
        __info(`level2::loadWebVitals`)
        var e, n, t, i, r, a = -1, o = function (e) { addEventListener("pageshow", (function (n) { n.persisted && (a = n.timeStamp, e(n)) }), !0) }, c = function () { return window.performance && performance.getEntriesByType && performance.getEntriesByType("navigation")[0] }, u = function () { var e = c(); return e && e.activationStart || 0 }, f = function (e, n) { var t = c(), i = "navigate"; a >= 0 ? i = "back-forward-cache" : t && (document.prerendering || u() > 0 ? i = "prerender" : document.wasDiscarded ? i = "restore" : t.type && (i = t.type.replace(/_/g, "-"))); return { name: e, value: void 0 === n ? -1 : n, rating: "good", delta: 0, entries: [], id: "v3-".concat(Date.now(), "-").concat(Math.floor(8999999999999 * Math.random()) + 1e12), navigationType: i } }, s = function (e, n, t) { try { if (PerformanceObserver.supportedEntryTypes.includes(e)) { var i = new PerformanceObserver((function (e) { Promise.resolve().then((function () { n(e.getEntries()) })) })); return i.observe(Object.assign({ type: e, buffered: !0 }, t || {})), i } } catch (e) { } }, d = function (e, n, t, i) { var r, a; return function (o) { n.value >= 0 && (o || i) && ((a = n.value - (r || 0)) || void 0 === r) && (r = n.value, n.delta = a, n.rating = function (e, n) { return e > n[1] ? "poor" : e > n[0] ? "needs-improvement" : "good" }(n.value, t), e(n)) } }, l = function (e) { requestAnimationFrame((function () { return requestAnimationFrame((function () { return e() })) })) }, p = function (e) { var n = function (n) { "pagehide" !== n.type && "hidden" !== document.visibilityState || e(n) }; addEventListener("visibilitychange", n, !0), addEventListener("pagehide", n, !0) }, v = function (e) { var n = !1; return function (t) { n || (e(t), n = !0) } }, m = -1, h = function () { return "hidden" !== document.visibilityState || document.prerendering ? 1 / 0 : 0 }, g = function (e) { "hidden" === document.visibilityState && m > -1 && (m = "visibilitychange" === e.type ? e.timeStamp : 0, T()) }, y = function () { addEventListener("visibilitychange", g, !0), addEventListener("prerenderingchange", g, !0) }, T = function () { removeEventListener("visibilitychange", g, !0), removeEventListener("prerenderingchange", g, !0) }, E = function () { return m < 0 && (m = h(), y(), o((function () { setTimeout((function () { m = h(), y() }), 0) }))), { get firstHiddenTime() { return m } } }, C = function (e) { document.prerendering ? addEventListener("prerenderingchange", (function () { return e() }), !0) : e() }, L = [1800, 3e3], w = function (e, n) { n = n || {}, C((function () { var t, i = E(), r = f("FCP"), a = s("paint", (function (e) { e.forEach((function (e) { "first-contentful-paint" === e.name && (a.disconnect(), e.startTime < i.firstHiddenTime && (r.value = Math.max(e.startTime - u(), 0), r.entries.push(e), t(!0))) })) })); a && (t = d(e, r, L, n.reportAllChanges), o((function (i) { r = f("FCP"), t = d(e, r, L, n.reportAllChanges), l((function () { r.value = performance.now() - i.timeStamp, t(!0) })) }))) })) }, b = [.1, .25], S = function (e, n) { n = n || {}, w(v((function () { var t, i = f("CLS", 0), r = 0, a = [], c = function (e) { e.forEach((function (e) { if (!e.hadRecentInput) { var n = a[0], t = a[a.length - 1]; r && e.startTime - t.startTime < 1e3 && e.startTime - n.startTime < 5e3 ? (r += e.value, a.push(e)) : (r = e.value, a = [e]) } })), r > i.value && (i.value = r, i.entries = a, t()) }, u = s("layout-shift", c); u && (t = d(e, i, b, n.reportAllChanges), p((function () { c(u.takeRecords()), t(!0) })), o((function () { r = 0, i = f("CLS", 0), t = d(e, i, b, n.reportAllChanges), l((function () { return t() })) })), setTimeout(t, 0)) }))) }, A = { passive: !0, capture: !0 }, I = new Date, P = function (i, r) { e || (e = r, n = i, t = new Date, k(removeEventListener), F()) }, F = function () { if (n >= 0 && n < t - I) { var r = { entryType: "first-input", name: e.type, target: e.target, cancelable: e.cancelable, startTime: e.timeStamp, processingStart: e.timeStamp + n }; i.forEach((function (e) { e(r) })), i = [] } }, M = function (e) { if (e.cancelable) { var n = (e.timeStamp > 1e12 ? new Date : performance.now()) - e.timeStamp; "pointerdown" == e.type ? function (e, n) { var t = function () { P(e, n), r() }, i = function () { r() }, r = function () { removeEventListener("pointerup", t, A), removeEventListener("pointercancel", i, A) }; addEventListener("pointerup", t, A), addEventListener("pointercancel", i, A) }(n, e) : P(n, e) } }, k = function (e) { ["mousedown", "keydown", "touchstart", "pointerdown"].forEach((function (n) { return e(n, M, A) })) }, D = [100, 300], x = function (t, r) { r = r || {}, C((function () { var a, c = E(), u = f("FID"), l = function (e) { e.startTime < c.firstHiddenTime && (u.value = e.processingStart - e.startTime, u.entries.push(e), a(!0)) }, m = function (e) { e.forEach(l) }, h = s("first-input", m); a = d(t, u, D, r.reportAllChanges), h && p(v((function () { m(h.takeRecords()), h.disconnect() }))), h && o((function () { var o; u = f("FID"), a = d(t, u, D, r.reportAllChanges), i = [], n = -1, e = null, k(addEventListener), o = l, i.push(o), F() })) })) }, B = 0, R = 1 / 0, H = 0, N = function (e) { e.forEach((function (e) { e.interactionId && (R = Math.min(R, e.interactionId), H = Math.max(H, e.interactionId), B = H ? (H - R) / 7 + 1 : 0) })) }, O = function () { return r ? B : performance.interactionCount || 0 }, q = function () { "interactionCount" in performance || r || (r = s("event", N, { type: "event", buffered: !0, durationThreshold: 0 })) }, j = [200, 500], _ = 0, z = function () { return O() - _ }, G = [], J = {}, K = function (e) { var n = G[G.length - 1], t = J[e.interactionId]; if (t || G.length < 10 || e.duration > n.latency) { if (t) t.entries.push(e), t.latency = Math.max(t.latency, e.duration); else { var i = { id: e.interactionId, latency: e.duration, entries: [e] }; J[i.id] = i, G.push(i) } G.sort((function (e, n) { return n.latency - e.latency })), G.splice(10).forEach((function (e) { delete J[e.id] })) } }, Q = function (e, n) { n = n || {}, C((function () { var t; q(); var i, r = f("INP"), a = function (e) { e.forEach((function (e) { (e.interactionId && K(e), "first-input" === e.entryType) && (!G.some((function (n) { return n.entries.some((function (n) { return e.duration === n.duration && e.startTime === n.startTime })) })) && K(e)) })); var n, t = (n = Math.min(G.length - 1, Math.floor(z() / 50)), G[n]); t && t.latency !== r.value && (r.value = t.latency, r.entries = t.entries, i()) }, c = s("event", a, { durationThreshold: null !== (t = n.durationThreshold) && void 0 !== t ? t : 40 }); i = d(e, r, j, n.reportAllChanges), c && ("PerformanceEventTiming" in window && "interactionId" in PerformanceEventTiming.prototype && c.observe({ type: "first-input", buffered: !0 }), p((function () { a(c.takeRecords()), r.value < 0 && z() > 0 && (r.value = 0, r.entries = []), i(!0) })), o((function () { G = [], _ = O(), r = f("INP"), i = d(e, r, j, n.reportAllChanges) }))) })) }, U = [2500, 4e3], V = {}, W = function (e, n) { n = n || {}, C((function () { var t, i = E(), r = f("LCP"), a = function (e) { var n = e[e.length - 1]; n && n.startTime < i.firstHiddenTime && (r.value = Math.max(n.startTime - u(), 0), r.entries = [n], t()) }, c = s("largest-contentful-paint", a); if (c) { t = d(e, r, U, n.reportAllChanges); var m = v((function () { V[r.id] || (a(c.takeRecords()), c.disconnect(), V[r.id] = !0, t(!0)) }));["keydown", "click"].forEach((function (e) { addEventListener(e, (function () { return setTimeout(m, 0) }), !0) })), p(m), o((function (i) { r = f("LCP"), t = d(e, r, U, n.reportAllChanges), l((function () { r.value = performance.now() - i.timeStamp, V[r.id] = !0, t(!0) })) })) } })) }, X = [800, 1800], Y = function e(n) { document.prerendering ? C((function () { return e(n) })) : "complete" !== document.readyState ? addEventListener("load", (function () { return e(n) }), !0) : setTimeout(n, 0) }, Z = function (e, n) { n = n || {}; var t = f("TTFB"), i = d(e, t, X, n.reportAllChanges); Y((function () { var r = c(); if (r) { var a = r.responseStart; if (a <= 0 || a > performance.now()) return; t.value = Math.max(a - u(), 0), t.entries = [r], i(!0), o((function () { t = f("TTFB", 0), (i = d(e, t, X, n.reportAllChanges))(!0) })) } })) };
        const ro = {
            CLSThresholds: b,
            FCPThresholds: L,
            FIDThresholds: D,
            INPThresholds: j,
            LCPThresholds: U,
            TTFBThresholds: X,
            getCLS: S,
            getFCP: w,
            getFID: x,
            getINP: Q,
            getLCP: W,
            getTTFB: Z,
            onCLS: S,
            onFCP: w,
            onFID: x,
            onINP: Q,
            onLCP: W,
            onTTFB: Z
        };
        return ro;
    }

    // on the window, before the page's own listeners: the keys Dosson uses must not reach the page (Gmail's ← → move
    // between emails), see consumeKey
    addKeyboardListeners() {
        window.addEventListener('keydown', this.handleKeyDown, true);
    }

    removeKeyboardListeners() {
        window.removeEventListener('keydown', this.handleKeyDown, true);
    }

}

class Level2 extends Level1 {
    constructor() {
        super();
        this.index = 0;
        // Level1's constructor set the root menu's actions; the opener sets this level's own
        this.actions = [];
        __info(`level2::constructor`)
        // requestIdleCallback(this.setupTasks.bind(this));
    }

    connectedCallback() {
        __info(`level2::connectedCallback`)
        this.tabIndex = 0;
        this.loadCSS();
        this.loadJS();
        if (!this.isRendered) {
            this.render();
        }
        this.addKeyboardListeners();
        this.selectedIndex = 0;
        this.updateHoverState();
        // the parent sets openedChild once appendChild returns: lay out after that, still before the next paint
        queueMicrotask(() => document.querySelector('level-one')?.layout());
    }

    render() {
        __info(`level2::render`)
        let divs = this.shadowRoot.querySelectorAll('div');
        divs.forEach(div => div.remove());

        const headerTemplate = document.getElementById('dosson_action-header');
        const headerNode = document.importNode(headerTemplate.content, true);
        this.shadowRoot.appendChild(headerNode);

        const ul = document.createElement('ul');
        ul.classList.add('actions');
        const template = document.getElementById('dosson_action-template');



        const div = document.createElement('div');
        div.className = "main tui-window green-168";
        const fieldset = document.createElement('fieldset');

        const legend = document.createElement('legend');
        legend.textContent = this.name
        fieldset.appendChild(legend);
        fieldset.className = "tui-fieldset legend tui-border-solid";
        div.appendChild(fieldset);
        // a long list (Inspect → Functions on Google Meet: 24,000 rows) only has the rows on screen, from firstRow: it
        // opens and moves at once
        this.virtual = this.actions.length > VIRTUAL_LIST_MIN;
        this.firstRow = this.virtual ? Math.min(this.firstRow || 0, Math.max(0, this.actions.length - LEVEL_ROWS)) : 0;
        // text on the top border, on the right: Settings shows Dosson's version, a long list where you are in it
        if (this.legendRight || this.virtual) {
            div.style.position = 'relative';
            this.legendRightSpan = document.createElement('span');
            this.legendRightSpan.className = 'dosson-legend-right';
            this.legendRightSpan.textContent = this.legendRight || '';
            div.appendChild(this.legendRightSpan);
        }
        // the ms rows (Performance) start web-vitals once: its callbacks write into the row shown at the time
        this.actions.forEach((action, index) => {
            if (action.ms && !action.msStarted) {
                action.msStarted = true;
                action.ms(ms => {
                    __info(`calling ${action.ms.name} ... `);
                    this.setRowText(index, Math.round(ms.value) + ' ms');
                }, { reportAllChanges: true });
            }
        });
        this.list = ul;
        this.template = template;
        this.renderRows();
        // the list scrolls, 12 whole rows high (see .item), so no row is cut by the border or hidden by the footer
        ul.style.maxHeight = `calc(1.2em * ${LEVEL_ROWS})`;
        ul.style.overflow = 'hidden';
        // the wheel scrolls 3 rows at a time, the selection stays where it is
        ul.addEventListener('wheel', (event) => {
            event.preventDefault();
            this.scrollRows(Math.sign(event.deltaY) * 3);
        }, { passive: false });
        fieldset.appendChild(ul);

        // room for the footer, which sits on the bottom border: ? opens the help (when there is some), x exports the
        // level as JSON
        fieldset.style.paddingBottom = '1em';
        const footer = document.createElement('span');
        footer.className = 'tui-fieldset-text right help-toggle';
        const exportText = document.createElement('span');
        exportText.textContent = 'x export';
        exportText.addEventListener('click', () => this.exportJson());
        if (this.hasHelp) {
            const helpText = document.createElement('span');
            helpText.textContent = '? help';
            helpText.addEventListener('click', () => this.toggleHelp());
            footer.append(helpText, ', ');
        }
        footer.appendChild(exportText);
        div.appendChild(footer);

        this.shadowRoot.appendChild(div);
        this.style.position = 'absolute';
        // above the parent's footer (TuiCSS gives .tui-fieldset-text z-index 2), which a level moved over its parent covers
        this.style.zIndex = 3;
        this.style.width = this.width || dossonPx(300);
        this.place();
        // a bigger font (Settings) grows the footer more than 1em: keep it off the last row
        const helpToggle = div.querySelector('.help-toggle');
        if (helpToggle && this.isConnected) {
            const overlap = ul.getBoundingClientRect().bottom - helpToggle.getBoundingClientRect().top;
            if (overlap > 0) {
                fieldset.style.paddingBottom = `calc(1em + ${Math.ceil(overlap)}px)`;
            }
        }
        // this.style.height = '100px';
        this.isRendered = true;
        // a level that renders again once loaded may have grown
        if (this.isConnected) {
            document.querySelector('level-one')?.layout();
        }

    }

    // the rows in the list: every row, or for a long list the 12 from firstRow
    renderRows() {
        const end = this.virtual ? Math.min(this.actions.length, this.firstRow + LEVEL_ROWS) : this.actions.length;
        const items = [];
        for (let index = this.firstRow; index < end; index++) {
            const action = this.actions[index];
            const clone = document.importNode(this.template.content, true);
            const li = clone.querySelector('li');
            const a = li.querySelector('a');
            a.addEventListener('click', (event) => {
                event.preventDefault();
                this.openedChild?.close();
                this.selectedIndex = index;
                this.updateHoverState();
                this.activate(index);
            });
            a.querySelector('span:last-child').textContent = action.name;
            a.querySelector('.tui-shortcut').textContent = this.rowText(action);
            items.push(li);
        }
        this.list.replaceChildren(...items);
        this.updatePosition();
    }

    // a row's right-hand text: what run or web-vitals last wrote (shown), else its value, setting, type…
    rowText(action) {
        if (action.shown !== undefined) {
            return action.shown;
        }
        if (action.ms) {
            return '';
        }
        if (action.children && action.value === undefined) {
            // with a value, the value shows (ending in > when it opens)
            return action.children.length ? '>' : '';
        }
        if (action.options) {
            return `[${action.options[action.selected]}]`;
        }
        if (action.value !== undefined) {
            return action.value === '' ? '""' : String(action.value);
        }
        return action.type || 'N/I';
    }

    // the right-hand text of the row at index, kept when the row scrolls out and back
    setRowText(index, text) {
        this.actions[index].shown = text;
        const span = this.rowElement(index)?.querySelector('.tui-shortcut');
        if (span) {
            span.textContent = text;
        }
    }

    rowElement(index) {
        return this.list?.children[index - this.firstRow];
    }

    // where the selection is in a long list, on the top border: its row number (the legend has the count)
    updatePosition() {
        if (this.virtual && !this.legendRight && this.legendRightSpan) {
            this.legendRightSpan.textContent = `#${(this.selectedIndex + 1).toLocaleString()}`;
        }
    }

    updateHoverState() {
        [...(this.list?.children || [])].forEach((li, i) => li.classList.toggle('hover', i + this.firstRow === this.selectedIndex));
        this.updatePosition();
    }

    // moves the view by rows, without moving the selection
    scrollRows(rows) {
        if (this.virtual) {
            const firstRow = Math.max(0, Math.min(this.firstRow + rows, this.actions.length - LEVEL_ROWS));
            if (firstRow !== this.firstRow) {
                this.firstRow = firstRow;
                this.renderRows();
                this.updateHoverState();
            }
        } else if (this.list?.children[0]) {
            this.list.scrollTop += rows * this.list.children[0].getBoundingClientRect().height;
        }
    }

    // right of the parent, level with the row that opened it
    place() {
        this.style.left = this.left || dossonPx(200); // This should be the width of the parent level
        this.style.top = dossonPx(this.index * 18);
    }

    // a level that would leave the screen even once the menu has slid left: move it left and up, over its parent
    keepInViewport() {
        const margin = 16; // room for the window's shadow
        const rect = this.getBoundingClientRect();
        const overflowRight = rect.right + margin - window.innerWidth;
        if (overflowRight > 0) {
            this.style.left = `${parseFloat(this.style.left) - overflowRight}px`;
        }
        const overflowBottom = rect.bottom + margin - window.innerHeight;
        if (overflowBottom > 0) {
            this.style.top = `${parseFloat(this.style.top) - overflowBottom}px`;
        }
    }

    // Method to handle keydown events
    handleKeyDown = (event) => {
        __info(`level2::handleKeyDown`)
        // while the help modal is open, only ? and Esc (to close it) are ours; Tab/Enter stay native for the links
        if (this.helpModal) {
            if (event.key === '?' || event.key === 'Escape') {
                this.toggleHelp();
                consumeKey(event);
            }
            return;
        }
        switch (event.key) {
            case '?':
                if (this.hasHelp) {
                    this.toggleHelp();
                    consumeKey(event);
                }
                break;
            case 'x':
            case 'X':
                this.exportJson();
                consumeKey(event);
                break;
            case 'ArrowDown':
                this.selectedIndex = (this.selectedIndex + 1) % this.actions.length;
                consumeKey(event);
                break;
            case 'ArrowUp':
                this.selectedIndex = (this.selectedIndex - 1 + this.actions.length) % this.actions.length;
                consumeKey(event);
                break;
            case 'PageDown':
            case 'PageUp':
                this.selectedIndex = Math.max(0, Math.min(this.actions.length - 1, this.selectedIndex + (event.key === 'PageDown' ? LEVEL_ROWS : -LEVEL_ROWS)));
                consumeKey(event);
                break;
            case 'Home':
            case 'End':
                this.selectedIndex = event.key === 'Home' ? 0 : this.actions.length - 1;
                consumeKey(event);
                break;
            // Esc too: in a level it goes back up, like ←. Only on the root menu does it count toward showing/hiding
            case 'ArrowLeft':
            case 'Escape':
                this.close();
                consumeKey(event);
                break;
            case 'Enter':
            case 'ArrowRight':
                this.activate(this.selectedIndex);
                consumeKey(event);
                break;
        }
        this.updateHoverState();
        this.updateScrollPosition();
    }

    // open the action's children (load fetches them first) or its panel, run it, or switch a setting to its next option
    activate(index) {
        const action = this.actions[index];
        if (action.children?.length) {
            this.openChildren(action);
        } else if (action.load) {
            const level = this.openChildren({ ...action, children: [{ name: "Loading ....", size: 0 }] });
            action.load().then(children => {
                level.actions = children;
                level.render();
                level.updateHoverState();
            });
        } else if (action.open) {
            const panel = action.open();
            // the editor changed the variable itself (path [name]): show its new value
            panel.addEventListener('dossonSaved', ({ detail }) => {
                if (detail.path.length === 1 && 'value' in action) {
                    action.value = detail.value ?? detail.preview;
                    action.type = detail.type;
                    this.setRowText(index, action.value === '' ? '""' : String(action.value));
                }
            });
            this.openPanel(panel);
        } else if (action.run) {
            // run may answer with a new right-hand text, like "copied"
            Promise.resolve(action.run()).then(text => {
                if (text) {
                    this.setRowText(index, text);
                }
            });
        } else if (action.options) {
            action.selected = (action.selected + 1) % action.options.length;
            action.onChange(action.selected);
            this.setRowText(index, `[${action.options[action.selected]}]`);
        }
    }

    // the level as a JSON file: each row with its right-hand text as shown, its help, and the rows it opens when
    // they are already known (a row that loads them, like a framework's releases, exports without them)
    exportJson() {
        const exportRow = (action, text) => {
            const row = { name: action.name };
            const value = text ?? (action.options ? action.options[action.selected] : action.value ?? action.type);
            if (value !== undefined && value !== '>') {
                row.value = typeof value === 'string' ? value.replace(/ ?>$/, '') : value;
            }
            ['help', 'href', 'data'].forEach(key => {
                if (action[key] !== undefined) {
                    row[key] = action[key];
                }
            });
            if (action.children?.length) {
                row.children = action.children.map(child => exportRow(child));
            }
            return row;
        };
        const json = {
            dosson: chrome.runtime?.getManifest?.().version,
            page: location.href,
            exported: new Date().toISOString(),
            level: this.name,
            rows: this.actions.map(action => exportRow(action, this.rowText(action)))
        };
        const slug = String(this.name).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'level';
        const url = URL.createObjectURL(new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' }));
        const a = document.createElement('a');
        a.href = url;
        a.download = `dosson-${slug}-${location.hostname || 'page'}.json`;
        a.click();
        setTimeout(() => URL.revokeObjectURL(url), 1000);
    }

    get hasHelp() {
        return this.actions.some(action => action.help);
    }

    // show or hide a modal explaining each action, with a link opening in a new tab
    toggleHelp() {
        __info(`level2::toggleHelp`)
        if (this.helpModal) {
            this.helpModal.remove();
            this.helpModal = null;
            return;
        }
        const modal = document.createElement('div');
        modal.className = 'help tui-window';
        const fieldset = document.createElement('fieldset');
        fieldset.className = 'tui-fieldset tui-border-double';
        const legend = document.createElement('legend');
        legend.textContent = `${this.name} help`;
        const closeButton = document.createElement('button');
        closeButton.className = 'tui-fieldset-button';
        closeButton.textContent = '■';
        closeButton.addEventListener('click', () => this.toggleHelp());
        const dl = document.createElement('dl');
        this.actions.filter(action => action.help).forEach(action => {
            const dt = document.createElement('dt');
            const a = document.createElement('a');
            if (action.href) {
                a.href = action.href;
                a.target = '_blank';
                a.rel = 'noopener noreferrer';
            }
            a.textContent = action.name;
            dt.appendChild(a);
            const dd = document.createElement('dd');
            dd.textContent = action.help;
            dl.append(dt, dd);
        });
        fieldset.append(legend, closeButton, dl);
        modal.appendChild(fieldset);
        // center on the viewport: Level1's transform makes it the containing block, so position: fixed won't do it
        const rect = this.getBoundingClientRect();
        modal.style.left = `${window.innerWidth / 2 - rect.left}px`;
        modal.style.top = `${window.innerHeight / 2 - rect.top}px`;
        this.shadowRoot.appendChild(modal);
        this.helpModal = modal;
        modal.querySelector('a[href]')?.focus();
    }

    // open a nested level-two listing the action's children
    openChildren(action) {
        __info(`level2::openChildren`)
        const l3 = document.createElement('level-two');
        l3.index = this.selectedIndex;
        l3.name = action.name;
        l3.left = this.style.width;
        l3.width = action.width && dossonPx(parseFloat(action.width));
        l3.actions = action.children;
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(l3);
        this.openedChild = l3;
        l3.addEventListener('closeMe', this.removeChildComponent.bind(this));
        return l3;
    }

    updateScrollPosition() {
        if (this.virtual) {
            const firstRow = Math.min(Math.max(this.firstRow, this.selectedIndex - LEVEL_ROWS + 1), this.selectedIndex);
            if (firstRow !== this.firstRow) {
                this.firstRow = firstRow;
                this.renderRows();
                this.updateHoverState();
            }
            return;
        }
        const list = this.shadowRoot.querySelector('.actions');
        const selectedItem = list.querySelectorAll('li')[this.selectedIndex];
        const listRect = list.getBoundingClientRect();
        const selectedItemRect = selectedItem.getBoundingClientRect();

        if (selectedItemRect.top < listRect.top) {
            list.scrollTop -= listRect.top - selectedItemRect.top;
        } else if (selectedItemRect.bottom > listRect.bottom) {
            list.scrollTop += selectedItemRect.bottom - listRect.bottom;
        }
    }

    // remove all the listeners and DOM elements
    close() {
        __info(`level2::close`)
        this.openedChild?.close();
        this.removeKeyboardListeners();
        this.dispatchEvent(new CustomEvent('closeMe', { bubbles: true }));
    }
}

// A red and white window centered on the screen, opened from a level or from another panel. Like a level, it takes
// the keyboard while it's open, and fires closeMe when it closes
class Panel extends HTMLElement {
    openedChild = null;

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        const style = document.createElement('style');
        style.textContent = getCssString();
        this.shadowRoot.append(style, document.importNode(document.getElementById('dosson_action-header').content, true));
        this.render();
        this.center();
        this.addKeyboardListeners();
    }

    // the levels' transforms make the parent the containing block, so position: fixed won't center it. A panel
    // opened from a panel sits a little lower and to the right, so both show
    center() {
        const parent = this.getRootNode().host;
        const rect = parent.getBoundingClientRect();
        const offset = parent instanceof Panel ? 24 : 0;
        this.style.position = 'absolute';
        this.style.left = `${window.innerWidth / 2 - rect.left + offset}px`;
        this.style.top = `${window.innerHeight / 2 - rect.top + offset}px`;
        this.style.transform = 'translate(-50%, -50%)';
        this.style.zIndex = 20;
    }

    // the window around the content, with the keys to use on its bottom border; returns the fieldset to fill
    frame(title, keys) {
        const div = document.createElement('div');
        div.className = 'panel tui-window red-168';
        const fieldset = document.createElement('fieldset');
        fieldset.className = 'tui-fieldset tui-border-double';
        const legend = document.createElement('legend');
        legend.textContent = title;
        fieldset.appendChild(legend);
        const footer = document.createElement('span');
        footer.className = 'tui-fieldset-text right';
        footer.textContent = keys;
        div.append(fieldset, footer);
        this.shadowRoot.appendChild(div);
        return fieldset;
    }

    button(text, onClick) {
        const button = document.createElement('button');
        button.textContent = text;
        button.addEventListener('click', onClick);
        return button;
    }

    openPanel(panel) {
        this.removeKeyboardListeners();
        this.shadowRoot.appendChild(panel);
        this.openedChild = panel;
        panel.addEventListener('closeMe', () => this.removeChildComponent());
    }

    removeChildComponent() {
        this.shadowRoot.removeChild(this.openedChild);
        this.openedChild = null;
        this.addKeyboardListeners();
    }

    close() {
        this.openedChild?.close();
        this.removeKeyboardListeners();
        this.dispatchEvent(new CustomEvent('closeMe'));
    }

    // on the window, before the page's own listeners: the keys Dosson uses must not reach the page (Gmail's ← → move
    // between emails), see consumeKey. Keys typed inside the panel (its fields, its editor) go to handleKeyInside
    addKeyboardListeners() {
        window.addEventListener('keydown', this.handleKeyDown, true);
        window.addEventListener('keypress', this.handleKeyOther, true);
        window.addEventListener('keyup', this.handleKeyOther, true);
    }

    removeKeyboardListeners() {
        window.removeEventListener('keydown', this.handleKeyDown, true);
        window.removeEventListener('keypress', this.handleKeyOther, true);
        window.removeEventListener('keyup', this.handleKeyOther, true);
    }

    handleKeyOther = (event) => {
        if (event.composedPath().includes(this)) {
            this.handleKeyInside(event);
        }
    }
}

const INSPECTOR_MAX_ROWS = 18;

// Settings → Source Code: Dosson's source as one long document, a page at a time (↑ ↓ or Space), and a download of
// all of it. Set label
class SourcePanel extends Panel {
    // rows on a page: about 60% of the window's height, whatever Dosson's font size
    rowsPerPage() {
        return Math.max(8, Math.min(30, Math.floor(window.innerHeight * 0.6 / (1.2 * (parseFloat(getComputedStyle(this).fontSize) || 21)))));
    }

    page = 0;

    render() {
        const fieldset = this.frame(this.label, '↑ ↓ Space page  D download  Esc');
        fieldset.parentNode.classList.add('wide');
        this.pageRows = this.rowsPerPage();
        this.text = document.createElement('pre');
        this.text.className = 'source';
        this.text.style.setProperty('--rows', this.pageRows);
        this.text.textContent = 'Reading the source code…';
        this.status = document.createElement('div');
        this.status.className = 'detail';
        const buttons = document.createElement('div');
        this.downloadButton = this.button('Download', () => this.download());
        this.downloadButton.disabled = true;
        buttons.append(this.downloadButton, this.button('Close', () => this.close()));
        fieldset.append(this.text, this.status, buttons);
        readDossonSource().then(answer => {
            if (!this.isConnected) {
                return;
            }
            if (!answer || answer.error) {
                this.text.textContent = answer?.error || 'No answer from the extension';
                return;
            }
            this.document = answer.text;
            this.downloadButton.disabled = false;
            // as many characters as fit across, measured in the font Dosson uses now
            const probe = document.createElement('span');
            probe.textContent = '0'.repeat(100);
            this.text.replaceChildren(probe);
            const columns = Math.max(20, Math.floor(this.text.clientWidth / (probe.getBoundingClientRect().width / 100)) - 1);
            ({ rows: this.rows, lines: this.lines } = sourceRows(answer.text, columns));
            this.pages = Math.ceil(this.rows.length / this.pageRows);
            this.show(0);
        });
    }

    show(page) {
        if (!this.rows) {
            return;
        }
        this.page = Math.max(0, Math.min(this.pages - 1, page));
        const first = this.page * this.pageRows;
        this.text.textContent = this.rows.slice(first, first + this.pageRows).join('\n');
        const last = Math.min(first + this.pageRows, this.rows.length) - 1;
        this.status.textContent = `Page ${this.page + 1} / ${this.pages}   Lines ${this.lines[first]}-${this.lines[last]} of ${this.lines[this.lines.length - 1]}`;
    }

    async download() {
        const version = await dossonVersion();
        const url = URL.createObjectURL(new Blob([this.document], { type: 'text/plain' }));
        const a = document.createElement('a');
        a.href = url;
        a.download = `dosson-${version || 'source'}-source.txt`;
        a.click();
        setTimeout(() => URL.revokeObjectURL(url), 1000);
        this.status.textContent = `Downloaded ${a.download}`;
    }

    handleKeyDown = (event) => {
        const key = event.key;
        const step = { ArrowDown: 1, PageDown: 1, ' ': event.shiftKey ? -1 : 1, ArrowUp: -1, PageUp: -1 }[key];
        if (['Escape', 'ArrowLeft'].includes(key)) {
            this.close();
        } else if (step) {
            this.show(this.page + step);
        } else if (key === 'Home') {
            this.show(0);
        } else if (key === 'End') {
            this.show(Infinity);
        } else if ((key === 'd' || key === 'D') && this.document) {
            this.download();
        } else {
            return;
        }
        consumeKey(event);
    }

    // a button clicked keeps the focus: Space would click it again
    handleKeyInside = (event) => {
        event.stopPropagation();
        this.shadowRoot.activeElement?.blur();
    }
}

// The object inspector: a value as a tree, read one level at a time when a node opens. Set source, path and name
// (see createInspector)
class Inspector extends Panel {
    selectedIndex = 0;
    // what the tree lists (t switches): 'variables' (no functions), 'functions', or 'all' (groups, Entries, Prototype)
    mode = 'all';

    render() {
        const fieldset = this.frame(this.name, 'Enter edit  t toggle  Esc close');
        // Variables (12)  Functions (3)  All, for the object the selected row belongs to
        this.modes = document.createElement('div');
        this.modes.className = 'modes';
        this.modes.hidden = true;
        this.list = document.createElement('ul');
        this.list.className = 'tree';
        // the selected row's path and whole value
        this.detail = document.createElement('div');
        this.detail.className = 'detail fixed';
        // a number, boolean, string or null being changed (see edit)
        this.editor = document.createElement('div');
        this.editor.className = 'editor';
        this.editor.hidden = true;
        fieldset.append(this.modes, this.list, this.detail, this.editor);
        this.root = { key: this.name, path: this.path, depth: 0, type: '', preview: '…', expandable: true };
        // a variable that is a number, a boolean… opens straight in the editor
        this.toggle(this.root).then(() => {
            // the mode asked for lists nothing (only functions, opened as Variables): show everything
            if (this.root.members && !this.root.children.length && this.mode !== 'all') {
                this.setMode('all');
            }
            this.fixHeight();
            if (this.rows.length === 1 && this.isEditable(this.root)) {
                this.edit(this.root);
            }
        });
    }

    // The tree's height is set once, from the most rows the object lists when opened in any mode (up to 18, then it
    // scrolls), so the panel doesn't grow and shrink as the selection moves, nodes open or t switches the mode
    fixHeight() {
        const { members, children = [] } = this.root;
        const count = (node, kids) => 1 + kids.reduce((sum, child) => sum + (child.expanded ? count(child, child.children) : 1), 0);
        const rows = members ? Math.max(...['variables', 'functions', 'all'].map(mode => count(this.root, this.viewOf(this.root, mode)))) : 1 + children.length;
        this.list.style.height = `calc(1.2em * ${Math.min(rows, INSPECTOR_MAX_ROWS)})`;
    }

    // the rows on screen: each node, then its children when it's open. A node's depth depends on the mode (the
    // Variables group's members sit one level lower in All), so the walk sets it
    get rows() {
        const rows = [];
        const walk = (node, depth) => {
            node.depth = depth;
            rows.push(node);
            if (this.isOpen(node)) {
                node.children.forEach(child => walk(child, depth + 1));
            }
        };
        walk(this.root, 0);
        return rows;
    }

    // open, and with something to show in the current mode (a function-less object has no Functions)
    isOpen(node) {
        return Boolean(node.expanded && node.children?.length);
    }

    // open a node, asking for its entries the first time, or close it
    async toggle(node) {
        if (this.isOpen(node)) {
            node.expanded = false;
            this.renderRows();
            return;
        }
        if (!node.children) {
            const description = await this.source.request({ type: 'describe', path: node.path });
            if (description.error) {
                node.children = [{ key: '!', type: 'error', preview: description.error, path: null }];
            } else {
                // a getter becomes what it returned
                Object.assign(node, { type: description.type, preview: description.preview, value: description.value, expandable: description.expandable });
                node.members = this.membersOf(node, description.entries);
                node.children = this.viewOf(node);
            }
        }
        node.expanded = node.children.length > 0;
        this.renderRows();
    }

    // Everything read from an object, whatever the mode: its own keys as Variables (sorted like Inspect's Variables
    // list, an array's in order) and Functions, "… more", then its Entries (Map, Set) and its Prototype. The nodes keep
    // their own state (open, read) when t switches the mode. Groups only exist here: a group's path is its object's
    membersOf(node, entries) {
        const nodes = entries.map(entry => {
            // "… more" has no segment: it can't be opened
            const path = entry.segment === undefined ? null : [...node.path, entry.segment];
            const label = entry.segment?.proto ? `Prototype (${entry.protoName})` : entry.segment?.entries ? `Entries (${entry.size})` : undefined;
            return { ...entry, path, label };
        });
        const isArray = node.type === 'array';
        const keys = nodes.filter(entry => typeof entry.segment === 'string');
        const variables = keys.filter(entry => entry.type !== 'function');
        const functions = keys.filter(entry => entry.type === 'function');
        if (!isArray) {
            variables.sort((a, b) => compareVariables({ type: a.type, name: a.key }, { type: b.type, name: b.key }));
            functions.sort((a, b) => NUMERIC_COLLATOR.compare(a.key, b.key));
        }
        const more = nodes.filter(entry => entry.segment === undefined);
        const group = (name, members, expanded) => {
            const label = `${name} (${members.length})`;
            return members.length ? { label, preview: label, type: '', path: node.path, expandable: true, expanded, children: members } : null;
        };
        return {
            nodes, isArray, variables, functions, more,
            special: nodes.filter(entry => typeof entry.segment === 'object'),
            groups: [group('Variables', [...variables, ...more], true), group('Functions', functions, false)].filter(Boolean)
        };
    }

    // what an object lists in the current mode. All: an array's items in order, else the Variables and Functions groups,
    // Entries and Prototype. Variables: its variables (primitives, objects, arrays), Entries, and Prototype only when
    // it was changed (a class, Object.create(x)), so its variables can be checked. Functions: its functions, and that
    // Prototype, where a class keeps its methods
    viewOf(node, mode = this.mode) {
        const { nodes, isArray, variables, functions, more, special, groups } = node.members;
        const entries = special.filter(entry => entry.segment.entries);
        const changedPrototype = special.filter(entry => entry.segment.proto && entry.protoChanged);
        switch (mode) {
            case 'variables':
                return [...variables, ...more, ...entries, ...changedPrototype];
            case 'functions':
                return [...functions, ...changedPrototype];
            default:
                return isArray ? nodes : [...groups, ...special];
        }
    }

    // t: the next of Variables, Functions, All. Every object already read lists what the new mode shows
    toggleMode() {
        const modes = ['variables', 'functions', 'all'];
        this.setMode(modes[(modes.indexOf(this.mode) + 1) % modes.length]);
    }

    setMode(mode) {
        const selected = this.rows[this.selectedIndex];
        this.mode = mode;
        const refresh = node => {
            if (node.members) {
                node.children = this.viewOf(node);
                node.members.nodes.forEach(refresh);
            }
        };
        refresh(this.root);
        // the same row when it's still listed
        this.selectedIndex = Math.max(0, this.rows.indexOf(selected));
        this.renderRows();
    }

    // the object whose variables and functions the header counts: the selected row when it's open, else the one it's in
    contextOf(rows, index) {
        const node = rows[index];
        if (node.members && this.isOpen(node)) {
            return node;
        }
        return rows.slice(0, index).findLast(row => row.members && row.depth < node.depth) || this.root;
    }

    // Variables (12)  Functions (3)  All, the current mode highlighted. Nothing for a value that is no object
    updateModes(rows) {
        const context = this.contextOf(rows, this.selectedIndex);
        this.modes.hidden = !this.root.members;
        if (!context.members) {
            return;
        }
        const labels = [
            ['variables', `Variables (${context.members.variables.length})`],
            ['functions', `Functions (${context.members.functions.length})`],
            ['all', 'All']
        ];
        this.modes.replaceChildren(...labels.map(([mode, text]) => {
            const span = document.createElement('span');
            span.textContent = text;
            span.classList.toggle('active', mode === this.mode);
            span.addEventListener('click', () => this.setMode(mode));
            return span;
        }));
    }

    renderRows() {
        this.list.replaceChildren(...this.rows.map((node, index) => {
            const li = document.createElement('li');
            const marker = this.isOpen(node) ? '-' : node.expandable ? '+' : ' ';
            const text = document.createElement('span');
            text.textContent = `${'\u00a0\u00a0'.repeat(node.depth)}${marker} ${node.label ?? `${node.key}: ${node.preview}`}`;
            const type = document.createElement('span');
            type.className = 'type';
            type.textContent = node.label ? '' : node.type;
            li.append(text, type);
            li.addEventListener('click', () => {
                this.selectedIndex = index;
                this.updateSelection();
                this.activate();
            });
            return li;
        }));
        this.updateSelection();
    }

    updateSelection() {
        const rows = this.rows;
        this.selectedIndex = Math.max(0, Math.min(this.selectedIndex, rows.length - 1));
        [...this.list.children].forEach((li, index) => li.classList.toggle('selected', index === this.selectedIndex));
        this.list.children[this.selectedIndex]?.scrollIntoView({ block: 'nearest' });
        const node = rows[this.selectedIndex];
        this.detail.textContent = `${this.formatPath(node)}\n${node.preview}`;
        this.updateModes(rows);
    }

    // like the code to reach it: h.nested.deep[0], from the inspected value's name
    formatPath(node) {
        if (!node.path) {
            return node.key;
        }
        return node.path.slice(this.path.length).reduce((text, segment) => {
            if (typeof segment !== 'string') {
                return `${text}.${segment.proto ? '[[Prototype]]' : '[[Entries]]'}`;
            }
            if (/^\d+$/.test(segment)) {
                return `${text}[${segment}]`;
            }
            return /^[A-Za-z_$][\w$]*$/.test(segment) ? `${text}.${segment}` : `${text}[${JSON.stringify(segment)}]`;
        }, this.name);
    }

    handleKeyDown = (event) => {
        // the focus left the editor (a click on the page): its keys still go to it
        if (this.editing) {
            this.handleKeyInside(event);
            return;
        }
        const rows = this.rows;
        const node = rows[this.selectedIndex];
        switch (event.key) {
            case 'ArrowDown':
                this.selectedIndex++;
                break;
            case 'ArrowUp':
                this.selectedIndex--;
                break;
            case 'ArrowRight':
                if (this.isOpen(node)) {
                    this.selectedIndex++;
                } else if (node.expandable && node.path) {
                    this.toggle(node);
                }
                break;
            case 'ArrowLeft':
                if (node.depth === 0) {
                    this.close();
                } else if (this.isOpen(node)) {
                    this.toggle(node);
                } else {
                    // up to the parent
                    this.selectedIndex = rows.findLastIndex((row, index) => index < this.selectedIndex && row.depth === node.depth - 1);
                }
                break;
            case 'Enter':
                this.activate();
                break;
            case 'Escape':
                this.close();
                break;
            case 't':
            case 'T':
                // Ctrl+T, Cmd+T and the like are the browser's
                if (event.ctrlKey || event.metaKey || event.altKey || !this.root.members) {
                    return;
                }
                this.toggleMode();
                break;
            default:
                return;
        }
        consumeKey(event);
        this.updateSelection();
    }

    // a function opens the run panel, a number, boolean, string or null the editor; anything else opens or closes
    activate() {
        const node = this.rows[this.selectedIndex];
        if (!node.path) {
            return;
        }
        if (node.type === 'function') {
            this.openPanel(createRunPanel(this.source, node.path, this.formatPath(node)));
        } else if (node.expandable) {
            this.toggle(node);
        } else if (this.isEditable(node)) {
            this.edit(node);
        }
    }

    // a property (not a run panel result, [[Prototype]]…) holding a value the editor can show whole
    isEditable(node) {
        return typeof node.path?.at(-1) === 'string' && (node.value !== undefined || node.type === 'null' || node.type === 'undefined');
    }

    // The editor, under the detail: ↑/↓ add or take 1 from a number (10 with Shift) and switch a boolean, Enter saves,
    // Esc cancels. Save stands out once the value differs from the page's
    edit(node) {
        this.editing = node;
        const original = node.type === 'string' ? node.value : String(node.value ?? node.type);
        const label = document.createElement('label');
        const span = document.createElement('span');
        span.textContent = '=';
        this.input = document.createElement('input');
        this.input.spellcheck = false;
        this.input.value = original;
        // a boolean only switches
        this.input.readOnly = node.type === 'boolean';
        label.append(span, this.input);
        this.saveButton = this.button('Save', () => this.save());
        this.saveButton.className = 'save';
        const hint = document.createElement('p');
        hint.className = 'hint';
        hint.textContent = node.type === 'number' ? '↑↓ ±1  Shift ±10  Enter save  Esc cancel'
            : node.type === 'boolean' ? '↑↓ Space switch  Enter save  Esc cancel'
            : node.type === 'string' ? 'Text as is  Enter save  Esc cancel'
            : 'JSON (42, true, "text"…), else text  Enter save  Esc cancel';
        this.editMessage = document.createElement('p');
        this.editMessage.className = 'hint';
        this.editor.replaceChildren(label, this.saveButton, this.button('Cancel', () => this.stopEditing()), hint, this.editMessage);
        this.editor.hidden = false;
        this.editOriginal = original;
        this.input.addEventListener('input', () => this.updateSaveButton());
        this.input.addEventListener('click', () => node.type === 'boolean' && this.step(1));
        this.updateSaveButton();
        this.input.focus();
        this.input.select();
    }

    updateSaveButton() {
        const changed = this.input.value !== this.editOriginal;
        this.saveButton.classList.toggle('changed', changed);
        this.saveButton.textContent = changed ? '► Save ◄' : 'Save';
        this.editMessage.textContent = '';
        this.editMessage.classList.remove('error');
    }

    // ↑ (1) or ↓ (-1) on a number keeps its decimals: 0.1 + 1 is 1.1
    step(direction, big = false) {
        const { type } = this.editing;
        if (type === 'boolean') {
            this.input.value = String(this.input.value !== 'true');
        } else if (type === 'number') {
            const current = Number(this.input.value);
            if (this.input.value.trim() === '' || !Number.isFinite(current)) {
                return;
            }
            const decimals = (this.input.value.split('.')[1] || '').replace(/e.*$/i, '').length;
            this.input.value = String(Number((current + direction * (big ? 10 : 1)).toFixed(Math.min(decimals, 20))));
        } else {
            return;
        }
        this.updateSaveButton();
    }

    // the typed text as the editing value's type: a number stays a number, null and undefined take JSON
    editedValue() {
        const text = this.input.value;
        switch (this.editing.type) {
            case 'number': {
                const value = Number(text);
                if (text.trim() === '' || !Number.isFinite(value)) {
                    throw new Error(`${JSON.stringify(text)} is not a number`);
                }
                return value;
            }
            case 'boolean':
                return text === 'true';
            case 'string':
                return text;
            default:
                return parseArguments([text])[0];
        }
    }

    async save() {
        const node = this.editing;
        let value;
        try {
            value = this.editedValue();
        } catch (e) {
            return this.showEditMessage(e.message, true);
        }
        this.showEditMessage('Saving…');
        const outcome = await this.source.request({ type: 'set', path: node.path, value });
        if (this.editing !== node) {
            return;
        }
        if (outcome.error) {
            return this.showEditMessage(outcome.error, true);
        }
        // a setter can store something else than what was typed: show what the page has now
        Object.assign(node, { type: outcome.type, preview: outcome.preview, value: outcome.value, expandable: outcome.expandable, children: undefined, members: undefined, expanded: false });
        this.dispatchEvent(new CustomEvent('dossonSaved', { detail: { path: node.path, ...outcome } }));
        this.stopEditing();
        this.renderRows();
        this.detail.textContent += '\n(saved)';
        // a panel showing only this value stays in the editor
        if (this.rows.length === 1 && this.isEditable(node)) {
            this.edit(node);
        }
    }

    showEditMessage(text, isError = false) {
        this.editMessage.textContent = text;
        this.editMessage.classList.toggle('error', isError);
    }

    stopEditing() {
        this.editing = null;
        this.editor.hidden = true;
        this.editor.replaceChildren();
    }

    // while editing: ↑/↓ change the value, Enter saves (on a button it clicks it), Esc cancels, or closes the panel
    // when it only shows this value. Nothing reaches the page or the tree's keys
    handleKeyInside = (event) => {
        if (this.openedChild || !this.editing) {
            return;
        }
        if (event.type === 'keydown') {
            if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
                this.step(event.key === 'ArrowUp' ? 1 : -1, event.shiftKey);
                event.preventDefault();
            } else if (event.key === ' ' && this.editing.type === 'boolean' && event.target === this.input) {
                this.step(1);
                event.preventDefault();
            } else if (event.key === 'Enter' && event.target.tagName !== 'BUTTON') {
                this.save();
                event.preventDefault();
            } else if (event.key === 'Escape') {
                const onlyRow = this.rows.length === 1;
                this.stopEditing();
                if (onlyRow) {
                    this.close();
                }
                event.preventDefault();
            }
        }
        event.stopPropagation();
    }
}

// Runs a function with arguments typed in, then shows what it returned, ready to inspect. Set source, path and name
// (see createRunPanel)
// Security → a secret's whole value and its path, each with a button to copy it. Set source, id (the finding's, see
// reveal in security/secrets.js), label and places ([{ display, frame }]), see secretPanel
class SecretPanel extends Panel {
    render() {
        const fieldset = this.frame(this.label, '↑ ↓ Enter copy  ← Esc close');
        const valueTitle = document.createElement('div');
        valueTitle.textContent = 'Value';
        this.valueText = document.createElement('pre');
        this.valueText.textContent = '…';
        const pathTitle = document.createElement('div');
        pathTitle.textContent = this.places.length > 1 ? `Path (${this.places.length} places)` : 'Path';
        const pathText = document.createElement('pre');
        pathText.textContent = this.places.map(({ display, frame }) => `${display}  (${frame})`).join('\n');
        this.paths = [...new Set(this.places.map(({ display }) => display))].join('\n');
        const buttons = document.createElement('div');
        this.copyValueButton = this.button('Copy value', () => this.copy(this.value, 'Value'));
        const closeButton = this.button('Close', () => this.close());
        buttons.append(this.copyValueButton, this.button('Copy path', () => this.copy(this.paths, 'Path')), closeButton);
        this.status = document.createElement('div');
        this.status.className = 'detail';
        this.status.textContent = 'Reading the value…';
        fieldset.append(valueTitle, this.valueText, pathTitle, pathText, buttons, this.status);
        this.copyValueButton.disabled = true;
        this.source.request({ type: 'secretValue', id: this.secretId }).then(answer => {
            if (!answer || answer.error) {
                this.valueText.textContent = answer?.error || 'No answer';
                this.status.textContent = '';
                closeButton.focus();
                return;
            }
            this.value = answer.value;
            this.valueText.textContent = answer.value;
            this.status.textContent = `${answer.value.length} characters`;
            this.copyValueButton.disabled = false;
            this.copyValueButton.focus();
        });
    }

    async copy(text, what) {
        if (text === undefined) {
            return;
        }
        try {
            await navigator.clipboard.writeText(text);
            this.status.textContent = `${what} copied`;
        } catch (e) {
            this.status.textContent = `${what} not copied: ${e.message}`;
        }
    }

    // while the focus is in the page, only ← and Esc, to close
    handleKeyDown = (event) => {
        if (event.composedPath().includes(this)) {
            this.handleKeyInside(event);
        } else if (event.key === 'Escape' || event.key === 'ArrowLeft') {
            this.close();
            consumeKey(event);
        }
    }

    // ↑ ↓ (or → and Tab) move between the buttons, Enter clicks one, ← and Esc close. Nothing reaches the page
    handleKeyInside = (event) => {
        if (event.type === 'keydown') {
            const buttons = [...this.shadowRoot.querySelectorAll('button')].filter(button => !button.disabled);
            const at = buttons.indexOf(this.shadowRoot.activeElement);
            if (event.key === 'Escape' || event.key === 'ArrowLeft') {
                this.close();
                event.preventDefault();
            } else if (event.key === 'ArrowDown' || event.key === 'ArrowRight' || event.key === 'ArrowUp') {
                const step = event.key === 'ArrowUp' ? -1 : 1;
                buttons[(at + step + buttons.length) % buttons.length]?.focus();
                event.preventDefault();
            }
        }
        event.stopPropagation();
    }
}

// a few paragraphs to read, like Settings → Privacy. Set label and paragraphs
class TextPanel extends Panel {
    render() {
        const fieldset = this.frame(this.label, 'Enter ← Esc close');
        this.paragraphs.forEach(text => {
            const p = document.createElement('p');
            p.className = 'text';
            p.textContent = text;
            fieldset.appendChild(p);
        });
        const closeButton = this.button('Close', () => this.close());
        fieldset.appendChild(closeButton);
        closeButton.focus();
    }

    // Enter, ← and Esc close, wherever the focus is. Nothing reaches the page
    handleKeyDown = (event) => {
        if (['Escape', 'ArrowLeft', 'Enter'].includes(event.key)) {
            this.close();
            consumeKey(event);
        }
    }

    handleKeyInside = (event) => {
        event.stopPropagation();
    }
}

// The egg (see DOSSON_EGG): Snake. It waits for the first arrow, speeds up as it eats
class Snake extends Panel {
    // one game at a time: typing e g g during a game does nothing
    static isOpen = false;

    connectedCallback() {
        Snake.isOpen = true;
        super.connectedCallback();
    }

    disconnectedCallback() {
        Snake.isOpen = false;
        clearTimeout(this.timer);
    }

    render() {
        const fieldset = this.frame('Snake', '← ↑ ↓ → move  P pause  Esc quit');
        this.board = document.createElement('pre');
        this.board.className = 'snake';
        this.status = document.createElement('div');
        this.status.className = 'detail';
        fieldset.append(this.board, this.status);
        this.restart();
    }

    restart() {
        clearTimeout(this.timer);
        this.state = snakeNewGame();
        this.queued = null;
        this.running = false;
        this.paused = false;
        this.draw();
    }

    draw() {
        const { score, over, won } = this.state;
        this.board.textContent = snakeDraw(this.state);
        const message = won ? 'You filled the board! Enter: play again'
            : over ? 'Game over. Enter: play again'
            : this.paused ? 'Paused'
            : this.running ? ''
            : 'Press an arrow to start';
        this.status.textContent = `Score ${score}  Best ${snakeBest}${message ? `  ${message}` : ''}`;
    }

    schedule() {
        this.timer = setTimeout(this.tick, Math.max(60, 150 - 5 * this.state.score));
    }

    tick = () => {
        this.state = snakeStep(this.state, this.queued || this.state.direction);
        this.queued = null;
        snakeBest = Math.max(snakeBest, this.state.score);
        this.running = !this.state.over;
        this.draw();
        if (this.running) {
            this.schedule();
        }
    }

    handleKeyDown = (event) => {
        const direction = SNAKE_DIRECTIONS[event.key];
        if (direction) {
            if (!this.state.over && !this.paused) {
                this.queued = direction;
                if (!this.running) {
                    this.running = true;
                    this.draw();
                    this.schedule();
                }
            }
        } else if (event.key === 'p' || event.key === 'P') {
            if (!this.running) {
                return;
            }
            this.paused = !this.paused;
            clearTimeout(this.timer);
            if (!this.paused) {
                this.schedule();
            }
            this.draw();
        } else if (event.key === 'Enter' && this.state.over) {
            this.restart();
        } else if (event.key === 'Escape') {
            this.close();
        } else {
            return;
        }
        consumeKey(event);
    }

    handleKeyInside = (event) => {
        event.stopPropagation();
    }
}

class RunPanel extends Panel {
    render() {
        const fieldset = this.frame(`Run ${this.name}`, 'Enter run  ← Esc close');
        this.code = document.createElement('pre');
        this.code.textContent = '…';
        this.args = document.createElement('div');
        const hint = document.createElement('p');
        hint.className = 'hint';
        hint.textContent = 'Values are JSON (42, true, null, "text", [1, 2], {"a": 1}); anything else is passed as text';
        const buttons = document.createElement('div');
        buttons.append(
            this.button('Run', () => this.run()),
            this.button('+ argument', () => this.addArgument(`arg${this.args.children.length}`).focus()),
            this.button('Close', () => this.close())
        );
        this.result = document.createElement('div');
        this.result.className = 'detail';
        this.result.textContent = 'Not run yet';
        fieldset.append(this.code, this.args, hint, buttons, this.result);
        this.source.request({ type: 'function', path: this.path }).then(info => {
            this.info = info;
            if (info.error) {
                this.code.textContent = info.error;
                return;
            }
            this.code.textContent = info.source;
            info.params.forEach(name => this.addArgument(name));
            this.focusFirst();
        });
    }

    addArgument(name) {
        const label = document.createElement('label');
        const span = document.createElement('span');
        span.textContent = `${name}:`;
        const input = document.createElement('input');
        input.spellcheck = false;
        label.append(span, input);
        this.args.appendChild(label);
        return input;
    }

    focusFirst() {
        (this.shadowRoot.querySelector('input') || this.shadowRoot.querySelector('button')).focus();
    }

    async run() {
        if (!this.info || this.info.error) {
            return;
        }
        const args = parseArguments([...this.args.querySelectorAll('input')].map(input => input.value));
        this.showResult('Running…');
        const outcome = await this.source.request({ type: 'call', path: this.path, args });
        if (outcome.error) {
            this.showResult(outcome.error, true);
        } else {
            this.showResult(`${outcome.awaited ? 'Promise → ' : '→ '}${outcome.preview} (${outcome.type})`, false, outcome);
        }
    }

    showResult(text, isError = false, outcome = null) {
        this.result.replaceChildren(text);
        this.result.classList.toggle('error', isError);
        if (outcome?.expandable) {
            const name = `${this.name}()`;
            this.result.append(' ', this.button('Inspect', () => this.openPanel(createInspector(this.source, [{ result: outcome.resultId }], name))));
        }
    }

    // while the focus is in the page, only ← and Esc, to close
    handleKeyDown = (event) => {
        if (event.composedPath().includes(this)) {
            this.handleKeyInside(event);
        } else if (event.key === 'Escape' || event.key === 'ArrowLeft') {
            this.close();
            consumeKey(event);
        }
    }

    // inside: Enter runs (on a button it clicks it), Esc closes, and so does ← outside a text field, where it moves
    // the caret. Nothing reaches the page. Keys from a panel opened on top (the result's inspector) go through to it
    handleKeyInside = (event) => {
        if (this.openedChild) {
            return;
        }
        if (event.type === 'keydown' && event.key === 'Enter' && event.target.tagName !== 'BUTTON') {
            this.run();
            event.preventDefault();
        } else if (event.type === 'keydown' && (event.key === 'Escape' || (event.key === 'ArrowLeft' && event.target.tagName !== 'INPUT'))) {
            this.close();
            event.preventDefault();
        }
        event.stopPropagation();
    }

    openPanel(panel) {
        this.shadowRoot.activeElement?.blur();
        super.openPanel(panel);
    }

    removeChildComponent() {
        super.removeChildComponent();
        this.focusFirst();
    }
}

__info(`Dosson:init1`, 'background: red; color: white');

if (document.readyState === "loading") {  // Loading hasn't finished yet
    __info(`Dosson:init2`, 'background: red; color: white');
    document.addEventListener("DOMContentLoaded", runDosson);
} else {  // `DOMContentLoaded` has already fired
    __info(`Dosson:init3`, 'background: red; color: white');
    runDosson();
}

function runDosson() {
    __info(`in Dosson:runDosson`, 'background: red; color: white');
    customElements.define('level-one', Level1);
    customElements.define('level-two', Level2);
    customElements.define('dosson-inspector', Inspector);
    customElements.define('dosson-run', RunPanel);
    customElements.define('dosson-snake', Snake);
    customElements.define('dosson-secret', SecretPanel);
    customElements.define('dosson-text', TextPanel);
    customElements.define('dosson-source', SourcePanel);



    const template1 = document.createElement('template')
    template1.id = 'dosson_action-template';
    template1.innerHTML =
        `<li class="item cyan-255-hover black-255-text-hover">
        <a href="#!">
            <span class="tui-shortcut"></span>
            <span></span>
        </a>
    </li>`;

    const template2 = document.createElement('template')
    template2.id = 'dosson_action-header';
    template2.innerHTML = `
    <style>
        * {
            font-family: 'Courier New', Courier, monospace;
            font-weight: bold;
        }
        
        .hover {
            color: #000!important;
            background-color: #0ff!important;
        }

        /* a fieldset is at least as wide as its widest line otherwise, and long names would push it past its level */
        fieldset {
            min-width: 0;
        }

        /* one line per row, 1.2em high: long names end with … instead of pushing the right-hand text down */
        .item {
            line-height: 1.2em;
        }

        .item a {
            display: flex;
        }

        /* a clicked row keeps the focus: the browser's ring (cut to two lines by the scrolling list) would show
           next to the cyan row Dosson selects */
        .item a:focus {
            outline: none;
        }

        .item a span:last-child {
            order: 1;
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* a long value (a string variable) gets at most half the row, so its name still shows */
        .item .tui-shortcut {
            order: 2;
            flex: 0 1 auto;
            max-width: 50%;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding-left: 1ch;
        }
    
        .main {
            width: 100%;
        }

        /* the root window's ×: tiny, on the top border, with a click area bigger than it */
        .dosson-close {
            position: absolute;
            top: -0.1em;
            right: 0.3em;
            padding: 0 0.4em 0.3em;
            font-size: 0.8em;
            line-height: 1;
            color: #fff;
            cursor: pointer;
            z-index: 1;
        }

        /* a level's text on the top border, on the right, like its legend on the left */
        .dosson-legend-right {
            position: absolute;
            top: 0;
            right: 1ch;
            padding: 0 1ch;
            line-height: 1;
            background-color: inherit;
            color: inherit;
            z-index: 1;
        }

        .dosson-close:hover {
            color: #000;
            background-color: #0ff;
        }

        .help {
            position: absolute;
            transform: translate(-50%, -50%);
            width: min(560px, 90vw);
            max-height: 90vh;
            overflow-y: auto;
            z-index: 10;
        }

        .help dl {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 8px 12px;
            margin: 0;
        }

        .help dd {
            margin: 0;
            overflow-wrap: anywhere;
        }

        .help a {
            color: #ff0;
        }

        .help-toggle {
            cursor: pointer;
        }

        /* panels (object inspector, run panel): red and white */
        .panel {
            width: min(640px, 92vw);
        }

        .panel.wide {
            width: min(1100px, 96vw);
        }

        .panel pre.source {
            white-space: pre;
            overflow: hidden;
            max-height: none;
            height: calc(1.2em * var(--rows));
            line-height: 1.2em;
        }

        .panel p.text {
            margin: 0 0 1em;
            white-space: normal;
            overflow-wrap: anywhere;
        }

        .panel fieldset {
            padding-bottom: 1em;
        }

        .panel .selected,
        .panel input,
        .panel button,
        .panel .detail.error {
            background-color: #fff;
            color: #a80000;
        }

        .panel input,
        .panel button {
            border: 0;
            font: inherit;
            padding: 0 1ch;
        }

        .panel input:focus,
        .panel button:focus {
            outline: 2px solid #fff;
            outline-offset: 2px;
        }

        .panel button {
            margin: 6px 1ch 6px 0;
            cursor: pointer;
        }

        /* the inspector's header: Variables, Functions, All, the one shown highlighted */
        .panel .modes {
            display: flex;
            gap: 2ch;
            margin-bottom: 6px;
        }

        .panel .modes span {
            padding: 0 1ch;
            cursor: pointer;
        }

        .panel .modes .active {
            background-color: #fff;
            color: #a80000;
        }

        /* Snake: two characters per cell, so the cells are about square */
        .panel pre.snake {
            max-height: none;
            overflow: hidden;
            white-space: pre;
            line-height: 1.1em;
            text-align: center;
        }

        .tree {
            margin: 0;
            padding: 0;
            list-style: none;
            max-height: calc(1.2em * 18);
            overflow-y: auto;
        }

        .tree li {
            display: flex;
            line-height: 1.2em;
            cursor: pointer;
        }

        .tree li span:first-child {
            flex: 1;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .tree .type {
            flex: none;
            padding-left: 1ch;
        }

        .panel .detail {
            margin-top: 8px;
            padding: 6px 4px 0;
            border-top: 1px solid #fff;
            white-space: pre-wrap;
            overflow-wrap: anywhere;
            max-height: calc(1.2em * 6);
            overflow-y: auto;
        }

        /* the inspector's: a fixed size, the path and three lines of the value, then it scrolls, so the panel never resizes */
        .panel .detail.fixed {
            line-height: 1.5em;
            height: calc(1.5em * 4);
            box-sizing: content-box;
            max-height: none;
        }

        .panel pre {
            overflow-wrap: anywhere;
            margin: 0 0 8px;
            max-height: calc(1.2em * 8);
            overflow: auto;
            white-space: pre-wrap;
            font: inherit;
        }

        .panel label {
            display: flex;
            gap: 1ch;
            margin: 4px 0;
        }

        .panel label input {
            flex: 1;
            min-width: 0;
        }

        .panel .hint {
            margin: 6px 0 0;
        }

        /* the inspector's editor: Save stands out, blinking yellow, once the value is changed */
        .panel .editor {
            margin-top: 8px;
        }

        .panel button.save {
            opacity: 0.6;
        }

        .panel button.save.changed {
            opacity: 1;
            background-color: #ff0;
            color: #000;
            animation: dosson-blink 1s steps(1) infinite;
        }

        @keyframes dosson-blink {
            50% {
                background-color: #fff;
                color: #a80000;
            }
        }

        .panel .hint.error {
            background-color: #fff;
            color: #a80000;
        }
    </style>
    `;
    document.body.appendChild(template1);
    document.body.appendChild(template2);
    let l1;
    const showDosson = () => {
        l1 = document.createElement('level-one');
        l1.addEventListener('dossonHidden', () => {
            l1 = null;
            setTabVisible(false);
        });
        document.body.appendChild(l1);
    };
    // hidden until the show/hide key is tapped in this tab. Then it shows again on reload, or on another page in the
    // same tab, until it's hidden
    getTabVisible().then(visible => {
        __info(`Dosson visible in this tab: ${visible}`);
        // the key may have shown it while we waited
        if (visible && !l1) {
            showDosson();
        }
    });
    try {
        let script = document.createElement('script');
        script.src = chromeRuntimeGetURL('mainThread.js');
        (document.head || document.documentElement).appendChild(script);
        // Listen for the custom event and send a message to the extension
    } catch (e) {
        __error(`Caught error trying to add a script`)
    }




    // settings changed in another tab apply here too
    const loadSettings = () => chromeStorageSyncGet(Object.keys(dossonSettings), applyDossonSettings);
    loadSettings();
    chromeStorageOnChanged(loadSettings);

    const toggleDosson = () => {
        if (l1) {
            l1.close(); // fires dossonHidden, which saves the state
        } else {
            showDosson();
            setTabVisible(true);
        }
    };

    let togglePresses = 0;
    let lastToggleTime = 0;

    document.addEventListener('keydown', (event) => {
        // holding a key repeats its keydown: count it once
        if (event.repeat) {
            return;
        }
        // any other key starts over, so Ctrl+C or Shift+A never count
        if (event.key !== dossonSettings.dossonToggleKey) {
            togglePresses = 0;
            return;
        }
        togglePresses = event.timeStamp - lastToggleTime < DOSSON_TOGGLE_DELAY ? togglePresses + 1 : 1;
        lastToggleTime = event.timeStamp;
        if (togglePresses < dossonSettings.dossonTogglePresses) {
            return;
        }
        togglePresses = 0;
        toggleDosson();
    });

    // the egg: e g g opens Snake on whatever has the keyboard. Keys typed in Dosson's own fields never get here (they
    // stop them), and the page's fields are left alone
    let eggTyped = '';
    let lastEggTime = 0;
    document.addEventListener('keydown', (event) => {
        if (event.repeat || event.key === 'Shift' || event.key === 'CapsLock') {
            return;
        }
        if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) {
            eggTyped = '';
            return;
        }
        eggTyped = eggProgress(eggTyped, event.key, event.timeStamp - lastEggTime);
        lastEggTime = event.timeStamp;
        const target = event.composedPath()[0];
        const inField = target instanceof Element && (target.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName));
        if (eggTyped !== DOSSON_EGG || !l1 || Snake.isOpen || inField) {
            return;
        }
        eggTyped = '';
        const holder = deepestOpen(l1);
        if (!holder.helpModal) {
            holder.openPanel(document.createElement('dosson-snake'));
        }
    });

    // the toolbar icon (see background.js)
    if (isExtension()) {
        chrome.runtime.onMessage.addListener(message => {
            if (message.type === 'dossonToggle') {
                toggleDosson();
            }
        });
    }


};// Define the custom element

function getCssString() {
    return `@charset "UTF-8";@font-face{font-family:DOS;src:url("fonts/Perfect DOS VGA 437 Win.ttf")}html{font-family:"Lucida Console",monospace;font-size:18px;box-sizing:border-box}body{margin:0}*,:after,:before{font-family:inherit;font-size:inherit;box-sizing:inherit}ul{margin:0;padding:0;list-style-type:none}ul li{list-style-type:none}ul li a{display:block}a{color:inherit;text-decoration:none}span{margin:0}hr{border:none;border-bottom:2px solid #fff}input,select,textarea{width:200px}@media only screen and (max-width :600px){.hide-on-small-and-down,.hide-on-small-only{display:none!important}}@media only screen and (max-width :992px){.hide-on-med-and-down{display:none!important}}@media only screen and (min-width :601px){.hide-on-med-and-up{display:none!important}}@media only screen and (min-width:600px) and (max-width:992px){.hide-on-med-only{display:none!important}}@media only screen and (min-width :993px){.hide-on-large-only{display:none!important}}@media only screen and (min-width :1201px){.hide-on-extra-large-only{display:none!important}}@media only screen and (min-width :1201px){.show-on-extra-large{display:block!important}}@media only screen and (min-width :993px){.show-on-large{display:block!important}}@media only screen and (min-width:600px) and (max-width:992px){.show-on-medium{display:block!important}}@media only screen and (max-width :600px){.show-on-small{display:block!important}}@media only screen and (min-width :601px){.show-on-medium-and-up{display:block!important}}@media only screen and (max-width :992px){.show-on-medium-and-down{display:block!important}}.primary{background-color:#0000a8}.primary-text{color:#0000a8}.primary-border{border-color:#0000a8}.primary-hover:hover{background-color:#0000a8}.primary-text-hover:hover{color:#0000a8}.primary-border-hover:hover{border-color:#0000a8}.secondary{background-color:#a8a8a8}.secondary-text{color:#a8a8a8}.secondary-border{border-color:#a8a8a8}.secondary-hover:hover{background-color:#a8a8a8}.secondary-text-hover:hover{color:#a8a8a8}.secondary-border-hover:hover{border-color:#a8a8a8}.success{background-color:#00a800}.success-text{color:#00a800}.success-border{border-color:#00a800}.success-hover:hover{background-color:#00a800}.success-text-hover:hover{color:#00a800}.success-border-hover:hover{border-color:#00a800}.danger{background-color:#a80000}.danger-text{color:#a80000}.danger-border{border-color:#a80000}.danger-hover:hover{background-color:#a80000}.danger-text-hover:hover{color:#a80000}.danger-border-hover:hover{border-color:#a80000}.warning{background-color:#a8a800}.warning-text{color:#a8a800}.warning-border{border-color:#a8a800}.warning-hover:hover{background-color:#a8a800}.warning-text-hover:hover{color:#a8a800}.warning-border-hover:hover{border-color:#a8a800}.info{background-color:#00a8a8}.info-text{color:#00a8a8}.info-border{border-color:#00a8a8}.info-hover:hover{background-color:#00a8a8}.info-text-hover:hover{color:#00a8a8}.info-border-hover:hover{border-color:#00a8a8}.black-168{background-color:#000!important}.blue-168{background-color:#0000a8!important}.green-168{background-color:#00a800!important}.cyan-168{background-color:#00a8a8!important}.red-168{background-color:#a80000!important}.purple-168{background-color:#a800a8!important}.yellow-168{background-color:#a8a800!important}.white-168{background-color:#a8a8a8!important}.orange-168{background-color:#a85600!important}.black-168-text{color:#000!important}.blue-168-text{color:#0000a8!important}.green-168-text{color:#00a800!important}.cyan-168-text{color:#00a8a8!important}.red-168-text{color:#a80000!important}.purple-168-text{color:#a800a8!important}.yellow-168-text{color:#a8a800!important}.white-168-text{color:#a8a8a8!important}.orange-168-text{color:#a85600!important}.black-168-border{border-color:#000!important}.blue-168-border{border-color:#0000a8!important}.green-168-border{border-color:#00a800!important}.cyan-168-border{border-color:#00a8a8!important}.red-168-border{border-color:#a80000!important}.purple-168-border{border-color:#a800a8!important}.yellow-168-border{border-color:#a8a800!important}.white-168-border{border-color:#a8a8a8!important}.orange-168-border{border-color:#a85600!important}.black-168-hover:hover{background-color:#000!important}.blue-168-hover:hover{background-color:#0000a8!important}.green-168-hover:hover{background-color:#00a800!important}.cyan-168-hover:hover{background-color:#00a8a8!important}.red-168-hover:hover{background-color:#a80000!important}.purple-168-hover:hover{background-color:#a800a8!important}.yellow-168-hover:hover{background-color:#a8a800!important}.white-168-hover:hover{background-color:#a8a8a8!important}.orange-168-hover:hover{background-color:#a85600!important}.black-168-text-hover:hover{color:#000!important}.blue-168-text-hover:hover{color:#0000a8!important}.green-168-text-hover:hover{color:#00a800!important}.cyan-168-text-hover:hover{color:#00a8a8!important}.red-168-text-hover:hover{color:#a80000!important}.purple-168-text-hover:hover{color:#a800a8!important}.yellow-168-text-hover:hover{color:#a8a800!important}.white-168-text-hover:hover{color:#a8a8a8!important}.orange-168-text-hover:hover{color:#a85600!important}.black-168-border-hover:hover{border-color:#000!important}.blue-168-border-hover:hover{border-color:#0000a8!important}.green-168-border-hover:hover{border-color:#00a800!important}.cyan-168-border-hover:hover{border-color:#00a8a8!important}.red-168-border-hover:hover{border-color:#a80000!important}.purple-168-border-hover:hover{border-color:#a800a8!important}.yellow-168-border-hover:hover{border-color:#a8a800!important}.white-168-border-hover:hover{border-color:#a8a8a8!important}.orange-168-border-hover:hover{border-color:#a85600!important}.black-255{background-color:#000!important}.blue-255{background-color:#00f!important}.green-255{background-color:#0f0!important}.cyan-255{background-color:#0ff!important}.red-255{background-color:red!important}.purple-255{background-color:#f0f!important}.yellow-255{background-color:#ff0!important}.white-255{background-color:#fff!important}.orange-255{background-color:#ffa800!important}.black-255-text{color:#000!important}.blue-255-text{color:#00f!important}.green-255-text{color:#0f0!important}.cyan-255-text{color:#0ff!important}.red-255-text{color:red!important}.purple-255-text{color:#f0f!important}.yellow-255-text{color:#ff0!important}.white-255-text{color:#fff!important}.orange-255-text{color:#ffa800!important}.black-255-border{border-color:#000!important}.blue-255-border{border-color:#00f!important}.green-255-border{border-color:#0f0!important}.cyan-255-border{border-color:#0ff!important}.red-255-border{border-color:red!important}.purple-255-border{border-color:#f0f!important}.yellow-255-border{border-color:#ff0!important}.white-255-border{border-color:#fff!important}.orange-255-border{border-color:#ffa800!important}.black-255-hover:hover{background-color:#000!important}.blue-255-hover:hover{background-color:#00f!important}.green-255-hover:hover{background-color:#0f0!important}.cyan-255-hover:hover{background-color:#0ff!important}.red-255-hover:hover{background-color:red!important}.purple-255-hover:hover{background-color:#f0f!important}.yellow-255-hover:hover{background-color:#ff0!important}.white-255-hover:hover{background-color:#fff!important}.orange-255-hover:hover{background-color:#ffa800!important}.black-255-text-hover:hover{color:#000!important}.blue-255-text-hover:hover{color:#00f!important}.green-255-text-hover:hover{color:#0f0!important}.cyan-255-text-hover:hover{color:#0ff!important}.red-255-text-hover:hover{color:red!important}.purple-255-text-hover:hover{color:#f0f!important}.yellow-255-text-hover:hover{color:#ff0!important}.white-255-text-hover:hover{color:#fff!important}.orange-255-text-hover:hover{color:#ffa800!important}.black-255-border-hover:hover{border-color:#000!important}.blue-255-border-hover:hover{border-color:#00f!important}.green-255-border-hover:hover{border-color:#0f0!important}.cyan-255-border-hover:hover{border-color:#0ff!important}.red-255-border-hover:hover{border-color:red!important}.purple-255-border-hover:hover{border-color:#f0f!important}.yellow-255-border-hover:hover{border-color:#ff0!important}.white-255-border-hover:hover{border-color:#fff!important}.orange-255-border-hover:hover{border-color:#ffa800!important}.black{background-color:#000!important}.black-text{color:#000!important}.black-border{border-color:#000!important}.black-hover:hover{background-color:#000!important}.black-text-hover:hover{color:#000!important}.black-border-hover:hover{border-color:#000!important}.white{background-color:#fff!important}.white-text{color:#fff!important}.white-border{border-color:#fff!important}.white-hover:hover{background-color:#fff!important}.white-text-hover:hover{color:#fff!important}.white-border-hover:hover{border-color:#fff!important}.left{float:left!important}.right{float:right!important}.center{text-align:center}.left-align{text-align:left}.right-align{text-align:right}.center-align{text-align:center}.full-width{width:100%!important}.full-height{height:100%!important}.inline{display:inline!important}.inline-block{display:inline-block!important}.block{display:block!important}.valign-top{vertical-align:top!important}.valign-middle{vertical-align:middle!important}.valign-bottom{vertical-align:bottom!important}.fixed{position:fixed!important}.absolute{position:absolute!important}.relative{position:relative!important}.static{position:static!important}.no-shadow{box-shadow:none!important}.no-padding{padding:0!important}.no-border{border:none!important}.content{padding:12px}.disable-select{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.cursor-pointer{cursor:pointer!important}.cursor-default{cursor:default!important}.disabled{cursor:not-allowed!important}.tui-button{display:inline-block;outline:0;padding:1px 10px;background-color:#00a800;color:#000;border:none;cursor:pointer;text-align:center;box-shadow:10px 10px #000;border-radius:0;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-button.disabled{text-decoration:line-through}.tui-button:active{background-color:#00a8a8!important;color:#000!important;box-shadow:none!important}.tui-button:focus{color:#0ff!important}input[type=button]{width:initial}.tui-checkbox{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-checkbox.disabled{color:#a8a8a8}.tui-checkbox input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-checkbox span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-checkbox input:checked~span::after{content:"[√]";color:#0ff}.tui-checkbox input:not(checked)~span::after{content:"[ ]"}.tui-divider{border-bottom:2px solid #fff;display:block}.tui-black-divider{border-bottom:2px solid #000;display:block}.tui-dropdown{position:relative;display:inline-block;cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-dropdown-content{display:none;position:absolute;background-color:#a8a8a8;min-width:200px;padding:6px;z-index:9}.tui-dropdown-content ul{border:2px #000 solid}.tui-dropdown-content ul li{display:block!important;margin:6px}.tui-dropdown-content ul li a:hover{background-color:#00a800}.tui-dropdown:hover>.tui-dropdown-content:first-of-type{display:block}.tui-fieldset{border:6px #fff double;padding:12px;background-color:inherit;margin-bottom:6px}.tui-fieldset.no-legend{margin-top:6px}.tui-input-fieldset{border-top:6px #fff double;border-bottom:6px #fff double;border-left:2px #fff solid;border-right:2px #fff solid;padding:5px;background-color:inherit}.tui-input-fieldset legend{color:#fff}.tui-input-fieldset:hover{border-color:#ff0}.tui-input-fieldset:hover legend{color:#ff0}.tui-fieldset-button{position:absolute;top:0;right:16px;color:#fff;background-color:inherit;z-index:2;border:none;cursor:pointer;outline:0;padding:2px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-fieldset-button.left{right:initial;left:16px!important}.tui-fieldset-button.bottom{bottom:0;top:initial}.tui-fieldset-text{position:absolute;bottom:0;left:16px;color:#fff;background-color:inherit;z-index:2;padding:2px}.tui-fieldset-text.right{left:initial;right:16px}.tui-fieldset-text.top{top:0;bottom:initial}.tui-fieldset-button::before{content:"["}.tui-fieldset-button::after{content:"]"}.tui-fieldset-button:active{color:#0ff!important}.tui-input{background-color:#000;color:#fff;outline:0;border:none;border-radius:0}.tui-input.disabled{background-color:#a8a8a8;color:#000}.tui-input:focus{background-color:#ff0!important;color:#000!important}.tui-nav{width:100%;background-color:#a8a8a8;padding:0 2px;z-index:9;display:block;position:fixed}.tui-nav ul li{display:inline-block;margin-left:10px;padding:1px 3px}.tui-nav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-nav ul li:hover{background-color:#00a800}.tui-panel{background-color:#0000a8;display:inline-block;color:#fff;box-shadow:10px 10px #000}.tui-panel-content{padding:12px}.tui-panel-header{padding-top:2px;display:block;background:#fff;text-align:center}.tui-progress-bar{display:block;position:relative;height:20px;width:200px;background-color:#00a8a8;overflow:hidden}.tui-progress{position:absolute;left:0;background-color:#0ff;height:100%;display:inline-block}.tui-progress-bar .tui-indeterminate{position:absolute;left:0;background-color:#0ff;height:20px;width:20px;display:inline-block;animation:indeterminate 1s backwards;animation-iteration-count:infinite;animation-timing-function:linear}.tui-progress-label{position:absolute;top:50%;left:50%;transform:translateX(-50%) translateY(-50%);z-index:1}@keyframes indeterminate{from{margin-left:-10%}to{margin-left:100%}}.tui-radio{display:block;position:relative;cursor:pointer;color:#fff;padding-left:30px;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-radio.disabled{color:#a8a8a8}.tui-radio input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;pointer-events:none}.tui-radio span{position:absolute;width:10px;height:10px;cursor:pointer;top:0;left:0}.tui-radio input:checked~span:after{content:"(•)";color:#0ff!important}.tui-radio input:not(checked)~span:after{content:"( )"}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png);background-repeat:repeat}::-webkit-scrollbar-thumb{background-color:#00a8a8}::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-blue ::-webkit-scrollbar-track{background-image:url(images/scroll-blue.png)}.tui-scroll-blue ::-webkit-scrollbar-thumb{background-color:#0000a8}.tui-scroll-blue ::-webkit-scrollbar-thumb:hover{background-color:#0000a8}.tui-scroll-green ::-webkit-scrollbar-track{background-image:url(images/scroll-green.png)}.tui-scroll-green ::-webkit-scrollbar-thumb{background-color:#00a800}.tui-scroll-green ::-webkit-scrollbar-thumb:hover{background-color:#00a800}.tui-scroll-cyan ::-webkit-scrollbar-track{background-image:url(images/scroll-cyan.png)}.tui-scroll-cyan ::-webkit-scrollbar-thumb{background-color:#00a8a8}.tui-scroll-cyan ::-webkit-scrollbar-thumb:hover{background-color:#00a8a8}.tui-scroll-red ::-webkit-scrollbar-track{background-image:url(images/scroll-red.png)}.tui-scroll-red ::-webkit-scrollbar-thumb{background-color:#a80000}.tui-scroll-red ::-webkit-scrollbar-thumb:hover{background-color:#a80000}.tui-scroll-purple ::-webkit-scrollbar-track{background-image:url(images/scroll-purple.png)}.tui-scroll-purple ::-webkit-scrollbar-thumb{background-color:#a800a8}.tui-scroll-purple ::-webkit-scrollbar-thumb:hover{background-color:#a800a8}.tui-scroll-yellow ::-webkit-scrollbar-track{background-image:url(images/scroll-yellow.png)}.tui-scroll-yellow ::-webkit-scrollbar-thumb{background-color:#a8a800}.tui-scroll-yellow ::-webkit-scrollbar-thumb:hover{background-color:#a8a800}.tui-scroll-white ::-webkit-scrollbar-track{background-image:url(images/scroll-white.png)}.tui-scroll-white ::-webkit-scrollbar-thumb{background-color:#a8a8a8}.tui-scroll-white ::-webkit-scrollbar-thumb:hover{background-color:#a8a8a8}.tui-sidenav{position:fixed;top:0;left:0;background-color:#00a8a8;min-width:200px;box-shadow:10px 10px #000!important;padding:6px;z-index:10;height:100%;z-index:8;display:none}.tui-sidenav.right{left:initial;right:0}.tui-sidenav.active{display:block!important}.tui-sidenav ul{margin-top:20px;border:2px #000 solid}.tui-sidenav ul li{display:block;margin:6px}.tui-sidenav ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-sidenav ul li:hover{background-color:#ff0}.tui-sidenav-button{cursor:pointer;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar{width:100%;background-color:#a8a8a8;padding:0 1px;left:0;bottom:0;z-index:9;position:fixed}.tui-statusbar ul li{display:inline-block;margin-left:10px;padding:2px 3px}.tui-statusbar ul li:active{background-color:#0000a8;color:#fff}.tui-statusbar ul li a{user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-statusbar-divider{border-right:2px #000 solid;display:inline;margin:0 3px}.tui-table{border:2px solid #a8a8a8;padding:5px;border-collapse:collapse}.tui-table.hovered-blue tbody tr:hover{background-color:#00f!important;color:#000}.tui-table.hovered-green tbody tr:hover{background-color:#0f0!important;color:#000}.tui-table.hovered-cyan tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.hovered-red tbody tr:hover{background-color:red!important;color:#fff}.tui-table.hovered-purple tbody tr:hover{background-color:#f0f!important;color:#fff}.tui-table.hovered-yellow tbody tr:hover{background-color:#ff0!important;color:#000}.tui-table.hovered-white tbody tr:hover{background-color:#fff!important;color:#000}.tui-table.hovered-orange tbody tr:hover{background-color:#ffa800!important;color:#000}.tui-table.hovered tbody tr:hover{background-color:#0ff!important;color:#000}.tui-table.striped-blue tbody tr:nth-child(even){background-color:#0000a8}.tui-table.striped-green tbody tr:nth-child(even){background-color:#00a800}.tui-table.striped-cyan tbody tr:nth-child(even){background-color:#00a8a8}.tui-table.striped-red tbody tr:nth-child(even){background-color:#a80000}.tui-table.striped-purple tbody tr:nth-child(even){background-color:#a800a8}.tui-table.striped-yellow tbody tr:nth-child(even){background-color:#a8a800}.tui-table.striped-white tbody tr:nth-child(even){background-color:#a8a8a8;color:#000}.tui-table.striped-orange tbody tr:nth-child(even){background-color:#a85600}.tui-table tbody{background-color:inherit;color:#fff}.tui-table tbody tr td{border-right:2px solid #a8a8a8;padding:0 2px}.tui-table thead{background-color:inherit;color:#ff0;text-align:center}.tui-table tfoot{background-color:inherit;color:#ff0;text-align:center}.tui-table-grid{border-collapse:collapse;width:100%}.tui-table-grid tbody tr td,.tui-table-grid tbody tr th,.tui-table-grid thead tr td,.tui-table-grid thead tr th{border:2px solid #000;padding:10px;vertical-align:top}.tui-tabs{background-color:#0000a8;width:100%;padding:0 10px 0 10px}.tui-tabs ul li{display:inline-block}.tui-tabs ul li a{display:block;user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none}.tui-tab{padding:2px 10px 0 10px;color:#a8a8a8;cursor:pointer}.tui-tab.active{background-color:#a8a8a8;color:#0000a8}.tui-tab.disabled{text-decoration:line-through}.tui-tab-content{display:none}.tui-textarea{background-color:inherit;border:none;padding:0;color:#ff0;outline:0}.tui-textarea.disabled{background-color:#a8a8a8;color:#000}.tui-window{background-color:#0000a8;padding:1px;display:inline-block;position:relative;box-shadow:10px 10px #000;color:#fff}.tui-screen-640-480{width:640px;height:480px}.tui-screen-800-600{width:800px;height:600px}.tui-screen-1024-768{width:1024px;height:768px}.tui-screen-1024-768,.tui-screen-640-480,.tui-screen-800-600{position:relative;overflow:hidden}.tui-screen-1024-768.bordered,.tui-screen-640-480.bordered,.tui-screen-800-600.bordered{border:2px solid #000}.tui-screen-1024-768.centered,.tui-screen-640-480.centered,.tui-screen-800-600.centered{margin:auto;margin-top:20px}.tui-datetime{padding:1px 0 1px 0;margin-right:10px;float:right}.tui-shortcut{float:right}.tui-shadow,.tui-shadow-1{box-shadow:10px 10px #000!important}.tui-shadow-2{box-shadow:15px 15px #000}.tui-shadow-3{box-shadow:20px 20px #000}.tui-shadow-4{box-shadow:25px 25px #000}.tui-shadow-5{box-shadow:30px 30px #000}.tui-shadow-left,.tui-shadow-left-1{box-shadow:-10px 10px #000!important}.tui-shadow-left-2{box-shadow:-15px 15px #000!important}.tui-shadow-left-3{box-shadow:-20px 20px #000!important}.tui-shadow-left-4{box-shadow:-25px 25px #000!important}.tui-shadow-left-5{box-shadow:-30px 30px #000!important}.tui-no-shadow{box-shadow:none!important}.tui-bg-blue-white{background-image:url(images/bg-blue-white.png);background-repeat:repeat}.tui-bg-blue-black{background-image:url(images/bg-blue-black.png);background-repeat:repeat}.tui-bg-green-white{background-image:url(images/bg-green-white.png);background-repeat:repeat}.tui-bg-green-black{background-image:url(images/bg-green-black.png);background-repeat:repeat}.tui-bg-cyan-white{background-image:url(images/bg-cyan-white.png);background-repeat:repeat}.tui-bg-cyan-black{background-image:url(images/bg-cyan-black.png);background-repeat:repeat}.tui-bg-red-white{background-image:url(images/bg-red-white.png);background-repeat:repeat}.tui-bg-red-black{background-image:url(images/bg-red-black.png);background-repeat:repeat}.tui-bg-purple-white{background-image:url(images/bg-purple-white.png);background-repeat:repeat}.tui-bg-purple-black{background-image:url(images/bg-purple-black.png);background-repeat:repeat}.tui-bg-yellow-white{background-image:url(images/bg-yellow-white.png);background-repeat:repeat}.tui-bg-yellow-black{background-image:url(images/bg-yellow-black.png);background-repeat:repeat}.tui-bg-orange-white{background-image:url(images/bg-orange-white.png);background-repeat:repeat}.tui-bg-orange-black{background-image:url(images/bg-orange-black.png);background-repeat:repeat}.tui-border-solid{border-style:solid!important;border-width:2px!important}.tui-border-dashed{border-style:dashed!important;border-width:2px!important}.tui-border-dotted{border-style:dotted!important;border-width:2px!important}.tui-border-double{border-style:double!important;border-width:6px!important}.container{margin:0 auto;max-width:1280px;width:90%}@media only screen and (min-width :601px){.container{width:85%}}@media only screen and (min-width :993px){.container{width:70%}}.col .row{margin-left:-.75rem;margin-right:-.75rem}.section{padding-top:1rem;padding-bottom:1rem}.section.no-pad{padding:0}.section.no-pad-bot{padding-bottom:0}.section.no-pad-top{padding-top:0}.row{margin-left:auto;margin-right:auto;margin-bottom:20px}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;padding:0 .75rem;min-height:1px}.row .col[class*=pull-],.row .col[class*=push-]{position:relative}.row .col.s1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.s7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.s11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-s1{margin-left:8.3333333333%}.row .col.pull-s1{right:8.3333333333%}.row .col.push-s1{left:8.3333333333%}.row .col.offset-s2{margin-left:16.6666666667%}.row .col.pull-s2{right:16.6666666667%}.row .col.push-s2{left:16.6666666667%}.row .col.offset-s3{margin-left:25%}.row .col.pull-s3{right:25%}.row .col.push-s3{left:25%}.row .col.offset-s4{margin-left:33.3333333333%}.row .col.pull-s4{right:33.3333333333%}.row .col.push-s4{left:33.3333333333%}.row .col.offset-s5{margin-left:41.6666666667%}.row .col.pull-s5{right:41.6666666667%}.row .col.push-s5{left:41.6666666667%}.row .col.offset-s6{margin-left:50%}.row .col.pull-s6{right:50%}.row .col.push-s6{left:50%}.row .col.offset-s7{margin-left:58.3333333333%}.row .col.pull-s7{right:58.3333333333%}.row .col.push-s7{left:58.3333333333%}.row .col.offset-s8{margin-left:66.6666666667%}.row .col.pull-s8{right:66.6666666667%}.row .col.push-s8{left:66.6666666667%}.row .col.offset-s9{margin-left:75%}.row .col.pull-s9{right:75%}.row .col.push-s9{left:75%}.row .col.offset-s10{margin-left:83.3333333333%}.row .col.pull-s10{right:83.3333333333%}.row .col.push-s10{left:83.3333333333%}.row .col.offset-s11{margin-left:91.6666666667%}.row .col.pull-s11{right:91.6666666667%}.row .col.push-s11{left:91.6666666667%}.row .col.offset-s12{margin-left:100%}.row .col.pull-s12{right:100%}.row .col.push-s12{left:100%}@media only screen and (min-width :601px){.row .col.m1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.m7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.m11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-m1{margin-left:8.3333333333%}.row .col.pull-m1{right:8.3333333333%}.row .col.push-m1{left:8.3333333333%}.row .col.offset-m2{margin-left:16.6666666667%}.row .col.pull-m2{right:16.6666666667%}.row .col.push-m2{left:16.6666666667%}.row .col.offset-m3{margin-left:25%}.row .col.pull-m3{right:25%}.row .col.push-m3{left:25%}.row .col.offset-m4{margin-left:33.3333333333%}.row .col.pull-m4{right:33.3333333333%}.row .col.push-m4{left:33.3333333333%}.row .col.offset-m5{margin-left:41.6666666667%}.row .col.pull-m5{right:41.6666666667%}.row .col.push-m5{left:41.6666666667%}.row .col.offset-m6{margin-left:50%}.row .col.pull-m6{right:50%}.row .col.push-m6{left:50%}.row .col.offset-m7{margin-left:58.3333333333%}.row .col.pull-m7{right:58.3333333333%}.row .col.push-m7{left:58.3333333333%}.row .col.offset-m8{margin-left:66.6666666667%}.row .col.pull-m8{right:66.6666666667%}.row .col.push-m8{left:66.6666666667%}.row .col.offset-m9{margin-left:75%}.row .col.pull-m9{right:75%}.row .col.push-m9{left:75%}.row .col.offset-m10{margin-left:83.3333333333%}.row .col.pull-m10{right:83.3333333333%}.row .col.push-m10{left:83.3333333333%}.row .col.offset-m11{margin-left:91.6666666667%}.row .col.pull-m11{right:91.6666666667%}.row .col.push-m11{left:91.6666666667%}.row .col.offset-m12{margin-left:100%}.row .col.pull-m12{right:100%}.row .col.push-m12{left:100%}}@media only screen and (min-width :993px){.row .col.l1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.l7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.l11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.3333333333%}.row .col.pull-l1{right:8.3333333333%}.row .col.push-l1{left:8.3333333333%}.row .col.offset-l2{margin-left:16.6666666667%}.row .col.pull-l2{right:16.6666666667%}.row .col.push-l2{left:16.6666666667%}.row .col.offset-l3{margin-left:25%}.row .col.pull-l3{right:25%}.row .col.push-l3{left:25%}.row .col.offset-l4{margin-left:33.3333333333%}.row .col.pull-l4{right:33.3333333333%}.row .col.push-l4{left:33.3333333333%}.row .col.offset-l5{margin-left:41.6666666667%}.row .col.pull-l5{right:41.6666666667%}.row .col.push-l5{left:41.6666666667%}.row .col.offset-l6{margin-left:50%}.row .col.pull-l6{right:50%}.row .col.push-l6{left:50%}.row .col.offset-l7{margin-left:58.3333333333%}.row .col.pull-l7{right:58.3333333333%}.row .col.push-l7{left:58.3333333333%}.row .col.offset-l8{margin-left:66.6666666667%}.row .col.pull-l8{right:66.6666666667%}.row .col.push-l8{left:66.6666666667%}.row .col.offset-l9{margin-left:75%}.row .col.pull-l9{right:75%}.row .col.push-l9{left:75%}.row .col.offset-l10{margin-left:83.3333333333%}.row .col.pull-l10{right:83.3333333333%}.row .col.push-l10{left:83.3333333333%}.row .col.offset-l11{margin-left:91.6666666667%}.row .col.pull-l11{right:91.6666666667%}.row .col.push-l11{left:91.6666666667%}.row .col.offset-l12{margin-left:100%}.row .col.pull-l12{right:100%}.row .col.push-l12{left:100%}}@media only screen and (min-width :1201px){.row .col.xl1{width:8.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl2{width:16.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl3{width:25%;margin-left:auto;left:auto;right:auto}.row .col.xl4{width:33.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl5{width:41.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl6{width:50%;margin-left:auto;left:auto;right:auto}.row .col.xl7{width:58.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl8{width:66.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl9{width:75%;margin-left:auto;left:auto;right:auto}.row .col.xl10{width:83.3333333333%;margin-left:auto;left:auto;right:auto}.row .col.xl11{width:91.6666666667%;margin-left:auto;left:auto;right:auto}.row .col.xl12{width:100%;margin-left:auto;left:auto;right:auto}.row .col.offset-xl1{margin-left:8.3333333333%}.row .col.pull-xl1{right:8.3333333333%}.row .col.push-xl1{left:8.3333333333%}.row .col.offset-xl2{margin-left:16.6666666667%}.row .col.pull-xl2{right:16.6666666667%}.row .col.push-xl2{left:16.6666666667%}.row .col.offset-xl3{margin-left:25%}.row .col.pull-xl3{right:25%}.row .col.push-xl3{left:25%}.row .col.offset-xl4{margin-left:33.3333333333%}.row .col.pull-xl4{right:33.3333333333%}.row .col.push-xl4{left:33.3333333333%}.row .col.offset-xl5{margin-left:41.6666666667%}.row .col.pull-xl5{right:41.6666666667%}.row .col.push-xl5{left:41.6666666667%}.row .col.offset-xl6{margin-left:50%}.row .col.pull-xl6{right:50%}.row .col.push-xl6{left:50%}.row .col.offset-xl7{margin-left:58.3333333333%}.row .col.pull-xl7{right:58.3333333333%}.row .col.push-xl7{left:58.3333333333%}.row .col.offset-xl8{margin-left:66.6666666667%}.row .col.pull-xl8{right:66.6666666667%}.row .col.push-xl8{left:66.6666666667%}.row .col.offset-xl9{margin-left:75%}.row .col.pull-xl9{right:75%}.row .col.push-xl9{left:75%}.row .col.offset-xl10{margin-left:83.3333333333%}.row .col.pull-xl10{right:83.3333333333%}.row .col.push-xl10{left:83.3333333333%}.row .col.offset-xl11{margin-left:91.6666666667%}.row .col.pull-xl11{right:91.6666666667%}.row .col.push-xl11{left:91.6666666667%}.row .col.offset-xl12{margin-left:100%}.row .col.pull-xl12{right:100%}.row .col.push-xl12{left:100%}}.tui-modal{position:absolute;left:0;right:0;top:100px;z-index:101;display:none}.tui-modal.active{display:block!important}.tui-overlap{position:absolute;top:0;left:0;right:0;bottom:0;z-index:100;display:none}.tui-overlap.active{display:block!important}.tui-chart-vertical{position:relative;background-color:#000}.tui-chart-horizontal{position:relative;background-color:#000}.tui-chart-vertical .tui-chart-display{display:flex;position:absolute;top:0;left:50px;right:0;bottom:30px;align-items:flex-end;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-vertical .tui-chart-display.no-x-axis{bottom:0}.tui-chart-vertical .tui-chart-display.no-y-axis{left:0}.tui-chart-horizontal .tui-chart-display{display:flex;position:absolute;flex-direction:column;top:0;left:50px;right:0;bottom:30px;align-items:stretch;border-bottom:2px solid #fff;border-left:2px solid #fff}.tui-chart-horizontal .tui-chart-display.no-x-axis{bottom:0}.tui-chart-horizontal .tui-chart-display.no-y-axis{left:0}.tui-chart-x-axis{display:flex;position:absolute;height:30px;left:50px;right:0;bottom:0;line-height:30px}.tui-chart-y-axis{display:flex;flex-direction:column;position:absolute;top:0;left:0;bottom:30px;width:50px}.tui-chart-vertical .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:center}.tui-chart-vertical .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:flex-start;justify-content:flex-end}.tui-chart-horizontal .tui-chart-x-axis .tui-chart-legend{flex:0 1 100%;text-align:right}.tui-chart-horizontal .tui-chart-y-axis .tui-chart-legend{flex:1;text-align:right;padding-right:2px;display:flex;align-items:center;justify-content:flex-end}.tui-chart-vertical .tui-chart-display .tui-chart-value{flex:0 1 100%;text-align:center;overflow:hidden}.tui-chart-horizontal .tui-chart-display .tui-chart-value{flex:1;text-align:right;display:flex;align-items:center;align-content:flex-start;justify-content:flex-end;overflow:hidden}`
}


==============================================================================
background.js  (175 lines)
==============================================================================

// the toolbar icon shows or hides Dosson in that tab, like the show/hide key. Pages Dosson doesn't run on (chrome://,
// the Web Store, a tab opened before Dosson was installed) have no listener: nothing to do there
chrome.action.onClicked.addListener(tab => {
    chrome.tabs.sendMessage(tab.id, { type: 'dossonToggle' }, { frameId: 0 }).catch(() => {});
});

// index.js asks for a frame the page can't read (another origin, sandboxed…): Dosson reads it from inside
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === 'dossonReadFrame') {
        readFrame(sender.tab.id, message.path).then(sendResponse, error => sendResponse({ error: error.message }));
        return true; // sendResponse is called asynchronously
    }
    // the object inspector and the run panel, for a value in that frame (see handle in mainThread.js)
    if (message.type === 'dossonFrameRequest') {
        requestFrame(sender.tab.id, message.path, message.request).then(sendResponse, error => sendResponse({ error: error.message }));
        return true;
    }
    // Frameworks: detect what the top page uses
    if (message.type === 'dossonDetectFrameworks') {
        detectFrameworks(sender.tab.id).then(sendResponse, error => sendResponse({ error: error.message }));
        return true;
    }
    // Security → Secrets: credentials left where scripts can read them, in every frame
    if (message.type === 'dossonScanSecrets') {
        scanSecrets(sender.tab.id).then(sendResponse, error => sendResponse({ error: error.message }));
        return true;
    }
    // Frameworks → a framework: its releases, from deps.dev (npm) or GitHub
    if (message.type === 'dossonFetchJson') {
        fetchJson(message.url).then(sendResponse, error => sendResponse({ error: error.message }));
        return true;
    }
    // Settings → Source Code: the document make-release.mjs put next to the extension's files (not in an unpacked build)
    if (message.type === 'dossonReadSource') {
        readSource().then(sendResponse, error => sendResponse({ error: error.message }));
        return true;
    }
    // whether Dosson shows is remembered per tab: shown in one tab, it stays hidden in the others
    if (message.type === 'dossonGetVisible') {
        const key = visibleKey(sender.tab.id);
        chrome.storage.session.get(key).then(result => sendResponse({ visible: result[key] === true }), error => sendResponse({ error: error.message }));
        return true;
    }
    if (message.type === 'dossonSetVisible') {
        const key = visibleKey(sender.tab.id);
        const saved = message.visible ? chrome.storage.session.set({ [key]: true }) : chrome.storage.session.remove(key);
        saved.then(() => sendResponse({}), error => sendResponse({ error: error.message }));
        return true;
    }
});

// one key per tab, so two tabs saving at the same time don't overwrite each other. storage.session survives the
// service worker stopping and is cleared when the browser closes
function visibleKey(tabId) {
    return `dossonVisible_${tabId}`;
}

chrome.tabs.onRemoved.addListener(tabId => chrome.storage.session.remove(visibleKey(tabId)));

// visibility used to be saved for every tab at once, in storage.sync
chrome.runtime.onInstalled.addListener(() => chrome.storage.sync.remove('dossonVisible'));

async function readSource() {
    try {
        const response = await fetch(chrome.runtime.getURL('source.txt'));
        if (response.ok) {
            return { text: await response.text() };
        }
    } catch (e) {
        // a file that isn't there makes fetch throw
    }
    return { error: 'The source code is in released builds' };
}

// only the APIs index.js reads releases from: a page can't use Dosson to fetch anything else
const FETCH_ORIGINS = ['https://api.deps.dev/', 'https://api.github.com/'];
async function fetchJson(url) {
    if (!FETCH_ORIGINS.some(origin => url.startsWith(origin))) {
        return { error: `Dosson doesn't fetch ${url}` };
    }
    const response = await fetch(url, { headers: { Accept: 'application/json' } });
    return response.ok ? response.json() : { error: `${response.status} ${response.statusText}`.trim() };
}

// the detectors' files, in the order they run: the engine, then one file per framework (see detect/detectors.json)
async function getDetectorFiles() {
    const { js, css } = await (await fetch(chrome.runtime.getURL('detect/detectors.json'))).json();
    return ['detect/detect.js', ...js.map(id => `detect/js/${id}.js`), ...css.map(id => `detect/css/${id}.js`)];
}

// the detectors run in the top page's main world, only when asked. chrome.scripting works whatever the page's CSP
async function detectFrameworks(tabId) {
    const details = { target: { tabId, frameIds: [0] }, world: 'MAIN', injectImmediately: true };
    await chrome.scripting.executeScript({ ...details, files: ['mainThread.js', ...await getDetectorFiles()] });
    const [injection] = await chrome.scripting.executeScript({ ...details, func: () => window[Symbol.for('dosson')].main.handle(window, { type: 'frameworks' }) });
    return injection?.result ?? { error: "Dosson's detectors did not run on this page" };
}

// security/secrets.js scans each frame Chrome lets Dosson into, whatever its origin, in its main world. A frame
// Dosson can't run in (sandboxed without allow-scripts, another extension's) has no result and is counted as skipped.
// Every frame compares with the top page's clean window: a fresh window has the same globals in any frame, and a
// sandboxed frame can't read one of its own (see getCleanProperties)
async function scanSecrets(tabId) {
    const all = { target: { tabId, allFrames: true }, world: 'MAIN', injectImmediately: true };
    await chrome.scripting.executeScript({ ...all, files: ['mainThread.js', 'security/secrets.js'] });
    const [top] = await chrome.scripting.executeScript({ target: { tabId, frameIds: [0] }, world: 'MAIN', injectImmediately: true, func: () => window[Symbol.for('dosson')].main.getCleanProperties() });
    const injections = await chrome.scripting.executeScript({
        ...all,
        func: (cleanProps) => window[Symbol.for('dosson')]?.secrets?.scan(window, cleanProps),
        args: [top?.result || null]
    });
    const frames = injections.map(injection => injection.result).filter(Boolean);
    return { frames, skipped: injections.length - frames.length };
}

// runs in every frame: the frame's position at each level, from the top window down (window[1][0] is [1, 0]).
// parent and parent[i] stay readable across origins
function getFramePath() {
    const path = [];
    for (let frame = window; frame !== frame.parent; frame = frame.parent) {
        let i = 0;
        while (i < frame.parent.length && frame.parent[i] !== frame) {
            i++;
        }
        path.unshift(i < frame.parent.length ? i : -1);
    }
    return path;
}

const FRAME_NOT_FOUND = "Dosson can't run in this frame (sandboxed without allow-scripts?), or it's gone. Reopen Iframes to refresh";

// the frame at path, as an injection result ({ frameId }); undefined when no frame answers with that path
async function findFrame(tabId, path) {
    const frames = await chrome.scripting.executeScript({ target: { tabId, allFrames: true }, func: getFramePath, injectImmediately: true });
    return frames.find(injection => JSON.stringify(injection.result) === JSON.stringify(path));
}

// mainThread.js answers in the frame's main world. It keeps what functions return, so later requests can inspect it
async function requestFrame(tabId, path, request) {
    const frame = await findFrame(tabId, path);
    if (!frame) {
        return { error: FRAME_NOT_FOUND };
    }
    const details = { target: { tabId, frameIds: [frame.frameId] }, world: 'MAIN', injectImmediately: true };
    await chrome.scripting.executeScript({ ...details, files: ['mainThread.js'] });
    const [injection] = await chrome.scripting.executeScript({ ...details, func: (request) => window[Symbol.for('dosson')].main.handle(window, request), args: [request] });
    return injection?.result ?? { error: "Dosson's scripts did not run in this frame" };
}

// path is the frame's position from the top window (see getFrameIndex in frames.js). Its globals come from its main
// world (mainThread.js), its own iframes from Dosson's isolated world (frames.js). injectImmediately: ads that
// never finish loading would otherwise keep Dosson waiting
async function readFrame(tabId, path) {
    const frame = await findFrame(tabId, path);
    if (!frame) {
        return { error: FRAME_NOT_FOUND };
    }
    // mainThread.js and frames.js run again for each call: they do nothing the second time
    const run = (frameId, world, file, func, args = []) => {
        const details = { target: { tabId, frameIds: [frameId] }, world, injectImmediately: true };
        return chrome.scripting.executeScript({ ...details, files: [file] })
            .then(() => chrome.scripting.executeScript({ ...details, func, args }))
            .then(([injection]) => injection?.result);
    };
    const readGlobals = (cleanProps) => run(frame.frameId, 'MAIN', 'mainThread.js', (cleanProps) => window[Symbol.for('dosson')].main.detectChanges(window, cleanProps ?? undefined), [cleanProps]);
    const [windowChanges, isolated] = await Promise.all([
        // a sandboxed frame can't read a clean window of its own (see getCleanProperties): compare with the top page's
        readGlobals(null).then(changes => changes ?? run(0, 'MAIN', 'mainThread.js', () => window[Symbol.for('dosson')].main.getCleanProperties()).then(readGlobals)),
        run(frame.frameId, 'ISOLATED', 'frames.js', () => ({ href: location.href, iframes: collectIframes(document).map(describeIframe) }))
    ]);
    if (!windowChanges || !isolated) {
        return { error: "Dosson's scripts did not run in this frame. Scripts may be blocked there (sandbox without allow-scripts)" };
    }
    return { windowChanges, ...isolated };
}


==============================================================================
mainThread.js  (412 lines)
==============================================================================

// Runs in the page's main world, where the page's own globals live. index.js adds it to the top page with a <script>
// tag; background.js runs it in other frames with chrome.scripting. Running it again in the same frame does nothing.
// Everything Dosson keeps in a window is in one object under a symbol key, window[Symbol.for('dosson')]: main (this
// file), frameworks (detect/detect.js), secrets (security/secrets.js). Inspect lists globals by name, so it never
// shows it among the page's
if (!window[Symbol.for('dosson')]?.main) {
    (window[Symbol.for('dosson')] ??= {}).main = (function () {
        function __info(message) {
            console.log(`%c--> ${message}`, 'background: blue; color: white');
        }

        function __error(message) {
            console.error(`%c--> ${message}`, 'background: red; color: white');
        }

        function createCleanWindowObject() {
            __info('mainThread:: in createCleanWindowObject');
            const iframe = document.createElement('iframe');
            iframe.style.display = 'none'; // Hide the iframe
            const parent = document.body || document.documentElement;
            parent.appendChild(iframe);
            const cleanWindow = iframe.contentWindow; // This should have only the original window properties
            parent.removeChild(iframe); // Cleanup after getting the reference
            return cleanWindow;
        }

        function getAllProperties(obj) {
            let props = new Set();

            // Loop through the object's own properties
            for (let prop in obj) {
                if (obj.hasOwnProperty(prop)) {
                    props.add(prop);
                }
            }

            // Loop through the prototype chain
            let proto = Object.getPrototypeOf(obj);
            while (proto) {
                Object.getOwnPropertyNames(proto).forEach(p => props.add(p));
                proto = Object.getPrototypeOf(proto);
            }

            return Array.from(props);
        }


        // the globals of a fresh window. null in a sandboxed frame: there each new window gets its own origin, so the
        // fresh one can't be read
        function getCleanProperties() {
            const cleanWindow = createCleanWindowObject();
            try {
                cleanWindow.document;
            } catch (e) {
                return null;
            }
            return getAllProperties(cleanWindow);
        }

        // the globals targetWindow has that a fresh window doesn't: the page's own window, or a same-origin iframe's.
        // background.js passes cleanProps from the top page for sandboxed frames; null without them
        // a string global's value in the list: its start only (the inspector reads it whole)
        const MAX_LISTED_STRING = 1000;

        function detectChanges(targetWindow, cleanProps = getCleanProperties()) {
            if (!cleanProps) {
                return null;
            }
            const currentProps = getAllProperties(targetWindow);
            // Detect added properties. Indexes (window[0]…) are the iframes, which Inspect lists on their own. A Set
            // and no log per global: Google Meet adds 35,000
            const clean = new Set(cleanProps);
            const addedProps = currentProps.filter(p => !clean.has(p) && !/^\d+$/.test(p));

            __info(`mainThread:: ${addedProps.length} added properties (${cleanProps.length} vs ${currentProps.length})`);

            const fullAddedProps = [];
            addedProps.forEach(prop => {
                const item = {};
                item.name = prop
                // a getter that throws must not hide the other globals
                try {
                    // read once: a global can be a getter
                    const value = targetWindow[prop];
                    // every variable gets a type: Inspect groups the Variables list by it
                    if (value === targetWindow) {
                        item.value = 'window'
                        item.type = 'window';
                    }
                    else if (value === null) {
                        item.value = 'null';
                        item.type = 'null';
                    } else {
                        const theTypeof = typeof value;
                        switch (theTypeof) {
                            case 'string':
                                // the row shows the start, the inspector reads it whole
                                item.value = value.length > MAX_LISTED_STRING ? `${value.slice(0, MAX_LISTED_STRING)}…` : value;
                                item.type = theTypeof;
                                break;
                            case 'boolean':
                            case 'number':
                            case 'undefined':
                                item.value = value;
                                item.type = theTypeof;
                                break;
                            case 'function':
                            case 'symbol':
                                item.type = theTypeof;
                                break;
                            case 'object':
                                if (Array.isArray(value)) {
                                    item.type = 'array';
                                    item.length = value.length;
                                } else {
                                    item.type = 'object';
                                    item.length = Object.getOwnPropertyNames(value).length
                                }
                                break;
                            // bigint: no value, since chrome.scripting can't send one back
                            default:
                                item.type = theTypeof;
                        }
                    }
                } catch (e) {
                    item.type = 'unreadable';
                }
                fullAddedProps.push(item);
            })
            return fullAddedProps;
        }

        // The element (or window) an index.js request was dispatched on. Salesforce's Aura wraps window.addEventListener
        // and can run the listener after dispatch has ended, when composedPath() is empty: e.target is still set then
        function requestTarget(e) {
            return e.composedPath()[0] || e.target || window;
        }

        // index.js asks on window for the page's globals, or on an <iframe> element for that iframe's.
        // The answer goes back to the same target, so the two never mix
        window.addEventListener('dossonGetWindowChanges', function (e) {
            __info(`mainThread:: dossonGetWindowChanges message caught.`);
            const target = requestTarget(e);
            let detail;
            if (target.tagName !== 'IFRAME') {
                detail = { windowChanges: detectChanges(window) };
            } else if (!target.contentDocument) {
                // another origin (or sandboxed): the browser hides its window from the page
                detail = { error: 'cross-origin' };
            } else {
                detail = { windowChanges: detectChanges(target.contentWindow) };
            }
            target.dispatchEvent(new CustomEvent('dossonWindowChanges', { detail }));
        })

        // The object inspector and the run panel walk values one level at a time. A path leads from a window to a
        // value: property names, plus { proto: true } for [[Prototype]], { entries: true } for a Map's or a Set's
        // entries, and a first { result: n } for what the run panel's nth call returned (kept in results)
        const results = [];
        const MAX_ENTRIES = 500;
        const MAX_EDITABLE_LENGTH = 100000;

        // the value at path, and its owner: the object it was read from, which a function is called on. Getters run
        // against that object too, even when found on its [[Prototype]]: DOM getters throw on the prototype itself
        function resolve(targetWindow, path) {
            let value = targetWindow;
            let receiver = targetWindow;
            let owner;
            path.forEach(segment => {
                if (segment.result !== undefined) {
                    owner = undefined;
                    value = receiver = results[segment.result];
                } else if (segment.proto) {
                    value = Object.getPrototypeOf(value);
                } else if (segment.entries) {
                    owner = receiver;
                    value = receiver = Array.from(value);
                } else {
                    owner = receiver;
                    value = receiver = Reflect.get(value, segment, receiver);
                }
            });
            return { value, owner };
        }

        // 'array', 'object', the tag of anything else (Map, HTMLDivElement…), or typeof for primitives
        function getType(value) {
            if (value === null) {
                return 'null';
            }
            if (typeof value !== 'object') {
                return typeof value;
            }
            if (Array.isArray(value)) {
                return 'array';
            }
            const tag = Object.prototype.toString.call(value).slice(8, -1);
            return tag === 'Object' ? 'object' : tag;
        }

        // names from the source: function f(a, b), (a, b) =>, a =>, method(a, b). fn.length fills in the rest
        function getParameterNames(fn) {
            let source = '';
            try {
                source = Function.prototype.toString.call(fn);
            } catch (e) { }
            const match = source.match(/^[^(=]*\(([^)]*)\)/) || source.match(/^(?:async\s+)?([\w$]+)\s*=>/);
            const names = match ? match[1].split(',').map(name => name.trim().replace(/\s*=[\s\S]*$/, '')).filter(Boolean) : [];
            for (let i = names.length; i < fn.length; i++) {
                names.push(`arg${i}`);
            }
            return names;
        }

        // a short text for value; strings are cut at max characters
        function getPreview(value, type, max) {
            switch (typeof value) {
                case 'string':
                    return JSON.stringify(value.length > max ? `${value.slice(0, max)}…` : value);
                case 'function':
                    return `ƒ ${value.name || 'anonymous'}(${getParameterNames(value).join(', ')})`;
                case 'bigint':
                    return `${value}n`;
                case 'symbol':
                    return value.toString();
                case 'object':
                    if (value === null) {
                        return 'null';
                    }
                    if (type === 'array') {
                        return `Array(${value.length})`;
                    }
                    if (type === 'Map' || type === 'Set') {
                        return `${type}(${value.size})`;
                    }
                    if (type === 'object') {
                        const keys = Object.keys(value);
                        return `{${keys.slice(0, 5).join(', ')}${keys.length > 5 ? ', …' : ''}}`;
                    }
                    if (value.nodeType === 1) {
                        return `<${value.tagName.toLowerCase()}${value.id ? `#${value.id}` : ''}>`;
                    }
                    return type;
                default:
                    return String(value);
            }
        }

        function describeValue(value, max = 300) {
            const type = getType(value);
            let preview;
            try {
                preview = getPreview(value, type, max);
            } catch (e) {
                preview = type;
            }
            // functions open too: libraries hang a lot on them (jQuery's $.ajax…)
            const description = { type, preview, expandable: (typeof value === 'object' && value !== null) || typeof value === 'function' };
            // what the inspector's editor starts from: the whole string, not the preview cut at max
            if (type === 'boolean' || type === 'null' || (type === 'number' && Number.isFinite(value)) || (type === 'string' && value.length <= MAX_EDITABLE_LENGTH)) {
                description.value = value;
            }
            return description;
        }

        // the class a prototype belongs to (Object, Array, Foo…), read without running getters
        function getPrototypeName(proto) {
            try {
                const constructor = Object.getOwnPropertyDescriptor(proto, 'constructor')?.value;
                if (typeof constructor === 'function' && constructor.name) {
                    return constructor.name;
                }
                return getType(proto);
            } catch (e) {
                return 'unknown';
            }
        }

        // a prototype other than the built-in one for the value's type (Object.prototype, Array.prototype, Map.prototype…):
        // a class (Point), Object.create(x)… The inspector's Variables and Functions views only list it then
        function isPrototypeChanged(value, protoName) {
            const tag = Object.prototype.toString.call(value).slice(8, -1);
            return protoName !== 'Object' && protoName !== tag;
        }

        // one row per own property, then [[Entries]] and [[Prototype]]. Getters aren't run until opened, as they
        // can have side effects
        function listEntries(value) {
            if (!describeValue(value).expandable) {
                return [];
            }
            const entries = [];
            const names = Object.getOwnPropertyNames(value);
            names.slice(0, MAX_ENTRIES).forEach(key => {
                try {
                    const descriptor = Object.getOwnPropertyDescriptor(value, key);
                    entries.push(descriptor && descriptor.get
                        ? { segment: key, key, type: 'getter', preview: '(…)', expandable: true }
                        : { segment: key, key, ...describeValue(descriptor ? descriptor.value : value[key]) });
                } catch (e) {
                    entries.push({ segment: key, key, type: 'unreadable', preview: e.message, expandable: false });
                }
            });
            if (names.length > MAX_ENTRIES) {
                entries.push({ key: '…', type: '', preview: `${names.length - MAX_ENTRIES} more`, expandable: false });
            }
            const type = getType(value);
            if (type === 'Map' || type === 'Set') {
                entries.push({ segment: { entries: true }, key: '[[Entries]]', type: 'array', preview: `Array(${value.size})`, size: value.size, expandable: true });
            }
            const proto = Object.getPrototypeOf(value);
            if (proto !== null) {
                const protoName = getPrototypeName(proto);
                entries.push({ segment: { proto: true }, key: '[[Prototype]]', ...describeValue(proto), protoName, protoChanged: isPrototypeChanged(value, protoName) });
            }
            return entries;
        }

        // what index.js can ask through handle()
        const requests = {
            // the value at path (a long string shows whole), and one level of what's inside
            describe(targetWindow, { path }) {
                const { value } = resolve(targetWindow, path);
                return { ...describeValue(value, 5000), entries: listEntries(value) };
            },
            // what the run panel shows before running: the parameters and the source
            function(targetWindow, { path }) {
                const { value } = resolve(targetWindow, path);
                if (typeof value !== 'function') {
                    return { error: `${getType(value)}, not a function` };
                }
                let source = '';
                try {
                    source = Function.prototype.toString.call(value);
                } catch (e) { }
                return { name: value.name || 'anonymous', params: getParameterNames(value), source: source.length > 2000 ? `${source.slice(0, 2000)}\n…` : source };
            },
            // call the function at path on the object it belongs to, and keep what it returns (awaited when it's a
            // promise) so the inspector can open it as [{ result: resultId }]
            async call(targetWindow, { path, args }) {
                const { value: fn, owner } = resolve(targetWindow, path);
                if (typeof fn !== 'function') {
                    return { error: `${getType(fn)}, not a function` };
                }
                try {
                    let value = fn.apply(owner, args);
                    const awaited = value !== null && typeof value === 'object' && typeof value.then === 'function';
                    if (awaited) {
                        value = await value;
                    }
                    results.push(value);
                    return { resultId: results.length - 1, awaited, ...describeValue(value, 5000) };
                } catch (e) {
                    return { error: e instanceof Error ? `${e.name}: ${e.message}` : `Thrown: ${String(e)}` };
                }
            },
            // the inspector's editor: give the property at path a new value, on the object it was read from (through
            // its setter, if it has one), and answer with what reading it gives now
            set(targetWindow, { path, value }) {
                const key = path[path.length - 1];
                if (typeof key !== 'string') {
                    return { error: 'Only a property can be changed' };
                }
                const { owner } = resolve(targetWindow, path);
                if (!Reflect.set(owner, key, value)) {
                    return { error: `${key} is read-only` };
                }
                return describeValue(Reflect.get(owner, key), 5000);
            },
            // the frameworks the page uses: detect/detect.js and the detectors, added when Frameworks opens
            frameworks(targetWindow) {
                const frameworks = window[Symbol.for('dosson')].frameworks;
                return frameworks ? frameworks.run(targetWindow) : { error: "Dosson's detectors (detect/) didn't load on this page" };
            },
            // Security → Secrets on test.html: this window and the frames it can reach (security/secrets.js, added
            // when Security opens). background.js scans each frame itself
            secrets(targetWindow) {
                const secrets = window[Symbol.for('dosson')].secrets;
                return secrets ? secrets.scanAll(targetWindow, getCleanProperties()) : { error: "Dosson's scanner (security/secrets.js) didn't load on this page" };
            },
            // a secret's whole value, kept by the scan that found it in this frame (on test.html, the top page's scan
            // of every frame)
            secretValue(targetWindow, { id }) {
                const secrets = window[Symbol.for('dosson')].secrets;
                return secrets ? secrets.reveal(id) : { error: "Dosson's scanner (security/secrets.js) isn't on this page" };
            }
        };

        // answers a request ({ type, path, args }); background.js calls it directly in other frames
        async function handle(targetWindow, request) {
            try {
                return await requests[request.type](targetWindow, request);
            } catch (e) {
                return { error: `${e.name}: ${e.message}` };
            }
        }

        // like dossonGetWindowChanges, on window or on a same-origin <iframe>. Each request carries an id, since the
        // answer can come later (a function returning a promise)
        window.addEventListener('dossonRequest', function (e) {
            const target = requestTarget(e);
            const { id, request } = e.detail;
            const targetWindow = target.tagName !== 'IFRAME' ? window : target.contentDocument ? target.contentWindow : null;
            const response = targetWindow ? handle(targetWindow, request) : Promise.resolve({ error: 'cross-origin' });
            response.then(response => target.dispatchEvent(new CustomEvent('dossonResponse', { detail: { id, response } })));
        })

        return { detectChanges, getCleanProperties, handle };
    })();
    // index.js may have asked before this script loaded (see readPageWindow)
    window.dispatchEvent(new CustomEvent('dossonMainThreadReady'));
}


==============================================================================
frames.js  (80 lines)
==============================================================================

// Finds a document's iframes and describes them. Used by index.js for the top page, and by background.js inside
// any frame (through chrome.scripting). Function declarations only: background.js can run this file twice in the
// same frame, and a second top-level const or class would throw.

// iframes in open shadow roots count too
function collectIframes(root, iframes = []) {
    root.querySelectorAll('*').forEach(element => {
        if (element.tagName === 'IFRAME') {
            iframes.push(element);
        }
        if (element.shadowRoot) {
            collectIframes(element.shadowRoot, iframes);
        }
    });
    return iframes;
}

// sandbox and srcdoc win over src, as they do in the browser
function getIframeKind(iframe) {
    if (iframe.hasAttribute('sandbox') && !iframe.sandbox.contains('allow-same-origin')) {
        return 'sandbox';
    }
    if (iframe.hasAttribute('srcdoc')) {
        return 'srcdoc';
    }
    let url;
    try {
        url = new URL(iframe.src);
    } catch (e) {
        return 'blank';
    }
    switch (url.protocol) {
        case 'http:':
        case 'https:':
            return url.origin === location.origin ? 'same' : 'cross';
        case 'about:':
        case 'javascript:':
            return 'blank';
        case 'data:':
            return 'data';
        case 'blob:':
            return 'blob';
        case 'chrome-extension:':
            return 'ext';
        default:
            return 'cross';
    }
}

// the iframe's position in its window's frames (window[0]…). Every frame can work out its own positions up to the
// top window, even across origins, which is how background.js finds the frame. -1 for iframes in shadow roots,
// which window.frames leaves out
function getFrameIndex(iframe) {
    const owner = iframe.ownerDocument.defaultView;
    for (let i = 0; i < owner.length; i++) {
        if (owner[i] === iframe.contentWindow) {
            return i;
        }
    }
    return -1;
}

// plain data, so chrome.scripting can send it back from another frame
function describeIframe(iframe) {
    let host = '';
    try {
        host = new URL(iframe.src).hostname;
    } catch (e) { }
    const { width, height } = iframe.getBoundingClientRect();
    return {
        kind: getIframeKind(iframe),
        host,
        src: iframe.src,
        id: iframe.id,
        title: iframe.title,
        width: Math.round(width),
        height: Math.round(height),
        index: getFrameIndex(iframe)
    };
}


==============================================================================
perf.js  (26 lines)
==============================================================================

// Content script run at document_start, before the page's first request. Chrome keeps only 250 resource timings
// for performance.getEntriesByType (a busy page loads more before index.js runs at document_idle, and a page may
// clear them), but a PerformanceObserver gets every entry: Performance → Network reads them from here.
// Only function declarations, like frames.js
function dossonWatchResources() {
    if (globalThis[Symbol.for('dosson')]?.resources) {
        return;
    }
    // an app open for hours can make a request every second: keep the first 50,000, count the rest
    const resources = (globalThis[Symbol.for('dosson')] ??= {}).resources = { entries: [], dropped: 0, max: 50000 };
    try {
        new PerformanceObserver(list => {
            list.getEntries().forEach(entry => {
                if (resources.entries.length < resources.max) {
                    resources.entries.push(entry);
                } else {
                    resources.dropped++;
                }
            });
        }).observe({ type: 'resource', buffered: true });
    } catch (e) {
        // no PerformanceObserver: index.js falls back to performance.getEntriesByType
        delete globalThis[Symbol.for('dosson')].resources;
    }
}
dossonWatchResources();


==============================================================================
disableClear.js  (1 lines)
==============================================================================

console.clear = () => {};


==============================================================================
security/secrets.js  (550 lines)
==============================================================================

// Security → Secrets: looks for credentials a page leaves where any script can read them. Runs in a frame's main
// world, after mainThread.js: background.js runs it in every frame with chrome.scripting, test.html adds it with a
// <script>. Running it again in the same frame does nothing.
//
// What it reads: the globals the page added to window (the same list as Inspect → Variables), walked into objects,
// arrays, Maps and Sets, plus localStorage, sessionStorage and the cookies scripts can read. Only data properties:
// getters never run. JSON strings are parsed and walked too.
//
// How it decides, like secret scanners (Gitleaks, TruffleHog, GitHub secret scanning) do:
// - a provider's own format (AWS AKIA…, GitHub ghp_…, OpenAI sk-proj-…): the rules below, adapted from Gitleaks'
//   (MIT, https://github.com/gitleaks/gitleaks/blob/master/config/gitleaks.toml)
// - a structure: a PEM private key, a GCP service account, a database URL with a password
// - a name that says secret (password, clientSecret, apiKey…) holding a value that looks like one: long enough, no
//   spaces, random enough (Shannon entropy), not a placeholder
// Findings carry a redacted preview. The whole value stays in the frame, kept by the finding's id, until the user asks
// for it (Enter on the finding's value: reveal)
if (!window[Symbol.for('dosson')]?.secrets) {
    (window[Symbol.for('dosson')] ??= {}).secrets = (function () {
        // a page's top-level const { Map } = Immutable would hide the global names from this script
        const { Object, Array, Map, Set, WeakSet, JSON, Math, Date, String, Number, Reflect } = window;

        const LIMITS = { depth: 12, nodes: 60000, keys: 2000, string: 100000, json: 500000, ms: 1500 };

        // high: a credential nobody should ship to a browser. medium: probably one, or one of limited reach.
        // low: worth a look, often fine (a JWT the user logged in with, a Google API key restricted to the site)
        const RULES = [
            { id: 'private-key', label: 'Private key', severity: 'high', re: /-----BEGIN[ A-Z0-9_-]{0,100}PRIVATE KEY(?: BLOCK)?-----/, why: 'A PEM private key: whoever reads it can sign or decrypt as its owner' },
            { id: 'aws-access-key', label: 'AWS access key ID', severity: 'high', re: /\b(?:A3T[A-Z0-9]|AKIA|ASIA|ABIA|ACCA)[A-Z2-7]{16}\b/, why: 'An AWS access key ID. With its secret key next to it, it opens the AWS account' },
            { id: 'github-token', label: 'GitHub token', severity: 'high', re: /\b(?:ghp|gho|ghu|ghs|ghr)_[A-Za-z0-9]{36}\b|\bgithub_pat_[A-Za-z0-9_]{82}\b/, why: 'A GitHub personal, OAuth, app or refresh token' },
            { id: 'gitlab-token', label: 'GitLab token', severity: 'high', re: /\bgl(?:pat|dt|ptt|rt|oas)-[A-Za-z0-9_-]{20,}\b/, why: 'A GitLab personal, deploy, trigger or runner token' },
            { id: 'openai-key', label: 'OpenAI API key', severity: 'high', re: /\bsk-(?:proj|svcacct|admin)-[A-Za-z0-9_-]{20,}|\bsk-[A-Za-z0-9]{20}T3BlbkFJ[A-Za-z0-9]{20}\b/, why: 'An OpenAI API key: anyone can run (and bill) requests with it' },
            { id: 'anthropic-key', label: 'Anthropic API key', severity: 'high', re: /\bsk-ant-(?:api03|admin01)-[A-Za-z0-9_-]{80,}/, why: 'An Anthropic API key: anyone can run (and bill) requests with it' },
            { id: 'stripe-live-key', label: 'Stripe secret key', severity: 'high', re: /\b[rs]k_live_[A-Za-z0-9]{20,}\b/, why: 'A live Stripe secret or restricted key: it can charge, refund and read customers. Only pk_ keys belong in a browser' },
            { id: 'stripe-test-key', label: 'Stripe test secret key', severity: 'medium', re: /\b[rs]k_test_[A-Za-z0-9]{20,}\b/, why: 'A Stripe test-mode secret key: no real money, but it shows secret keys reach the browser' },
            { id: 'slack-token', label: 'Slack token', severity: 'high', re: /\bxox[abeoprs]-(?:\d+-)?[A-Za-z0-9-]{10,}\b/, why: 'A Slack bot, user or app token' },
            { id: 'slack-webhook', label: 'Slack webhook', severity: 'high', re: /https:\/\/hooks\.slack\.com\/(?:services|workflows|triggers)\/[A-Za-z0-9+/]{20,}/, why: 'A Slack incoming webhook: anyone can post to that channel' },
            { id: 'discord-webhook', label: 'Discord webhook', severity: 'high', re: /https:\/\/(?:ptb\.|canary\.)?discord(?:app)?\.com\/api\/webhooks\/\d+\/[\w-]{60,}/, why: 'A Discord webhook: anyone can post to that channel' },
            { id: 'gcp-oauth-secret', label: 'Google OAuth client secret', severity: 'high', re: /\bGOCSPX-[\w-]{28}\b/, why: 'A Google OAuth client secret, meant for servers only' },
            { id: 'npm-token', label: 'npm token', severity: 'high', re: /\bnpm_[A-Za-z0-9]{36}\b/, why: 'An npm access token: it can publish packages' },
            { id: 'pypi-token', label: 'PyPI token', severity: 'high', re: /\bpypi-AgEIcHlwaS5vcmc[\w-]{50,}/, why: 'A PyPI upload token' },
            { id: 'sendgrid-key', label: 'SendGrid API key', severity: 'high', re: /\bSG\.[\w-]{22}\.[\w-]{43}\b/, why: 'A SendGrid API key: anyone can send mail as this sender' },
            { id: 'mailchimp-key', label: 'Mailchimp API key', severity: 'high', re: /\b[0-9a-f]{32}-us\d{1,2}\b/, why: 'A Mailchimp API key' },
            { id: 'mailgun-key', label: 'Mailgun API key', severity: 'medium', re: /\bkey-[0-9a-z]{32}\b/, why: 'Looks like a Mailgun private API key' },
            { id: 'twilio-key', label: 'Twilio API key', severity: 'medium', re: /\bSK[0-9a-fA-F]{32}\b/, why: 'Looks like a Twilio API key SID; dangerous with its secret' },
            { id: 'shopify-token', label: 'Shopify token', severity: 'high', re: /\bshp(?:at|ca|pa|ss)_[a-fA-F0-9]{32}\b/, why: 'A Shopify access token or shared secret' },
            { id: 'huggingface-token', label: 'Hugging Face token', severity: 'high', re: /\bhf_[A-Za-z]{34}\b/, why: 'A Hugging Face access token' },
            { id: 'telegram-bot-token', label: 'Telegram bot token', severity: 'high', re: /\b\d{8,10}:AA[\w-]{33}\b/, why: 'A Telegram bot token: it controls the bot' },
            { id: 'mapbox-secret', label: 'Mapbox secret token', severity: 'high', re: /\bsk\.eyJ[\w-]+\.[\w-]+/, why: 'A Mapbox secret token (sk.). Only pk. tokens belong in a browser' },
            { id: 'square-secret', label: 'Square secret', severity: 'high', re: /\bsq0csp-[\w-]{43}\b|\bEAAA[\w-]{60}\b/, why: 'A Square OAuth secret or access token' },
            { id: 'azure-storage-key', label: 'Azure storage key', severity: 'high', re: /AccountKey=[A-Za-z0-9+/]{86}==/, why: 'An Azure storage account key, in a connection string' },
            { id: 'database-url', label: 'Database URL with password', severity: 'high', re: /\b(?:postgres(?:ql)?|mysql|mariadb|mongodb(?:\+srv)?|rediss?|amqps?|mssql|sqlserver|cockroachdb):\/\/[^\s:@/]+:([^\s@/]+)@[^\s/]+/i, group: 1, why: 'A database connection string with its password' },
            { id: 'url-credentials', label: 'URL with password', severity: 'medium', re: /\b(?:https?|ftp):\/\/[^\s:@/]+:([^\s@/]+)@[^\s/]+/i, group: 1, why: 'A URL with a user name and password in it' },
            { id: 'google-api-key', label: 'Google API key', severity: 'low', re: /\bAIza[\w-]{35}\b/, why: 'A Google API key. Often meant for the browser (Maps, Firebase): fine only if Google Cloud restricts it to this site and to the APIs it needs' }
        ];

        // split camelCase, snake_case, kebab-case… into lowercase words
        function words(name) {
            return String(name).replace(/([a-z0-9])([A-Z])/g, '$1 $2').replace(/([A-Z]+)([A-Z][a-z])/g, '$1 $2').toLowerCase().split(/[^a-z0-9]+/).filter(Boolean);
        }

        const STRONG_WORDS = ['password', 'passwd', 'pwd', 'passphrase', 'secret', 'secrets'];
        const WEAK_WORDS = ['token', 'tokens', 'apikey', 'credential', 'credentials', 'creds', 'auth', 'authorization', 'bearer', 'jwt'];
        const STRONG_PAIRS = ['private key', 'client secret', 'secret key', 'signing key', 'encryption key', 'master key', 'service key', 'access secret'];
        // not session id: a player's or an ad's session ids are everywhere, and say nothing about the user's login
        const WEAK_PAIRS = ['api key', 'access key', 'session key', 'session token', 'auth key', 'app key', 'license key'];
        // what a name is about, not what it holds: tokenType, passwordPolicy, authDomain, apiKeyHeader…
        const NOT_A_VALUE = ['url', 'uri', 'urls', 'endpoint', 'domain', 'host', 'length', 'type', 'types', 'expiry', 'expires', 'expiration', 'exp', 'ttl', 'policy', 'required', 'enabled', 'disabled', 'label', 'placeholder', 'field', 'fields', 'name', 'header', 'headers', 'path', 'count', 'min', 'max', 'regex', 'pattern', 'prefix', 'hint', 'visible', 'strength', 'mode', 'timeout', 'error', 'errors', 'message', 'storage', 'param', 'key', 'keys', 'status', 'state', 'version', 'format', 'rules', 'reset', 'changed', 'at', 'date', 'time', 'location', 'provider', 'method', 'scope', 'scopes'];
        // made for the browser
        const PUBLIC_WORDS = ['csrf', 'xsrf', 'public', 'publishable', 'pk', 'recaptcha', 'captcha', 'site', 'nonce', 'anon', 'hash', 'checksum', 'integrity'];

        // 'strong', 'weak' or null: how much the name says secret
        function nameSignal(name) {
            const list = words(name);
            if (!list.length || PUBLIC_WORDS.some(word => list.includes(word)) || /^(?:is|has|show|use|should|can|on|get|set)$/.test(list[0])) {
                return null;
            }
            if (NOT_A_VALUE.includes(list[list.length - 1]) && list.length > 1) {
                const last = list[list.length - 1];
                // apiKey, privateKey, accessKey end with key, and are what this is looking for
                if (last !== 'key' || !['api', 'private', 'access', 'secret', 'signing', 'encryption', 'master', 'service', 'auth', 'app', 'license', 'session'].includes(list[list.length - 2])) {
                    return null;
                }
            }
            const pairs = list.slice(1).map((word, i) => `${list[i]} ${word}`);
            if (list.some(word => STRONG_WORDS.includes(word)) || pairs.some(pair => STRONG_PAIRS.includes(pair))) {
                return 'strong';
            }
            if (list.some(word => WEAK_WORDS.includes(word)) || pairs.some(pair => WEAK_PAIRS.includes(pair))) {
                return 'weak';
            }
            return null;
        }

        const PLACEHOLDER = /^(?:x+|\*+|•+|\.+|-+|_+|#+|0+|1234\w*|abc\w*|changeme|change[_-]?me|password\d*|passw0rd|secret|token|null|undefined|true|false|none|nil|test\w*|example\w*|sample\w*|dummy\w*|fake\w*|placeholder|redacted|hidden|todo|tbd|admin|demo|default|empty|n\/a|\[.*\]|<.*>|\{\{.*\}\}|\$\{.*\}|%.*%|__\w+__)$/i;
        const PLACEHOLDER_PART = /your[_-]?|example|placeholder|xxxx|\*\*\*\*|changeme|insert[_-]?|replace[_-]?me|dummy|<[^>]+>|\{\{|\$\{/i;

        // bits per character
        function entropy(text) {
            const counts = new Map();
            for (const char of text) {
                counts.set(char, (counts.get(char) || 0) + 1);
            }
            let bits = 0;
            counts.forEach(count => {
                const p = count / text.length;
                bits -= p * Math.log2(p);
            });
            return bits;
        }

        // does a value under a secret-sounding name look like a secret, rather than a word, a flag or a sentence?
        function looksSecret(value) {
            const text = value.trim();
            if (text.length < 8 || text.length > 1000 || /\s/.test(text) || PLACEHOLDER.test(text) || PLACEHOLDER_PART.test(text)) {
                return false;
            }
            // a path, an address, a CSS selector, an identifier (authToken, access_token)
            // client tokens made for browsers: Datadog RUM's pub…
            if (/^pub[0-9a-f]{32}$/.test(text)) {
                return false;
            }
            if (/^(?:https?:|\/|\.\/|#|mailto:)/i.test(text) || /^[a-z]+(?:[A-Z][a-z]+)*$/.test(text) || /^[a-z]+(?:[_.-][a-z]+)*$/i.test(text)) {
                return false;
            }
            const classes = [/[a-z]/, /[A-Z]/, /\d/, /[^A-Za-z0-9]/].filter(re => re.test(text)).length;
            if (text.length < 16) {
                return classes >= 3;
            }
            return classes >= 2 && entropy(text) >= 3.2;
        }

        // the first few and last few characters, the rest as dots: enough to recognize a key, not to use it
        function redact(value) {
            const text = value.trim();
            const pem = text.match(/-----BEGIN[ A-Z0-9_-]{0,100}-----/);
            if (pem) {
                return `${pem[0]}…(${text.length} characters)`;
            }
            if (text.length <= 8) {
                return '•'.repeat(text.length);
            }
            const keep = text.length >= 24 ? 4 : 2;
            const prefix = text.match(/^(?:[a-z]{2,6}[-_.](?:[a-z0-9]{2,8}[-_])?)/i)?.[0] || '';
            const start = prefix.length > keep && prefix.length <= 12 && text.length - prefix.length > 12 ? prefix : text.slice(0, keep);
            return `${start}${'•'.repeat(Math.min(12, text.length - start.length - keep))}${text.slice(-keep)} (${text.length} characters)`;
        }

        // a 53-bit hash of the value (cyrb53): index.js merges findings of the same value in different frames
        // without the value leaving the frame
        function fingerprint(value) {
            let h1 = 0xdeadbeef, h2 = 0x41c6ce57;
            for (let i = 0; i < value.length; i++) {
                const ch = value.charCodeAt(i);
                h1 = Math.imul(h1 ^ ch, 2654435761);
                h2 = Math.imul(h2 ^ ch, 1597334677);
            }
            h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
            h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
            return (4294967296 * (2097151 & h2) + (h1 >>> 0)).toString(36);
        }

        function base64UrlDecode(part) {
            const base64 = part.replace(/-/g, '+').replace(/_/g, '/');
            return atob(base64 + '='.repeat((4 - base64.length % 4) % 4));
        }

        // a JWT's claims, or null
        function decodeJwt(text) {
            const match = text.match(/\beyJ[\w-]{8,}\.eyJ[\w-]{8,}\.[\w-]*/);
            if (!match) {
                return null;
            }
            try {
                const claims = JSON.parse(base64UrlDecode(match[0].split('.')[1]));
                return claims && typeof claims === 'object' ? { token: match[0], claims } : null;
            } catch (e) {
                return null;
            }
        }

        function describeJwt(claims) {
            const parts = [];
            ['iss', 'sub', 'aud', 'role', 'scope'].forEach(claim => {
                if (claims[claim] !== undefined && typeof claims[claim] !== 'object') {
                    parts.push(`${claim} ${String(claims[claim]).slice(0, 60)}`);
                }
            });
            if (typeof claims.exp === 'number') {
                const expired = claims.exp * 1000 < Date.now();
                parts.push(`${expired ? 'expired' : 'expires'} ${new Date(claims.exp * 1000).toISOString().slice(0, 16).replace('T', ' ')}`);
            }
            return parts.join(', ');
        }

        // a cookie's name says it's a session (or a token standing for the user)
        const SESSION_COOKIE = /sess|^sid$|^_?s_?id$|auth|token|jwt|^remember|login|^user_?id$/i;

        // the frame's position at each level from the top window, like getFramePath in background.js
        function getFramePath(targetWindow) {
            const path = [];
            try {
                for (let frame = targetWindow; frame !== frame.parent; frame = frame.parent) {
                    let i = 0;
                    while (i < frame.parent.length && frame.parent[i] !== frame) {
                        i++;
                    }
                    path.unshift(i < frame.parent.length ? i : -1);
                }
            } catch (e) { }
            return path;
        }

        // a.b[0]["x-y"], for people
        function appendDisplay(display, segment) {
            if (typeof segment === 'number') {
                return `${display}[${segment}]`;
            }
            return /^[A-Za-z_$][\w$]*$/.test(segment) ? `${display}${display ? '.' : ''}${segment}` : `${display}[${JSON.stringify(segment)}]`;
        }

        // the values found, by finding id, for reveal. A new scan replaces them (scanAll keeps every frame's)
        let values = new Map();
        let nextId = 0;
        let keepValues = false;

        // the whole value of a finding of the last scan: { value } or { error }
        function reveal(id) {
            return values.has(id) ? { value: values.get(id) } : { error: 'Not found: open Security again to scan the page again' };
        }

        // one scan of one window: { findings, stats }. cleanProps lists a fresh window's globals (see mainThread.js)
        function scan(targetWindow, cleanProps) {
            if (!keepValues) {
                values = new Map();
            }
            const started = Date.now();
            const seen = new WeakSet();
            const found = new Map();
            const stats = { globals: 0, objects: 0, strings: 0, storage: 0, cookies: 0, truncated: '' };

            function stop(reason) {
                if (!stats.truncated) {
                    stats.truncated = reason;
                }
                return true;
            }

            function overBudget() {
                if (stats.objects > LIMITS.nodes) {
                    return stop(`stopped after ${LIMITS.nodes} objects`);
                }
                if (Date.now() - started > LIMITS.ms) {
                    return stop(`stopped after ${LIMITS.ms} ms`);
                }
                return false;
            }

            // ctx: { where, display, inspect (a mainThread.js path, or null once it can't lead here), container (the path of
            // the JSON string it came from), name }
            function report(ctx, rule, value, extra = {}) {
                const key = `${rule.id}\u0000${value}`;
                const existing = found.get(key);
                if (existing) {
                    existing.alsoAt++;
                    return;
                }
                const id = ++nextId;
                values.set(id, value);
                found.set(key, {
                    id,
                    rule: rule.id,
                    label: rule.label,
                    severity: rule.severity,
                    why: rule.why,
                    where: ctx.where,
                    display: ctx.display,
                    // inside a JSON string: the inspector opens the string
                    inspect: ctx.inspect || ctx.container || null,
                    preview: redact(value),
                    length: value.length,
                    fingerprint: fingerprint(value),
                    alsoAt: 0,
                    ...extra
                });
            }

            function checkString(value, ctx, depth) {
                stats.strings++;
                // config kept as JSON (often in storage): what's inside is checked, each value under its own name
                const trimmed = value.trim();
                if ((trimmed[0] === '{' || trimmed[0] === '[') && trimmed.length <= LIMITS.json) {
                    let parsed;
                    try {
                        parsed = JSON.parse(trimmed);
                    } catch (e) { }
                    if (parsed && typeof parsed === 'object') {
                        walk(parsed, { ...ctx, display: `${ctx.display} (JSON)`, inspect: null, container: ctx.inspect || ctx.container }, depth + 1);
                        return;
                    }
                }
                const text = value.length > LIMITS.string ? value.slice(0, LIMITS.string) : value;
                let matched = false;
                RULES.forEach(rule => {
                    const match = rule.re.exec(text);
                    if (!match) {
                        return;
                    }
                    // a URL's password must look like one: postgres://user:${PASSWORD}@ is a template
                    if (rule.group && (PLACEHOLDER.test(match[rule.group]) || PLACEHOLDER_PART.test(match[rule.group]))) {
                        return;
                    }
                    matched = true;
                    report(ctx, rule, match[0]);
                });
                const jwt = decodeJwt(text);
                if (jwt) {
                    matched = true;
                    if (jwt.claims.role === 'service_role') {
                        report(ctx, { id: 'supabase-service-role', label: 'Supabase service-role key', severity: 'high', why: 'A Supabase service_role key: it bypasses row-level security. Only the anon key belongs in a browser' }, jwt.token);
                    } else if (jwt.claims.role !== 'anon') {
                        report(ctx, { id: 'jwt', label: 'JWT', severity: 'low', why: `A JSON Web Token (${describeJwt(jwt.claims) || 'no claims Dosson reads'}). Often the user's own login, but any script on the page can read and replay it` }, jwt.token);
                    }
                }
                if (!matched && ctx.name !== undefined) {
                    const signal = nameSignal(ctx.name);
                    if (signal && looksSecret(text)) {
                        matched = true;
                        report(ctx, signal === 'strong'
                            ? { id: 'generic-secret', label: 'Secret', severity: 'high', why: `Named ${JSON.stringify(String(ctx.name))} and looks random: a password or secret key in the page` }
                            : { id: 'generic-token', label: 'Token or API key', severity: 'medium', why: `Named ${JSON.stringify(String(ctx.name))} and looks random: an API key or token any script on the page can read` }, text.trim());
                    }
                }
                // service accounts pasted as base64
                if (!matched && trimmed.length >= 100 && trimmed.length <= LIMITS.json && /^[A-Za-z0-9+/=_-]+$/.test(trimmed)) {
                    try {
                        const decoded = base64UrlDecode(trimmed.replace(/=+$/, ''));
                        if (/PRIVATE KEY-----|"service_account"/.test(decoded)) {
                            report(ctx, { id: 'encoded-private-key', label: 'Encoded private key', severity: 'high', why: 'Base64 that decodes to a private key or a GCP service account' }, trimmed);
                        }
                    } catch (e) { }
                }
            }

            // a host object (a node, a window, a style…) is the browser's, not the page's data
            function shouldWalk(value) {
                const tag = Object.prototype.toString.call(value).slice(8, -1);
                return tag === 'Object' || tag === 'Array' || tag === 'Map' || tag === 'Set' || tag === 'Arguments' || tag === 'Module';
            }

            function walk(value, ctx, depth) {
                if (typeof value === 'string') {
                    checkString(value, ctx, depth);
                    return;
                }
                if (value === null || typeof value !== 'object' || depth > LIMITS.depth || overBudget()) {
                    return;
                }
                if (seen.has(value)) {
                    return;
                }
                seen.add(value);
                try {
                    if (!shouldWalk(value)) {
                        return;
                    }
                } catch (e) {
                    return;
                }
                stats.objects++;
                try {
                    // GCP service account: { type: 'service_account', private_key, client_email… }
                    const type = Object.getOwnPropertyDescriptor(value, 'type')?.value;
                    const privateKey = Object.getOwnPropertyDescriptor(value, 'private_key')?.value;
                    if (type === 'service_account' && typeof privateKey === 'string') {
                        report(ctx, { id: 'gcp-service-account', label: 'GCP service account', severity: 'high', why: 'A Google Cloud service account with its private key: it acts as that account on Google Cloud' }, privateKey);
                    }
                } catch (e) { }
                if (value instanceof Map || value instanceof Set) {
                    walkEntries(value, ctx, depth);
                    return;
                }
                let names;
                try {
                    names = Object.getOwnPropertyNames(value);
                } catch (e) {
                    return;
                }
                if (names.length > LIMITS.keys) {
                    stop(`objects cut at ${LIMITS.keys} properties`);
                    names = names.slice(0, LIMITS.keys);
                }
                const isArray = Array.isArray(value);
                for (const name of names) {
                    if (isArray && name === 'length') {
                        continue;
                    }
                    let descriptor;
                    try {
                        descriptor = Object.getOwnPropertyDescriptor(value, name);
                    } catch (e) {
                        continue;
                    }
                    // a getter can have side effects: leave it alone
                    if (!descriptor || !('value' in descriptor)) {
                        continue;
                    }
                    const segment = isArray && /^\d+$/.test(name) ? Number(name) : name;
                    walk(descriptor.value, {
                        where: ctx.where,
                        display: appendDisplay(ctx.display, segment),
                        inspect: ctx.inspect && [...ctx.inspect, name],
                        container: ctx.container,
                        // an array's items go by the array's name: { tokens: ['…'] }
                        name: isArray ? ctx.name : name
                    }, depth + 1);
                }
            }

            function walkEntries(collection, ctx, depth) {
                let i = 0;
                try {
                    for (const entry of collection) {
                        if (i >= LIMITS.keys) {
                            stop(`Maps and Sets cut at ${LIMITS.keys} entries`);
                            break;
                        }
                        const [key, value] = collection instanceof Map ? entry : [undefined, entry];
                        const label = collection instanceof Map ? `.get(${typeof key === 'string' ? JSON.stringify(key) : String(typeof key)})` : `[[Set ${i}]]`;
                        const display = `${ctx.display}${label}`;
                        // mainThread.js: [[Entries]] is Array.from(collection), an entry of a Map is [key, value]
                        const inspect = ctx.inspect && (collection instanceof Map ? [...ctx.inspect, { entries: true }, String(i), '1'] : [...ctx.inspect, { entries: true }, String(i)]);
                        walk(value, { where: ctx.where, display, inspect, container: ctx.container, name: typeof key === 'string' ? key : ctx.name }, depth + 1);
                        i++;
                    }
                } catch (e) { }
            }

            // the page's globals: the names a fresh window doesn't have, read as data properties
            function readGlobals() {
                const clean = new Set(cleanProps || []);
                const names = new Set();
                for (let object = targetWindow; object && object !== Object.prototype; object = Object.getPrototypeOf(object)) {
                    Object.getOwnPropertyNames(object).forEach(name => names.add(name));
                }
                names.forEach(name => {
                    if (clean.has(name) || /^\d+$/.test(name)) {
                        return;
                    }
                    let descriptor;
                    for (let object = targetWindow; object && !descriptor; object = Object.getPrototypeOf(object)) {
                        try {
                            descriptor = Object.getOwnPropertyDescriptor(object, name);
                        } catch (e) {
                            return;
                        }
                    }
                    if (!descriptor || !('value' in descriptor) || descriptor.value === targetWindow) {
                        return;
                    }
                    stats.globals++;
                    walk(descriptor.value, { where: 'window', display: name, inspect: [name], name }, 0);
                });
            }

            function readStorage(where) {
                let storage;
                try {
                    storage = targetWindow[where];
                    if (!storage) {
                        return;
                    }
                    for (let i = 0; i < storage.length && !overBudget(); i++) {
                        const key = storage.key(i);
                        stats.storage++;
                        walk(storage.getItem(key) || '', { where, display: `${where}[${JSON.stringify(key)}]`, inspect: null, name: key }, 0);
                    }
                } catch (e) {
                    // storage is blocked (third-party frame, sandbox, cookies disabled)
                }
            }

            // only what scripts can read: an HttpOnly cookie never shows in document.cookie, which is the point
            function readCookies() {
                let cookies = '';
                try {
                    cookies = targetWindow.document.cookie;
                } catch (e) {
                    return;
                }
                cookies.split(/;\s*/).filter(Boolean).forEach(pair => {
                    const at = pair.indexOf('=');
                    const name = at < 0 ? '' : pair.slice(0, at);
                    let value = at < 0 ? pair : pair.slice(at + 1);
                    try {
                        value = decodeURIComponent(value);
                    } catch (e) { }
                    stats.cookies++;
                    const ctx = { where: 'cookie', display: `document.cookie ${name}`, inspect: null, name };
                    // a session cookie is a finding of its own, whatever its value looks like (a JWT, a random id)
                    if (SESSION_COOKIE.test(name) && !/csrf|xsrf/i.test(name) && value.length >= 16 && (looksSecret(value) || decodeJwt(value))) {
                        report(ctx, { id: 'session-cookie', label: 'Session cookie readable', severity: 'medium', why: `Cookie ${JSON.stringify(name)} looks like a session, and isn't HttpOnly: any script on the page (an XSS) can read it and act as the user` }, value);
                    } else {
                        walk(value, ctx, 0);
                    }
                });
            }

            try {
                readGlobals();
            } catch (e) {
                stop(`globals: ${e.message}`);
            }
            readStorage('localStorage');
            readStorage('sessionStorage');
            readCookies();
            stats.ms = Date.now() - started;
            const order = { high: 0, medium: 1, low: 2 };
            const findings = [...found.values()].sort((a, b) => order[a.severity] - order[b.severity] || a.label.localeCompare(b.label));
            let href = '';
            try {
                href = targetWindow.location.href;
            } catch (e) { }
            return { path: getFramePath(targetWindow), href, findings, stats };
        }

        // test.html: the window and every frame it can reach (same origin), depth first
        function scanAll(targetWindow, cleanProps) {
            const frames = [];
            const visit = (frameWindow) => {
                frames.push(scan(frameWindow, cleanProps));
                for (let i = 0; i < frameWindow.length; i++) {
                    try {
                        frameWindow[i].document;
                        visit(frameWindow[i]);
                    } catch (e) { }
                }
            };
            values = new Map();
            keepValues = true;
            try {
                visit(targetWindow);
            } finally {
                keepValues = false;
            }
            return { frames };
        }

        return { scan, scanAll, reveal, nameSignal, looksSecret, redact };
    })();
}


==============================================================================
detect/detect.js  (257 lines)
==============================================================================

// Framework detection, in the page's main world: that's where the page's globals (window.React…) and what frameworks
// hang on DOM nodes (__reactFiber$…, __vue_app__…) live. Runs after mainThread.js, and only when Frameworks opens.
// Each file in detect/js and detect/css (listed in detect/detectors.json) registers one detector with add().
// Running this file or a detector again does nothing new: detectors are kept by id
if (window[Symbol.for('dosson')]?.main && !window[Symbol.for('dosson')].frameworks) {
    window[Symbol.for('dosson')].frameworks = (function () {
        // the built-ins from window: a page's top-level `const { Map } = Immutable` hides the global names from every
        // script, but not the window properties
        const { Map, Set, URL, RegExp, Array, Object } = window;
        // id -> { id, name, kind: 'js' | 'css', href, npm?, github?, detect(ctx) }. npm (the package) and github
        // ('owner/repo') are where Frameworks reads the releases. detect returns null when the framework isn't
        // there, else { version, evidence }: version may be exact ("18.3.1"), a range ("18.x") or missing
        const detectors = new Map();
        // the DOM scan stops there, so a huge page doesn't freeze
        const MAX_ELEMENTS = 10000;
        // the start of an inline <style>, where banners like "Bootstrap v5.3.2" are
        const BANNER_LENGTH = 2000;
        // Dosson's own detector files, when this one was loaded as a <script> (test.html, the site's demo): its folder.
        // The extension runs them through chrome.scripting, without a URL. Otherwise detect/js/petite-vue.js would
        // be Petite-vue
        const OWN_FILES = document.currentScript?.src.replace(/[^/]*$/, '');

        function add(detector) {
            detectors.set(detector.id, detector);
        }

        function escapeRegExp(text) {
            return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
        }

        // what detectors read, computed once per run and only when a detector asks
        function createContext(win) {
            const doc = win.document;
            const cache = {};
            const once = (key, compute) => key in cache ? cache[key] : (cache[key] = compute());

            // class names, attribute names and tag names of the page's elements (not inside shadow roots)
            const scan = () => once('scan', () => {
                const classes = new Set();
                const attributes = new Set();
                const tags = new Set();
                const elements = doc.getElementsByTagName('*');
                for (let i = 0; i < elements.length && i < MAX_ELEMENTS; i++) {
                    const element = elements[i];
                    tags.add(element.localName);
                    element.classList?.forEach(name => classes.add(name));
                    for (const attribute of element.attributes) {
                        attributes.add(attribute.name);
                    }
                }
                return { classes, attributes, tags, elements };
            });

            // every script, stylesheet and other file the page loaded, including those added by scripts
            const urls = () => once('urls', () => {
                const list = [
                    ...Array.from(doc.scripts, script => script.src),
                    ...Array.from(doc.querySelectorAll('link[href]'), link => link.href)
                ];
                try {
                    win.performance.getEntriesByType('resource').forEach(entry => list.push(entry.name));
                } catch (e) { }
                return [...new Set(list.filter(url => url && !(OWN_FILES && url.startsWith(OWN_FILES))))];
            });

            const ctx = {
                win,
                doc,
                // a global by path ('jQuery.fn.jquery'), undefined when any step is missing or throws
                get(path) {
                    try {
                        return path.split('.').reduce((value, key) => value == null ? undefined : value[key], win);
                    } catch (e) {
                        return undefined;
                    }
                },
                // a version-looking string, else undefined: some libraries put objects or numbers there
                version(value) {
                    if (typeof value === 'number') {
                        value = String(value);
                    }
                    return typeof value === 'string' && /^v?\d+(\.\d+)*/.test(value) ? value.replace(/^v/, '') : undefined;
                },
                // the version at path ('Backbone.VERSION') as a result, undefined when there's no version there
                globalVersion(path) {
                    const version = ctx.version(ctx.get(path));
                    return version ? { version, evidence: `window.${path}` } : undefined;
                },
                // a result from a URL naming the library (see urlVersion)
                fromUrl(name) {
                    const found = ctx.urlVersion(name);
                    return found ? { version: found.version, evidence: `loaded from ${found.url.split(/[?#]/)[0]}` } : undefined;
                },
                get classes() { return scan().classes; },
                get attributes() { return scan().attributes; },
                get tags() { return scan().tags; },
                get elements() { return scan().elements; },
                hasClass(...names) {
                    return names.some(name => scan().classes.has(name));
                },
                // the page's class names that match regex
                classesMatching(regex) {
                    return [...scan().classes].filter(name => regex.test(name));
                },
                hasAttribute(regex) {
                    return [...scan().attributes].some(name => regex.test(name));
                },
                query(selector) {
                    try {
                        return doc.querySelector(selector);
                    } catch (e) {
                        return null;
                    }
                },
                // a custom property set on :root (or on element)
                cssVar(name, element = doc.documentElement) {
                    try {
                        return win.getComputedStyle(element).getPropertyValue(name).trim();
                    } catch (e) {
                        return '';
                    }
                },
                // the first URL the page loaded that matches regex
                url(regex) {
                    return urls().find(url => regex.test(url));
                },
                // the version in a URL naming the library: name@1.2.3 (jsDelivr, unpkg), /name/1.2.3/ (cdnjs),
                // name-1.2.3.min.js. Returns { version, url }, or undefined
                urlVersion(name) {
                    const regex = new RegExp(`(?:^|[/@])${escapeRegExp(name)}(?:@|/|-|\\.)v?(\\d+\\.\\d+(?:\\.\\d+)?)(?![\\w-])`, 'i');
                    for (const url of urls()) {
                        const match = new URL(url, doc.baseURI).pathname.match(regex);
                        if (match) {
                            return { version: match[1], url };
                        }
                    }
                    return undefined;
                },
                // a banner comment at the start of an inline <style>: regex's first group
                styleBanner(regex) {
                    for (const style of doc.querySelectorAll('style')) {
                        const match = style.textContent.slice(0, BANNER_LENGTH).match(regex);
                        if (match) {
                            return match[1];
                        }
                    }
                    return undefined;
                },
                // a font family declared by an @font-face, from any stylesheet (even another origin's)
                font(regex) {
                    return once('fonts', () => {
                        const families = new Set();
                        try {
                            doc.fonts.forEach(face => families.add(face.family.replace(/^["']|["']$/g, '')));
                        } catch (e) { }
                        return [...families];
                    }).find(family => regex.test(family));
                },
                // <meta name="generator" content="Astro v4.5.0">
                generator(regex) {
                    const content = ctx.query('meta[name="generator" i]')?.content || '';
                    return content.match(regex);
                },
                // own property names of the first elements (up to limit) that have one matching regex, with the
                // element: React and Vue keep their internals in such expandos
                expando(regex, limit = 2000) {
                    const elements = [doc.documentElement, ...Array.from(scan().elements).slice(0, limit)];
                    for (const element of elements) {
                        const key = Object.getOwnPropertyNames(element).find(name => regex.test(name));
                        if (key) {
                            return { element, key, value: element[key] };
                        }
                    }
                    return undefined;
                },
                // the style rules (CSSStyleRule) of the stylesheets scripts can read (inline and same-origin), including
                // those inside @media, @supports, @layer and nesting, up to 20000: what Sass toolkits leave in the CSS
                styleRules() {
                    return once('styleRules', () => {
                        const rules = [];
                        const walk = list => {
                            for (let i = 0; i < list.length && rules.length < 20000; i++) {
                                const rule = list[i];
                                if (rule.selectorText !== undefined && rule.style) {
                                    rules.push(rule);
                                }
                                if (rule.cssRules) {
                                    walk(rule.cssRules);
                                }
                            }
                        };
                        for (const sheet of Array.from(doc.styleSheets)) {
                            try {
                                walk(sheet.cssRules);
                            } catch (e) { }
                        }
                        return rules;
                    });
                },
                // the first style rule (see styleRules) whose selectorText is selector (a string, or a RegExp it
                // matches) and whose declarations have these values ({ property: string or RegExp }, as the browser
                // serializes them): fingerprints of a stylesheet bundled into the site's own CSS, without its banner
                styleRule(selector, declarations = {}) {
                    const matches = (value, expected) => typeof expected === 'string' ? value === expected : expected.test(value);
                    return ctx.styleRules().find(rule => matches(rule.selectorText, selector) &&
                        Object.entries(declarations).every(([property, value]) => matches(rule.style.getPropertyValue(property).trim(), value)));
                },
                // React 16+: the components (fiber types: functions, forwardRef and memo objects) between the page's
                // first elements and their parent element, and the contexts they read. React component libraries leave
                // their displayName, propTypes and context values there. { types: [], contexts: [] }
                reactComponents() {
                    return once('reactComponents', () => {
                        const types = new Set();
                        const contexts = new Set();
                        for (const element of Array.from(scan().elements).slice(0, 2000)) {
                            const key = Object.getOwnPropertyNames(element).find(name => /^__react(?:Fiber|InternalInstance)\$/.test(name));
                            let fiber = key && element[key];
                            for (let depth = 0; fiber && depth < 30; depth++) {
                                fiber = fiber.return;
                                if (!fiber || typeof fiber.type === 'string' || fiber.tag === 3) {
                                    break;
                                }
                                [fiber.type, fiber.elementType].forEach(type => type && types.add(type));
                                for (let dependency = fiber.dependencies?.firstContext; dependency; dependency = dependency.next) {
                                    dependency.context && contexts.add(dependency.context);
                                }
                            }
                        }
                        return { types: [...types], contexts: [...contexts] };
                    });
                }
            };
            return ctx;
        }

        // { checked, found: [{ id, name, kind, href, npm, github, version, evidence }] }, JavaScript first, each kind by name
        async function run(win = window) {
            const ctx = createContext(win);
            const found = [];
            for (const detector of detectors.values()) {
                try {
                    const result = await detector.detect(ctx);
                    if (result) {
                        const { id, name, kind, href, npm, github } = detector;
                        found.push({ id, name, kind, href, npm, github, version: result.version ? String(result.version) : null, evidence: result.evidence || '' });
                    }
                } catch (e) {
                    console.error(`%c--> detect ${detector.id}: ${e}`, 'background: red; color: white');
                }
            }
            found.sort((a, b) => (a.kind === b.kind ? 0 : a.kind === 'js' ? -1 : 1) || a.name.localeCompare(b.name));
            return { checked: detectors.size, found };
        }

        return { add, run };
    })();
}


==============================================================================
detect/detectors.json  (338 lines)
==============================================================================

{
    "js": [
        "ace",
        "aframe",
        "ag-grid",
        "alpine",
        "amcharts",
        "angular",
        "angularjs",
        "animejs",
        "aos",
        "apexcharts",
        "astro",
        "aura",
        "aurelia",
        "axios",
        "babylon",
        "backbone",
        "barba",
        "blazor",
        "canjs",
        "capacitor",
        "chartjs",
        "choices",
        "ckeditor",
        "cleave",
        "clipboardjs",
        "clojurescript",
        "closure",
        "codemirror",
        "cordova",
        "core-js",
        "cyclejs",
        "d3",
        "datatables",
        "dayjs",
        "devextreme",
        "docusaurus",
        "dojo",
        "dompurify",
        "draftjs",
        "dropzone",
        "echarts",
        "elm",
        "ember",
        "extjs",
        "fabric",
        "fancybox",
        "filepond",
        "flatpickr",
        "flickity",
        "floating-ui",
        "flutter",
        "framer-motion",
        "framework7",
        "fresh",
        "fusejs",
        "gatsby",
        "glide",
        "google-charts",
        "google-maps",
        "gridsome",
        "gsap",
        "gwt",
        "hammerjs",
        "handlebars",
        "handsontable",
        "highcharts",
        "highlightjs",
        "hlsjs",
        "howler",
        "htmx",
        "hyperapp",
        "immutable",
        "inertia",
        "inferno",
        "inputmask",
        "instantsearch",
        "interactjs",
        "intercooler",
        "intl-tel-input",
        "ionic",
        "isotope",
        "jquery",
        "jquery-migrate",
        "jquery-mobile",
        "jquery-ui",
        "jquery-validation",
        "js-cookie",
        "katex",
        "kendo",
        "knockout",
        "konva",
        "lazysizes",
        "leaflet",
        "lenis",
        "lexical",
        "lightbox2",
        "lit",
        "livewire",
        "locomotive-scroll",
        "lodash",
        "lottie",
        "lwc",
        "mapbox-gl",
        "maplibre",
        "marked",
        "marko",
        "masonry",
        "mathjax",
        "mermaid",
        "meteor",
        "million",
        "mithril",
        "mobx",
        "modernizr",
        "moment",
        "monaco",
        "mootools",
        "next",
        "nuxt",
        "onsen",
        "openlayers",
        "owl-carousel",
        "p5",
        "paperjs",
        "parsley",
        "petite-vue",
        "phaser",
        "phoenix-liveview",
        "photoswipe",
        "pikaday",
        "pinia",
        "pixi",
        "plotly",
        "plyr",
        "polymer",
        "popper",
        "preact",
        "prism",
        "prosemirror",
        "prototype",
        "quill",
        "qwik",
        "ractive",
        "react",
        "react-router",
        "recharts",
        "redux",
        "redwood",
        "requirejs",
        "riot",
        "rxjs",
        "scriptaculous",
        "scrollreveal",
        "select2",
        "sencha-touch",
        "slate",
        "slick",
        "socketio",
        "solid",
        "sortablejs",
        "splide",
        "stencil",
        "stimulus",
        "svelte",
        "sveltekit",
        "swiper",
        "syncfusion",
        "three",
        "tinymce",
        "tippy",
        "tiptap",
        "tom-select",
        "turbo",
        "turbolinks",
        "underscore",
        "unpoly",
        "uppy",
        "vaadin",
        "velocity",
        "videojs",
        "vite",
        "vitepress",
        "vue",
        "vue-router",
        "vuepress",
        "vuex",
        "webix",
        "webpack",
        "wicket",
        "yui",
        "zepto"
    ],
    "css": [
        "7css",
        "98css",
        "adminlte",
        "angular-material",
        "animate-css",
        "antd",
        "aphrodite",
        "arco",
        "atlaskit",
        "atomizer",
        "balloon-css",
        "baseweb",
        "basscss",
        "blueprint",
        "bootstrap",
        "bootstrap-icons",
        "bootstrap-reboot",
        "bootstrap-vue",
        "bootswatch",
        "bourbon",
        "boxicons",
        "buefy",
        "bulma",
        "carbon",
        "chakra",
        "chota",
        "cirrus",
        "clarity",
        "coreui",
        "css-modules",
        "daisyui",
        "devextreme-themes",
        "divi",
        "element",
        "elementor",
        "emotion",
        "eui",
        "evergreen",
        "feather",
        "flowbite",
        "fluent-ui",
        "font-awesome",
        "foundation",
        "framework7-css",
        "geist",
        "glyphicons",
        "goober",
        "google-fonts",
        "grommet",
        "gutenberg",
        "halfmoon",
        "headlessui",
        "heroicons",
        "heroui",
        "hint-css",
        "hover-css",
        "ionic-css",
        "ionicons",
        "jss",
        "kendo-themes",
        "kube",
        "linaria",
        "line-awesome",
        "lucide",
        "magic-css",
        "mantine",
        "material-icons",
        "material-tailwind",
        "material-web",
        "materialize",
        "mdbootstrap",
        "mdc",
        "mdi",
        "mdl",
        "milligram",
        "mini-css",
        "modern-normalize",
        "mui",
        "mvp-css",
        "naive-ui",
        "neat",
        "nes-css",
        "new-css",
        "normalize",
        "octicons",
        "onsen-css",
        "open-props",
        "oruga",
        "panda",
        "papercss",
        "patternfly",
        "phosphor",
        "picnic",
        "pico",
        "polaris",
        "preline",
        "prime",
        "primer",
        "pure",
        "quasar",
        "radix",
        "react-bootstrap",
        "reactstrap",
        "rebass",
        "remixicon",
        "sakura",
        "sanitize-css",
        "semantic-ui",
        "shadcn",
        "shoelace",
        "shopify-dawn",
        "simple-css",
        "simple-line-icons",
        "skeleton",
        "slds",
        "spectre",
        "spectrum",
        "stitches",
        "styled-components",
        "stylex",
        "susy",
        "syncfusion-themes",
        "tabler",
        "tabler-icons",
        "tachyons",
        "tailwind",
        "tdesign",
        "theme-ui",
        "themify",
        "tuicss",
        "twind",
        "uikit",
        "unocss",
        "vanilla-extract",
        "vant",
        "view-ui",
        "vuetify",
        "water-css",
        "windicss",
        "wpbakery",
        "xp-css"
    ]
}


==============================================================================
detect/js/ace.js  (14 lines)
==============================================================================

// Ace: window.ace (edit, version), else the editor instance it keeps on each .ace_editor element (env.editor)
window[Symbol.for('dosson')].frameworks.add({
    id: 'ace', name: 'Ace', kind: 'js', href: 'https://ace.c9.io', npm: 'ace-builds', github: 'ajaxorg/ace',
    detect(ctx) {
        if (typeof ctx.get('ace.edit') === 'function') {
            return ctx.globalVersion('ace.version') || ctx.fromUrl('ace-builds') || { evidence: 'window.ace' };
        }
        const editor = ctx.query('.ace_editor')?.env?.editor;
        if (editor && typeof editor.getSession === 'function') {
            return { version: ctx.fromUrl('ace-builds')?.version, evidence: 'env.editor on .ace_editor' };
        }
        return ctx.fromUrl('ace-builds') || null;
    }
});


==============================================================================
detect/js/aframe.js  (14 lines)
==============================================================================

// A-Frame sets window.AFRAME (even when bundled) with its version, and registers the <a-scene> custom element
window[Symbol.for('dosson')].frameworks.add({
    id: 'aframe', name: 'A-Frame', kind: 'js', href: 'https://aframe.io', npm: 'aframe', github: 'aframevr/aframe',
    detect(ctx) {
        if (typeof ctx.get('AFRAME.registerComponent') === 'function') {
            return ctx.globalVersion('AFRAME.version') || { evidence: 'window.AFRAME' };
        }
        if (ctx.tags.has('a-scene') && ctx.win.customElements?.get('a-scene')) {
            const release = ctx.url(/aframe\.io\/releases\/(\d+\.\d+\.\d+)\//);
            return { version: release?.match(/releases\/([\d.]+)\//)[1] || ctx.fromUrl('aframe')?.version, evidence: '<a-scene> element' };
        }
        return null;
    }
});


==============================================================================
detect/js/ag-grid.js  (45 lines)
==============================================================================

// AG Grid: since v35 it keeps its styles per version in globalThis.agStyleInjectionVersions and tags them
// data-ag-css-version (bundled too); older ones: window.agGrid, the ag-root-wrapper class. Bundled: the grid's
// elements keep their controllers in an __AG_<random> property, whose beans lead to the grid API, and
// gridApi.getState() carries the version (32.1+)
window[Symbol.for('dosson')].frameworks.add({
    id: 'ag-grid', name: 'AG Grid', kind: 'js', href: 'https://www.ag-grid.com', npm: 'ag-grid-community', github: 'ag-grid/ag-grid',
    detect(ctx) {
        const versions = ctx.get('agStyleInjectionVersions');
        if (versions instanceof ctx.win.Map && versions.size) {
            return { version: [...versions.keys()].join(', '), evidence: 'window.agStyleInjectionVersions' };
        }
        const style = ctx.query('style[data-ag-css-version]');
        if (style) {
            return { version: ctx.version(style.getAttribute('data-ag-css-version')), evidence: '<style data-ag-css-version>' };
        }
        const fromUrl = ctx.fromUrl('ag-grid-community') || ctx.fromUrl('ag-grid-enterprise');
        if (ctx.get('agGrid') && (typeof ctx.get('agGrid.createGrid') === 'function' || typeof ctx.get('agGrid.Grid') === 'function')) {
            return fromUrl || { evidence: 'window.agGrid' };
        }
        const fromState = () => {
            const element = [...ctx.doc.querySelectorAll('.ag-root-wrapper .ag-header-cell, .ag-root-wrapper .ag-row')]
                .find(candidate => Object.getOwnPropertyNames(candidate).some(name => name.startsWith('__AG_')));
            const data = element && element[Object.getOwnPropertyNames(element).find(name => name.startsWith('__AG_'))];
            for (const ctrl of data && typeof data === 'object' ? Object.values(data) : []) {
                try {
                    const beans = ctrl?.beans;
                    const api = beans?.gridApi || (typeof beans?.context?.getBean === 'function' ? beans.context.getBean('gridApi') : undefined);
                    const version = typeof api?.getState === 'function' ? ctx.version(api.getState()?.version) : undefined;
                    if (version) {
                        return { version, evidence: 'gridApi.getState().version (from the grid\'s elements)' };
                    }
                } catch (e) { }
            }
            return undefined;
        };
        if (ctx.hasClass('ag-root-wrapper')) {
            const state = fromUrl ? undefined : fromState();
            if (state) {
                return state;
            }
            return fromUrl || { evidence: 'ag-root-wrapper class' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/alpine.js  (11 lines)
==============================================================================

// Alpine.js
window[Symbol.for('dosson')].frameworks.add({
    id: 'alpine', name: 'Alpine.js', kind: 'js', href: 'https://alpinejs.dev', npm: 'alpinejs', github: 'alpinejs/alpine',
    detect(ctx) {
        const version = ctx.globalVersion('Alpine.version') || ctx.fromUrl('alpinejs');
        if (version) {
            return version;
        }
        return ctx.hasAttribute(/^x-data$/) && ctx.get('Alpine') ? { evidence: 'window.Alpine and x-data' } : null;
    }
});


==============================================================================
detect/js/amcharts.js  (19 lines)
==============================================================================

// amCharts 5: window.am5.registry.version (CDN), else the am5-html-container div each chart adds (bundled). amCharts 4: am4core
window[Symbol.for('dosson')].frameworks.add({
    id: 'amcharts', name: 'amCharts', kind: 'js', href: 'https://www.amcharts.com', npm: '@amcharts/amcharts5', github: 'amcharts/amcharts5',
    detect(ctx) {
        if (ctx.get('am5.registry')) {
            return ctx.globalVersion('am5.registry.version') || { version: '5.x', evidence: 'window.am5' };
        }
        if (ctx.hasClass('am5-html-container')) {
            return { version: '5.x', evidence: 'am5-html-container class' };
        }
        if (typeof ctx.get('am4core.create') === 'function') {
            return ctx.globalVersion('am4core.System.VERSION') || { version: '4.x', evidence: 'window.am4core' };
        }
        if (typeof ctx.get('AmCharts.makeChart') === 'function') {
            return { version: '3.x', evidence: 'window.AmCharts' };
        }
        return null;
    }
});


==============================================================================
detect/js/angular.js  (15 lines)
==============================================================================

// Angular (2+) writes its version on each app's root element: <app-root ng-version="17.3.0">
window[Symbol.for('dosson')].frameworks.add({
    id: 'angular', name: 'Angular', kind: 'js', href: 'https://angular.dev', npm: '@angular/core', github: 'angular/angular',
    detect(ctx) {
        const root = ctx.query('[ng-version]');
        if (root) {
            return { version: root.getAttribute('ng-version'), evidence: `ng-version on <${root.localName}>` };
        }
        if (ctx.get('getAllAngularRootElements') || ctx.get('ng.getComponent')) {
            return { evidence: 'window.ng (development mode)' };
        }
        // view encapsulation attributes: _nghost-abc-c12, _ngcontent-abc-c12
        return ctx.hasAttribute(/^_ng(host|content)-/) ? { evidence: '_nghost-/_ngcontent- attributes' } : null;
    }
});


==============================================================================
detect/js/angularjs.js  (11 lines)
==============================================================================

// AngularJS (1.x)
window[Symbol.for('dosson')].frameworks.add({
    id: 'angularjs', name: 'AngularJS', kind: 'js', href: 'https://angularjs.org', npm: 'angular', github: 'angular/angular.js',
    detect(ctx) {
        const version = ctx.globalVersion('angular.version.full');
        if (version) {
            return version;
        }
        return ctx.hasClass('ng-scope') ? { version: '1.x', evidence: 'ng-scope class' } : null;
    }
});


==============================================================================
detect/js/animejs.js  (18 lines)
==============================================================================

// anime.js 4 pushes { version } to window.AnimeJS even when bundled; 3 and older expose window.anime.version
window[Symbol.for('dosson')].frameworks.add({
    id: 'animejs', name: 'anime.js', kind: 'js', href: 'https://animejs.com', npm: 'animejs', github: 'juliangarnier/anime',
    detect(ctx) {
        const copies = ctx.get('AnimeJS');
        if (Array.isArray(copies)) {
            const versions = [...new Set(copies.map(copy => ctx.version(copy?.version)).filter(Boolean))];
            if (versions.length) {
                return { version: versions.join(', '), evidence: 'window.AnimeJS' };
            }
        }
        // anime.timeline came with 2.0: 1.x has anime.remove and anime.easings
        if (typeof ctx.get('anime') === 'function' && (typeof ctx.get('anime.timeline') === 'function' || (typeof ctx.get('anime.remove') === 'function' && ctx.get('anime.easings')))) {
            return ctx.globalVersion('anime.version') || ctx.fromUrl('animejs') || { evidence: 'window.anime' };
        }
        return ctx.fromUrl('animejs') || null;
    }
});


==============================================================================
detect/js/aos.js  (16 lines)
==============================================================================

// AOS: window.AOS (init, refresh, refreshHard), else what AOS.init() leaves: data-aos-easing on <body> and aos-init
// on each [data-aos]. It has no version: only a URL gives it
window[Symbol.for('dosson')].frameworks.add({
    id: 'aos', name: 'AOS', kind: 'js', href: 'https://michalsnik.github.io/aos/', npm: 'aos', github: 'michalsnik/aos',
    detect(ctx) {
        const version = ctx.fromUrl('aos')?.version;
        const AOS = ctx.get('AOS');
        if (AOS && typeof AOS.init === 'function' && typeof AOS.refreshHard === 'function') {
            return { version, evidence: 'window.AOS' };
        }
        if (ctx.hasClass('aos-init') && ctx.doc.body?.hasAttribute('data-aos-easing')) {
            return { version, evidence: 'aos-init class, data-aos-easing on <body>' };
        }
        return null;
    }
});


==============================================================================
detect/js/apexcharts.js  (16 lines)
==============================================================================

// ApexCharts: window.ApexCharts (UMD), else window.Apex (its global options, created even when bundled) with the
// .apexcharts-canvas it renders into
window[Symbol.for('dosson')].frameworks.add({
    id: 'apexcharts', name: 'ApexCharts', kind: 'js', href: 'https://apexcharts.com', npm: 'apexcharts', github: 'apexcharts/apexcharts.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('apexcharts');
        const ApexCharts = ctx.get('ApexCharts');
        if (typeof ApexCharts === 'function' && typeof ApexCharts.exec === 'function') {
            return fromUrl || { evidence: 'window.ApexCharts' };
        }
        if (ctx.hasClass('apexcharts-canvas')) {
            return fromUrl || { evidence: ctx.get('Apex') ? 'window.Apex and .apexcharts-canvas' : '.apexcharts-canvas class' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/astro.js  (14 lines)
==============================================================================

// Astro: <astro-island> for hydrated components, data-astro-cid-* for scoped styles
window[Symbol.for('dosson')].frameworks.add({
    id: 'astro', name: 'Astro', kind: 'js', href: 'https://astro.build', npm: 'astro', github: 'withastro/astro',
    detect(ctx) {
        const generator = ctx.generator(/Astro\s+v?([\d.]+)/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        if (ctx.tags.has('astro-island')) {
            return { evidence: '<astro-island> elements' };
        }
        return ctx.hasAttribute(/^data-astro-(cid|transition)/) ? { evidence: 'data-astro-* attributes' } : null;
    }
});


==============================================================================
detect/js/aura.js  (16 lines)
==============================================================================

// Salesforce Aura (Lightning Experience, Experience Cloud): window.$A with getContext and enqueueAction, else the
// data-aura-rendered-by its components put on their elements, else /auraFW/javascript/ URLs
window[Symbol.for('dosson')].frameworks.add({
    id: 'aura', name: 'Salesforce Aura', kind: 'js', href: 'https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/', github: 'forcedotcom/aura',
    detect(ctx) {
        if (typeof ctx.get('$A.getContext') === 'function' && typeof ctx.get('$A.enqueueAction') === 'function') {
            return { evidence: 'window.$A' };
        }
        const rendered = ctx.query('[data-aura-rendered-by]');
        if (rendered) {
            return { evidence: `data-aura-rendered-by on <${rendered.localName}>` };
        }
        const script = ctx.url(/\/auraFW\/javascript\//);
        return script ? { evidence: `loaded ${script.split(/[?#]/)[0]}` } : null;
    }
});


==============================================================================
detect/js/aurelia.js  (18 lines)
==============================================================================

// Aurelia. 2 keeps its controllers on the nodes ($au, keyed au:resource:…); 1 marks bound elements with au-target-id
// (and an au expando), and its bootstrapper starts from aurelia-app
window[Symbol.for('dosson')].frameworks.add({
    id: 'aurelia', name: 'Aurelia', kind: 'js', href: 'https://aurelia.io', npm: 'aurelia', github: 'aurelia/aurelia',
    detect(ctx) {
        const au2 = ctx.expando(/^\$au$/);
        if (au2 && au2.value && Object.keys(au2.value).some(key => key.startsWith('au:resource:'))) {
            return { version: '2.x', evidence: `$au on <${au2.element.localName}>` };
        }
        if (ctx.hasAttribute(/^au-target-id$/)) {
            return { version: '1.x', evidence: 'au-target-id attribute' };
        }
        if (ctx.hasAttribute(/^aurelia-app$/)) {
            return { version: '1.x', evidence: 'aurelia-app attribute' };
        }
        return null;
    }
});


==============================================================================
detect/js/axios.js  (5 lines)
==============================================================================

// Axios
window[Symbol.for('dosson')].frameworks.add({
    id: 'axios', name: 'Axios', kind: 'js', href: 'https://axios-http.com', npm: 'axios', github: 'axios/axios',
    detect: (ctx) => typeof ctx.get('axios.get') === 'function' ? ctx.globalVersion('axios.VERSION') || { evidence: 'window.axios' } : null
});


==============================================================================
detect/js/babylon.js  (15 lines)
==============================================================================

// Babylon.js: BABYLON.Engine.Version (UMD build), else data-engine="Babylon.js v7.1.0" that every engine sets on its
// canvas, bundled or not
window[Symbol.for('dosson')].frameworks.add({
    id: 'babylon', name: 'Babylon.js', kind: 'js', href: 'https://www.babylonjs.com', npm: '@babylonjs/core', github: 'BabylonJS/Babylon.js',
    detect(ctx) {
        if (typeof ctx.get('BABYLON.Engine') === 'function') {
            return ctx.globalVersion('BABYLON.Engine.Version') || ctx.fromUrl('babylonjs') || { evidence: 'window.BABYLON' };
        }
        const canvas = ctx.query('canvas[data-engine^="Babylon.js"]');
        if (canvas) {
            return { version: ctx.version(canvas.dataset.engine.match(/v?(\d[\w.-]*)\s*$/)?.[1]), evidence: 'data-engine on <canvas>' };
        }
        return ctx.fromUrl('babylonjs') || ctx.fromUrl('@babylonjs/core') || null;
    }
});


==============================================================================
detect/js/backbone.js  (5 lines)
==============================================================================

// Backbone.js
window[Symbol.for('dosson')].frameworks.add({
    id: 'backbone', name: 'Backbone.js', kind: 'js', href: 'https://backbonejs.org', npm: 'backbone', github: 'jashkenas/backbone',
    detect: (ctx) => ctx.globalVersion('Backbone.VERSION') || ctx.fromUrl('backbone')
});


==============================================================================
detect/js/barba.js  (20 lines)
==============================================================================

// Barba.js: window.barba.version (2.x), window.Barba.version (1.x), else the data-barba="wrapper" markup it requires
window[Symbol.for('dosson')].frameworks.add({
    id: 'barba', name: 'Barba.js', kind: 'js', href: 'https://barba.js.org', npm: '@barba/core', github: 'barbajs/barba',
    detect(ctx) {
        if (typeof ctx.get('barba.init') === 'function') {
            return ctx.globalVersion('barba.version') || { evidence: 'window.barba' };
        }
        if (typeof ctx.get('Barba.Pjax') === 'object' && ctx.get('Barba.Pjax')) {
            return ctx.globalVersion('Barba.version') || { version: '1.x', evidence: 'window.Barba' };
        }
        const fromUrl = ctx.fromUrl('@barba/core') || ctx.fromUrl('barba.js');
        if (ctx.query('[data-barba="wrapper"] [data-barba="container"]')) {
            return { version: fromUrl?.version || '2.x', evidence: 'data-barba="wrapper"' };
        }
        if (ctx.query('#barba-wrapper > .barba-container')) {
            return { version: fromUrl?.version || '1.x', evidence: '#barba-wrapper' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/blazor.js  (13 lines)
==============================================================================

// Blazor: window.Blazor (start, _internal) from _framework/blazor.{web,server,webassembly}.js. blazor.web.js only exists
// since .NET 8
window[Symbol.for('dosson')].frameworks.add({
    id: 'blazor', name: 'Blazor', kind: 'js', href: 'https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor', github: 'dotnet/aspnetcore',
    detect(ctx) {
        const script = ctx.url(/\/_framework\/blazor\.(web|server|webassembly)(\.[\w-]+)?\.js(?:[?#]|$)/);
        const version = script && /\/_framework\/blazor\.web[.]/.test(script) ? '≥8' : undefined;
        if (typeof ctx.get('Blazor.start') === 'function' && ctx.get('Blazor._internal')) {
            return { version, evidence: 'window.Blazor' };
        }
        return script ? { version, evidence: `loaded ${script.split(/[?#]/)[0].replace(/^.*\//, '_framework/')}` } : null;
    }
});


==============================================================================
detect/js/canjs.js  (25 lines)
==============================================================================

// CanJS: can.VERSION up to 2; from 3, window.can (the global build, with StacheElement / Component) and the
// Symbol.for('can.…') keys it puts on its custom elements. The version then comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'canjs', name: 'CanJS', kind: 'js', href: 'https://canjs.com', npm: 'can', github: 'canjs/canjs',
    detect(ctx) {
        const legacy = ctx.globalVersion('can.VERSION');
        if (legacy) {
            return legacy;
        }
        const fromUrl = ctx.fromUrl('can');
        const can = ctx.get('can');
        if (can && (typeof can.StacheElement === 'function' || typeof can.Component === 'function') && typeof can.stache === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.can, ${fromUrl.evidence}` : 'window.can' };
        }
        const meta = Symbol.for('can.meta');
        const viewModel = Symbol.for('can.viewModel');
        for (const tag of ctx.tags) {
            const element = tag.includes('-') && ctx.doc.querySelector(tag);
            if (element && (Object.getOwnPropertySymbols(element).includes(meta) || Object.getOwnPropertySymbols(element).includes(viewModel))) {
                return { version: fromUrl?.version, evidence: `Symbol(can.meta) on <${tag}>` };
            }
        }
        return null;
    }
});


==============================================================================
detect/js/capacitor.js  (20 lines)
==============================================================================

// Capacitor: @capacitor/core sets window.Capacitor even when bundled (and the native app injects it). getPlatform()
// and isNativePlatform() came with 3; 1 and 2 had isNative and platform. No version
window[Symbol.for('dosson')].frameworks.add({
    id: 'capacitor', name: 'Capacitor', kind: 'js', href: 'https://capacitorjs.com', npm: '@capacitor/core', github: 'ionic-team/capacitor',
    detect(ctx) {
        const capacitor = ctx.get('Capacitor');
        if (!capacitor || typeof capacitor !== 'object' || !capacitor.Plugins) {
            return null;
        }
        let platform;
        try {
            platform = typeof capacitor.getPlatform === 'function' ? capacitor.getPlatform() : capacitor.platform;
        } catch (e) { }
        const evidence = `window.Capacitor${typeof platform === 'string' ? ` (${platform})` : ''}`;
        if (typeof capacitor.isNativePlatform === 'function') {
            return { version: '≥3', evidence };
        }
        return typeof capacitor.isNative === 'boolean' ? { version: '≤2', evidence } : null;
    }
});


==============================================================================
detect/js/chartjs.js  (11 lines)
==============================================================================

// Chart.js
window[Symbol.for('dosson')].frameworks.add({
    id: 'chartjs', name: 'Chart.js', kind: 'js', href: 'https://www.chartjs.org', npm: 'chart.js', github: 'chartjs/Chart.js',
    detect(ctx) {
        const Chart = ctx.get('Chart');
        if (typeof Chart !== 'function' || !Chart.defaults) {
            return ctx.fromUrl('chart.js') || null;
        }
        return ctx.globalVersion('Chart.version') || ctx.fromUrl('chart.js') || { evidence: 'window.Chart' };
    }
});


==============================================================================
detect/js/choices.js  (15 lines)
==============================================================================

// Choices.js: window.Choices.version, else its .choices wrapper (.choices__inner) around the original
// element it marks data-choice
window[Symbol.for('dosson')].frameworks.add({
    id: 'choices', name: 'Choices.js', kind: 'js', href: 'https://choices-js.github.io/Choices/', npm: 'choices.js', github: 'Choices-js/Choices',
    detect(ctx) {
        const global = ctx.get('Choices');
        if (typeof global === 'function' && typeof global.prototype?.setChoices === 'function') {
            return ctx.globalVersion('Choices.version') || ctx.fromUrl('choices.js') || { evidence: 'window.Choices' };
        }
        if (ctx.hasClass('choices__inner') && ctx.hasAttribute(/^data-choice$/)) {
            return { version: ctx.fromUrl('choices.js')?.version, evidence: '.choices__inner and data-choice' };
        }
        return ctx.fromUrl('choices.js') || null;
    }
});


==============================================================================
detect/js/ckeditor.js  (20 lines)
==============================================================================

// CKEditor: window.CKEDITOR_VERSION (5, set even when bundled), window.CKEDITOR.version (4), else the editor 5 on its
// editable element (ckeditorInstance)
window[Symbol.for('dosson')].frameworks.add({
    id: 'ckeditor', name: 'CKEditor', kind: 'js', href: 'https://ckeditor.com', npm: 'ckeditor5', github: 'ckeditor/ckeditor5',
    detect(ctx) {
        const version5 = ctx.globalVersion('CKEDITOR_VERSION');
        if (version5) {
            return version5;
        }
        const CKEDITOR = ctx.get('CKEDITOR');
        if (CKEDITOR && typeof CKEDITOR.replace === 'function') {
            return ctx.globalVersion('CKEDITOR.version') || { version: '4.x', evidence: 'window.CKEDITOR' };
        }
        const editable = ctx.query('.ck-editor__editable');
        if (editable?.ckeditorInstance) {
            return { evidence: 'CKEditor 5 on .ck-editor__editable (ckeditorInstance)' };
        }
        return null;
    }
});


==============================================================================
detect/js/cleave.js  (12 lines)
==============================================================================

// Cleave.js: window.Cleave (no version in it), or its URL. Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'cleave', name: 'Cleave.js', kind: 'js', href: 'https://nosir.github.io/cleave.js/', npm: 'cleave.js', github: 'nosir/cleave.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('cleave.js') || ctx.fromUrl('cleave');
        const Cleave = ctx.get('Cleave');
        if (typeof Cleave === 'function' && Cleave.NumeralFormatter && Cleave.CreditCardDetector) {
            return fromUrl || { evidence: 'window.Cleave' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/clipboardjs.js  (12 lines)
==============================================================================

// Clipboard.js 2 sets window.ClipboardJS (version 1's window.Clipboard is a browser built-in now). Bundled, only the
// data-clipboard-* attributes its buttons use are left
window[Symbol.for('dosson')].frameworks.add({
    id: 'clipboardjs', name: 'Clipboard.js', kind: 'js', href: 'https://clipboardjs.com', npm: 'clipboard', github: 'zenorocha/clipboard.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('clipboard.js') || ctx.fromUrl('clipboard');
        if (typeof ctx.get('ClipboardJS') === 'function' && typeof ctx.get('ClipboardJS.isSupported') === 'function') {
            return fromUrl || { version: '2.x', evidence: 'window.ClipboardJS' };
        }
        return ctx.hasAttribute(/^data-clipboard-(target|text)$/) ? fromUrl || { evidence: 'data-clipboard-* attribute' } : null;
    }
});


==============================================================================
detect/js/clojurescript.js  (18 lines)
==============================================================================

// ClojureScript: cljs.core in development and simple builds (with *clojurescript-version*), shadow$provide from
// shadow-cljs builds, window.scittle for the Scittle interpreter. An :advanced build without shadow-cljs leaves no name
window[Symbol.for('dosson')].frameworks.add({
    id: 'clojurescript', name: 'ClojureScript', kind: 'js', href: 'https://clojurescript.org', github: 'clojure/clojurescript',
    detect(ctx) {
        if (typeof ctx.get('cljs.core.PersistentVector') === 'function') {
            return { version: ctx.version(ctx.get('cljs.core._STAR_clojurescript_version_STAR_')), evidence: 'window.cljs.core' };
        }
        const provide = ctx.get('shadow$provide');
        if (provide && typeof provide === 'object' && Object.getPrototypeOf(provide) === ctx.win.Object.prototype) {
            return { evidence: 'window.shadow$provide (shadow-cljs)' };
        }
        if (typeof ctx.get('scittle.core.eval_string') === 'function') {
            return { evidence: 'window.scittle (Scittle)' };
        }
        return null;
    }
});


==============================================================================
detect/js/closure.js  (53 lines)
==============================================================================

// Closure Library. Uncompiled (base.js): window.goog with provide/require. Compiled apps (Gmail, Google Docs…) rename goog
// away, but keep the property names goog.events and goog.getUid put on what they touch: closure_lm_<random> (listener
// map) and closure_uid_<random>, on document, its root elements and the elements the app listens to (on window alone it
// is usually a Google embed such as reCAPTCHA, so it isn't enough; with an embed's globals on the page, the keys it put on
// window, document and <body> don't count on elements either). No version
window[Symbol.for('dosson')].frameworks.add({
    id: 'closure', name: 'Closure Library', kind: 'js', href: 'https://github.com/google/closure-library', npm: 'google-closure-library', github: 'google/closure-library',
    detect(ctx) {
        const goog = ctx.get('goog');
        if (goog && typeof goog === 'object' && typeof goog.provide === 'function' && typeof goog.require === 'function' && goog.global) {
            return { evidence: 'window.goog' };
        }
        // window.closure_lm_<n> alone proves nothing: Google's embedded scripts (reCAPTCHA, Google sign-in, ads, Maps…) are
        // compiled with Closure and leave it on window, document and <body> of any page that includes them. So only the
        // page's own elements count: below <body>, outside what those embeds build or mark (ad slots, badges, sign-in
        // buttons, iframes)
        const isKey = key => /^closure_(lm|uid)_\d+$/.test(key);
        const keysOf = target => {
            try {
                return ctx.win.Object.keys(target).filter(isKey);
            } catch (e) {
                return [];
            }
        };
        // When such an embed is on the page (its globals), its own keys also mark window, document and <body>, and the
        // elements it listens to (empty ad slots, containers with page-chosen ids…): they say nothing about the page
        const hasEmbed = ['grecaptcha', '___grecaptcha_cfg', 'googletag', 'gapi', 'google'].some(name => {
            try {
                return ctx.win[name] != null;
            } catch (e) {
                return false;
            }
        });
        const embedKeys = hasEmbed ? [ctx.win, ctx.doc, ctx.doc.documentElement, ctx.doc.body].flatMap(keysOf) : [];
        const keyOf = target => keysOf(target).find(key => !embedKeys.includes(key));
        let elements = [];
        try {
            elements = ctx.doc.body ? ctx.doc.body.querySelectorAll('*') : [];
        } catch (e) { }
        const embed = '.grecaptcha-badge, [class*="grecaptcha"], [id*="recaptcha"], [class*="recaptcha"], [id^="g_id_"], [id^="gsi"], ' +
            '[class*="gsi"], [id*="credential_picker"], [id*="google"], [class*="google"], [id*="gpt"], [class*="gpt"], ' +
            '[data-google-query-id], [data-google-container-id], [data-ad-slot], [data-ad-client], .adsbygoogle, [class*="gm-"], ' +
            'iframe, ins, script, svg';
        for (let i = 0; i < elements.length && i < 5000; i++) {
            const element = elements[i];
            const key = keyOf(element);
            if (key &&!(element.closest && element.closest(embed)) && !(element.querySelector && element.querySelector('iframe'))) {
                return { evidence: `compiled: <${element.localName}> has ${key}` };
            }
        }
        return null;
    }
});


==============================================================================
detect/js/codemirror.js  (21 lines)
==============================================================================

// CodeMirror 5 keeps its instance on the .CodeMirror wrapper (and window.CodeMirror.version); 6 has no global but
// marks the editor .cm-editor and hangs its view on .cm-content (cmTile, cmView before 6.39)
window[Symbol.for('dosson')].frameworks.add({
    id: 'codemirror', name: 'CodeMirror', kind: 'js', href: 'https://codemirror.net', npm: 'codemirror', github: 'codemirror/dev',
    detect(ctx) {
        const global = ctx.get('CodeMirror');
        if (typeof global === 'function' && typeof global.fromTextArea === 'function') {
            return ctx.globalVersion('CodeMirror.version') || { version: '5.x', evidence: 'window.CodeMirror' };
        }
        const wrapper = ctx.query('.CodeMirror');
        const instance = wrapper?.CodeMirror;
        if (instance && typeof instance.getValue === 'function') {
            return { version: ctx.version(instance.constructor?.version) || '5.x', evidence: 'CodeMirror instance on .CodeMirror' };
        }
        const content = ctx.query('.cm-editor .cm-content');
        if (content && (content.cmTile || content.cmView)) {
            return { version: ctx.fromUrl('@codemirror/view')?.version || '6.x', evidence: `${content.cmTile ? 'cmTile' : 'cmView'} on .cm-editor .cm-content` };
        }
        return ctx.fromUrl('codemirror') || null;
    }
});


==============================================================================
detect/js/cordova.js  (12 lines)
==============================================================================

// Cordova: cordova.js (from the platform, served by the app) sets window.cordova with the platform's version and id
window[Symbol.for('dosson')].frameworks.add({
    id: 'cordova', name: 'Cordova', kind: 'js', href: 'https://cordova.apache.org', npm: 'cordova-js', github: 'apache/cordova-js',
    detect(ctx) {
        const cordova = ctx.get('cordova');
        if (!cordova || typeof cordova !== 'object' || typeof cordova.define !== 'function' || typeof cordova.require !== 'function') {
            return null;
        }
        const platform = typeof cordova.platformId === 'string' ? ` (${cordova.platformId})` : '';
        return { version: ctx.version(cordova.platformVersion || cordova.version), evidence: `window.cordova${platform}` };
    }
});


==============================================================================
detect/js/core-js.js  (11 lines)
==============================================================================

// core-js, the polyfills behind most Babel builds. 3.x lists each copy in window['__core-js_shared__'].versions
window[Symbol.for('dosson')].frameworks.add({
    id: 'core-js', name: 'core-js', kind: 'js', href: 'https://github.com/zloirock/core-js', npm: 'core-js', github: 'zloirock/core-js',
    detect(ctx) {
        const versions = ctx.win['__core-js_shared__']?.versions;
        if (Array.isArray(versions) && versions.length) {
            return { version: [...new Set(versions.map(entry => entry.version))].join(', '), evidence: "window['__core-js_shared__'].versions" };
        }
        return ctx.globalVersion('core.version');
    }
});


==============================================================================
detect/js/cyclejs.js  (12 lines)
==============================================================================

// Cycle.js: run() puts the app's sinks on window.Cyclejs (with adaptStream), even when bundled. No version
window[Symbol.for('dosson')].frameworks.add({
    id: 'cyclejs', name: 'Cycle.js', kind: 'js', href: 'https://cycle.js.org', npm: '@cycle/run', github: 'cyclejs/cyclejs',
    detect(ctx) {
        const cycle = ctx.get('Cyclejs');
        if (cycle && typeof cycle === 'object' && (cycle.sinks || typeof cycle.adaptStream === 'function')) {
            const fromUrl = ctx.fromUrl('@cycle/run');
            return { version: fromUrl?.version, evidence: cycle.sinks ? 'window.Cyclejs.sinks' : 'window.Cyclejs.adaptStream' };
        }
        return null;
    }
});


==============================================================================
detect/js/d3.js  (5 lines)
==============================================================================

// D3
window[Symbol.for('dosson')].frameworks.add({
    id: 'd3', name: 'D3', kind: 'js', href: 'https://d3js.org', npm: 'd3', github: 'd3/d3',
    detect: (ctx) => typeof ctx.get('d3.select') === 'function' ? ctx.globalVersion('d3.version') || { evidence: 'window.d3' } : null
});


==============================================================================
detect/js/datatables.js  (18 lines)
==============================================================================

// DataTables: DataTable.version (window.DataTable, 2+) or jQuery.fn.dataTable.version, else the wrapper around each
// table.dataTable: dt-container (2+) or dataTables_wrapper (1.x)
window[Symbol.for('dosson')].frameworks.add({
    id: 'datatables', name: 'DataTables', kind: 'js', href: 'https://datatables.net', npm: 'datatables.net', github: 'DataTables/DataTables',
    detect(ctx) {
        for (const path of ['DataTable', 'jQuery.fn.dataTable']) {
            const DataTable = ctx.get(path);
            if (typeof DataTable === 'function' && typeof DataTable.isDataTable === 'function') {
                return ctx.globalVersion(`${path}.version`) || { evidence: `window.${path}` };
            }
        }
        const version = ctx.fromUrl('datatables.net')?.version;
        if (ctx.query('.dt-container table.dataTable')) {
            return { version: version || '≥2', evidence: 'dt-container class' };
        }
        return ctx.query('.dataTables_wrapper table.dataTable') ? { version: version || '1.x', evidence: 'dataTables_wrapper class' } : null;
    }
});


==============================================================================
detect/js/dayjs.js  (12 lines)
==============================================================================

// Day.js: window.dayjs (a function with extend and isDayjs). It has no version: only a URL gives it
window[Symbol.for('dosson')].frameworks.add({
    id: 'dayjs', name: 'Day.js', kind: 'js', href: 'https://day.js.org', npm: 'dayjs', github: 'iamkun/dayjs',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('dayjs');
        const dayjs = ctx.get('dayjs');
        if (typeof dayjs === 'function' && typeof dayjs.extend === 'function' && typeof dayjs.isDayjs === 'function') {
            return fromUrl ? { version: fromUrl.version, evidence: `window.dayjs, ${fromUrl.evidence}` } : { evidence: 'window.dayjs' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/devextreme.js  (20 lines)
==============================================================================

// DevExtreme: DevExpress.VERSION (dx.all.js), else the dx-widget class of its widgets, with the dxRemoveEvent expando
// they get (or dx-device-* on the viewport, older versions)
window[Symbol.for('dosson')].frameworks.add({
    id: 'devextreme', name: 'DevExtreme', kind: 'js', href: 'https://js.devexpress.com', npm: 'devextreme', github: 'DevExpress/DevExtreme',
    detect(ctx) {
        const global = ctx.globalVersion('DevExpress.VERSION');
        if (global && ctx.get('DevExpress.ui')) {
            return global;
        }
        const widget = ctx.query('.dx-widget');
        if (!widget) {
            return null;
        }
        const fromUrl = ctx.fromUrl('devextreme-dist') || ctx.fromUrl('devextreme');
        if (Object.prototype.hasOwnProperty.call(widget, 'dxRemoveEvent')) {
            return fromUrl || { evidence: 'dx-widget class with dxRemoveEvent' };
        }
        return ctx.classesMatching(/^dx-device-/).length ? fromUrl || { evidence: 'dx-widget and dx-device-* classes' } : null;
    }
});


==============================================================================
detect/js/docusaurus.js  (14 lines)
==============================================================================

// Docusaurus renders into #__docusaurus, puts its prefetcher on window.docusaurus and its version in the generator meta
window[Symbol.for('dosson')].frameworks.add({
    id: 'docusaurus', name: 'Docusaurus', kind: 'js', href: 'https://docusaurus.io', npm: '@docusaurus/core', github: 'facebook/docusaurus',
    detect(ctx) {
        const generator = ctx.generator(/^Docusaurus(?:\s+v?([\d.]+))?/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        if (typeof ctx.get('docusaurus.prefetch') === 'function') {
            return { evidence: 'window.docusaurus' };
        }
        return ctx.query('#__docusaurus') ? { evidence: '<div id="__docusaurus">' } : null;
    }
});


==============================================================================
detect/js/dojo.js  (11 lines)
==============================================================================

// Dojo Toolkit: dojo.version is an object ({ major, minor, patch… }) that prints as "1.17.3"
window[Symbol.for('dosson')].frameworks.add({
    id: 'dojo', name: 'Dojo', kind: 'js', href: 'https://dojotoolkit.org', npm: 'dojo', github: 'dojo/dojo',
    detect(ctx) {
        const version = ctx.get('dojo.version');
        if (!version) {
            return ctx.fromUrl('dojo') || null;
        }
        return { version: ctx.version(String(version).trim().split(' ')[0]), evidence: 'window.dojo.version' };
    }
});


==============================================================================
detect/js/dompurify.js  (10 lines)
==============================================================================

// DOMPurify: window.DOMPurify.version, or its URL. Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'dompurify', name: 'DOMPurify', kind: 'js', href: 'https://github.com/cure53/DOMPurify', npm: 'dompurify', github: 'cure53/DOMPurify',
    detect(ctx) {
        if (typeof ctx.get('DOMPurify.sanitize') === 'function') {
            return ctx.globalVersion('DOMPurify.version') || ctx.fromUrl('dompurify') || { evidence: 'window.DOMPurify' };
        }
        return ctx.fromUrl('dompurify') || null;
    }
});


==============================================================================
detect/js/draftjs.js  (14 lines)
==============================================================================

// Draft.js renders .DraftEditor-root around a contenteditable .public-DraftEditor-content; UMD builds set window.Draft
window[Symbol.for('dosson')].frameworks.add({
    id: 'draftjs', name: 'Draft.js', kind: 'js', href: 'https://draftjs.org', npm: 'draft-js', github: 'facebookarchive/draft-js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('draft-js');
        if (ctx.hasClass('DraftEditor-root') && ctx.query('.DraftEditor-root .public-DraftEditor-content')) {
            return { version: fromUrl?.version, evidence: '.DraftEditor-root' };
        }
        if (typeof ctx.get('Draft.EditorState.createEmpty') === 'function') {
            return { version: fromUrl?.version, evidence: 'window.Draft' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/dropzone.js  (15 lines)
==============================================================================

// Dropzone: window.Dropzone.version, else the element.dropzone instance it keeps on each drop zone (bundled)
window[Symbol.for('dosson')].frameworks.add({
    id: 'dropzone', name: 'Dropzone', kind: 'js', href: 'https://www.dropzone.dev', npm: 'dropzone', github: 'enyo/dropzone',
    detect(ctx) {
        const Dropzone = ctx.get('Dropzone');
        if (typeof Dropzone === 'function' && typeof Dropzone.discover === 'function') {
            return ctx.globalVersion('Dropzone.version') || ctx.fromUrl('dropzone') || { evidence: 'window.Dropzone' };
        }
        const found = ctx.expando(/^dropzone$/);
        if (found && found.value && Array.isArray(found.value.files) && found.value.options) {
            return { version: found.value.constructor?.version || ctx.fromUrl('dropzone')?.version, evidence: 'element.dropzone instance' };
        }
        return null;
    }
});


==============================================================================
detect/js/echarts.js  (14 lines)
==============================================================================

// ECharts: echarts.version (UMD), else the _echarts_instance_ attribute it sets on every chart's container
window[Symbol.for('dosson')].frameworks.add({
    id: 'echarts', name: 'ECharts', kind: 'js', href: 'https://echarts.apache.org', npm: 'echarts', github: 'apache/echarts',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('echarts');
        if (typeof ctx.get('echarts.init') === 'function') {
            return ctx.globalVersion('echarts.version') || fromUrl || { evidence: 'window.echarts' };
        }
        if (ctx.hasAttribute(/^_echarts_instance_$/)) {
            return fromUrl || { evidence: '_echarts_instance_ attribute' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/elm.js  (20 lines)
==============================================================================

// Elm: window.Elm holds each compiled module (Elm.Main.init in 0.19, embed / fullscreen before). A bundled app has no
// global, but 0.19's virtual DOM keeps event handlers on nodes (elmFs)
window[Symbol.for('dosson')].frameworks.add({
    id: 'elm', name: 'Elm', kind: 'js', href: 'https://elm-lang.org', github: 'elm/compiler',
    detect(ctx) {
        const elm = ctx.get('Elm');
        if (elm && typeof elm === 'object') {
            const modules = Object.keys(elm);
            const has = (method) => modules.some(name => typeof elm[name]?.[method] === 'function');
            if (has('init')) {
                return { version: '0.19.x', evidence: `window.Elm (${modules.join(', ')})` };
            }
            if (has('embed') || has('fullscreen')) {
                return { version: '≤0.18', evidence: `window.Elm (${modules.join(', ')})` };
            }
        }
        const handlers = ctx.expando(/^elmFs$/);
        return handlers ? { version: '0.19.x', evidence: `elmFs on <${handlers.element.localName}>` } : null;
    }
});


==============================================================================
detect/js/ember.js  (18 lines)
==============================================================================

// Ember. Newer apps have no window.Ember, but their loader still holds the 'ember' module
window[Symbol.for('dosson')].frameworks.add({
    id: 'ember', name: 'Ember.js', kind: 'js', href: 'https://emberjs.com', npm: 'ember-source', github: 'emberjs/ember.js',
    detect(ctx) {
        const version = ctx.globalVersion('Ember.VERSION');
        if (version) {
            return version;
        }
        const requirejs = ctx.get('requirejs');
        if (requirejs?.entries?.ember) {
            try {
                const ember = requirejs('ember');
                return { version: ctx.version((ember.default || ember).VERSION), evidence: "requirejs('ember').VERSION" };
            } catch (e) { }
        }
        return ctx.hasClass('ember-application', 'ember-view') ? { evidence: 'ember-view classes' } : null;
    }
});


==============================================================================
detect/js/extjs.js  (19 lines)
==============================================================================

// Ext JS (Sencha)
window[Symbol.for('dosson')].frameworks.add({
    id: 'extjs', name: 'Ext JS', kind: 'js', href: 'https://www.sencha.com/products/extjs/',
    detect(ctx) {
        const ext = ctx.get('Ext');
        if (!ext || typeof ext !== 'object') {
            return null;
        }
        // Sencha Touch shares window.Ext: it sets Ext.versions.touch, and no extjs version
        if (ext.versions?.touch && !ext.versions.extjs) {
            return null;
        }
        let version;
        try {
            version = ext.getVersion?.().version;
        } catch (e) { }
        return { version: ctx.version(version || ext.version), evidence: 'window.Ext' };
    }
});


==============================================================================
detect/js/fabric.js  (17 lines)
==============================================================================

// Fabric.js: window.fabric.version, else the canvases it wraps: data-fabric="main" (6+), lower-canvas in a canvas-container (≤5)
window[Symbol.for('dosson')].frameworks.add({
    id: 'fabric', name: 'Fabric.js', kind: 'js', href: 'https://fabricjs.com', npm: 'fabric', github: 'fabricjs/fabric.js',
    detect(ctx) {
        if (typeof ctx.get('fabric.Canvas') === 'function') {
            return ctx.globalVersion('fabric.version') || { evidence: 'window.fabric' };
        }
        const fromUrl = ctx.fromUrl('fabric');
        if (ctx.query('canvas[data-fabric="main"]')) {
            return { version: fromUrl?.version || '≥6', evidence: 'data-fabric="main" on a <canvas>' };
        }
        if (ctx.query('.canvas-container > canvas.lower-canvas + canvas.upper-canvas')) {
            return { version: fromUrl?.version || '≤5', evidence: 'lower-canvas and upper-canvas in a canvas-container' };
        }
        return null;
    }
});


==============================================================================
detect/js/fancybox.js  (21 lines)
==============================================================================

// Fancybox 4+ (window.Fancybox.version, or .fancybox__container while open), Fancybox 1–3 (jQuery.fancybox.version),
// else the data-fancybox attribute its galleries use
window[Symbol.for('dosson')].frameworks.add({
    id: 'fancybox', name: 'Fancybox', kind: 'js', href: 'https://fancyapps.com/fancybox/', npm: '@fancyapps/ui', github: 'fancyapps/ui',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@fancyapps/ui') || ctx.fromUrl('fancybox');
        if (typeof ctx.get('Fancybox.show') === 'function') {
            return ctx.globalVersion('Fancybox.version') || { version: fromUrl?.version || '≥4', evidence: 'window.Fancybox' };
        }
        if (typeof ctx.get('jQuery.fancybox.open') === 'function') {
            return ctx.globalVersion('jQuery.fancybox.version') || fromUrl || { evidence: 'jQuery.fancybox' };
        }
        if (ctx.hasClass('fancybox__container')) {
            return { version: fromUrl?.version || '≥4', evidence: 'fancybox__container class' };
        }
        if (ctx.hasClass('fancybox-container')) {
            return { version: fromUrl?.version || '3.x', evidence: 'fancybox-container class' };
        }
        return ctx.hasAttribute(/^data-fancybox$/) ? fromUrl || { evidence: 'data-fancybox attribute' } : null;
    }
});


==============================================================================
detect/js/filepond.js  (11 lines)
==============================================================================

// FilePond: window.FilePond (no version in it), else the filepond--root class of each FilePond instance
window[Symbol.for('dosson')].frameworks.add({
    id: 'filepond', name: 'FilePond', kind: 'js', href: 'https://pqina.nl/filepond/', npm: 'filepond', github: 'pqina/filepond',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('filepond');
        if (typeof ctx.get('FilePond.create') === 'function' && typeof ctx.get('FilePond.registerPlugin') === 'function') {
            return fromUrl || { evidence: 'window.FilePond' };
        }
        return ctx.hasClass('filepond--root') ? { version: fromUrl?.version, evidence: 'filepond--root class' } : null;
    }
});


==============================================================================
detect/js/flatpickr.js  (16 lines)
==============================================================================

// Flatpickr: window.flatpickr (with l10ns), else the instance it keeps on its input (_flatpickr). No version in the
// code: it comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'flatpickr', name: 'Flatpickr', kind: 'js', href: 'https://flatpickr.js.org', npm: 'flatpickr', github: 'flatpickr/flatpickr',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('flatpickr');
        const global = ctx.get('flatpickr');
        if (typeof global === 'function' && global.l10ns && global.defaultConfig) {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.flatpickr, ${fromUrl.evidence}` : 'window.flatpickr' };
        }
        if (ctx.hasClass('flatpickr-calendar') && ctx.query('.flatpickr-input')?._flatpickr) {
            return { version: fromUrl?.version, evidence: '_flatpickr on .flatpickr-input' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/flickity.js  (16 lines)
==============================================================================

// Flickity: window.Flickity (a function with data and defaults), else the flickity-enabled class and flickityGUID it
// puts on each carousel. It has no version: only a URL gives it
window[Symbol.for('dosson')].frameworks.add({
    id: 'flickity', name: 'Flickity', kind: 'js', href: 'https://flickity.metafizzy.co', npm: 'flickity', github: 'metafizzy/flickity',
    detect(ctx) {
        const version = ctx.fromUrl('flickity')?.version;
        const Flickity = ctx.get('Flickity');
        if (typeof Flickity === 'function' && typeof Flickity.data === 'function' && Flickity.defaults) {
            return { version, evidence: 'window.Flickity' };
        }
        if (ctx.hasClass('flickity-enabled') && ctx.query('.flickity-enabled')?.flickityGUID) {
            return { version, evidence: 'flickity-enabled class, flickityGUID' };
        }
        return null;
    }
});


==============================================================================
detect/js/floating-ui.js  (11 lines)
==============================================================================

// Floating UI: the UMD global FloatingUIDOM, or its URL. Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'floating-ui', name: 'Floating UI', kind: 'js', href: 'https://floating-ui.com', npm: '@floating-ui/dom', github: 'floating-ui/floating-ui',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@floating-ui/dom');
        if (typeof ctx.get('FloatingUIDOM.computePosition') === 'function' && typeof ctx.get('FloatingUIDOM.autoUpdate') === 'function') {
            return fromUrl || { evidence: 'window.FloatingUIDOM' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/flutter.js  (13 lines)
==============================================================================

// Flutter web: window._flutter.loader (flutter.js), _flutter.buildConfig since flutter_bootstrap.js (3.22), and the
// <flutter-view> / <flt-glass-pane> the engine renders into
window[Symbol.for('dosson')].frameworks.add({
    id: 'flutter', name: 'Flutter web', kind: 'js', href: 'https://flutter.dev/multi-platform/web', github: 'flutter/flutter',
    detect(ctx) {
        const loader = ctx.get('_flutter.loader');
        if (loader && (typeof loader.load === 'function' || typeof loader.loadEntrypoint === 'function')) {
            return { version: ctx.get('_flutter.buildConfig.builds') ? '≥3.22' : undefined, evidence: 'window._flutter.loader' };
        }
        const tag = ['flutter-view', 'flt-glass-pane'].find(name => ctx.tags.has(name));
        return tag ? { evidence: `<${tag}> element` } : null;
    }
});


==============================================================================
detect/js/framer-motion.js  (22 lines)
==============================================================================

// Framer Motion (Motion for React): window.MotionIsMounted once a motion component mounts (11.11+), data-projection-id (≤10.12),
// else the MotionConfigContext its motion components read ({ transformPagePoint, isStatic… }, since 2), from the React fibers
window[Symbol.for('dosson')].frameworks.add({
    id: 'framer-motion', name: 'Framer Motion', kind: 'js', href: 'https://motion.dev', npm: 'framer-motion', github: 'motiondivision/motion',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('framer-motion');
        if (ctx.get('MotionIsMounted') === true) {
            return { version: fromUrl?.version || '≥11.11', evidence: 'window.MotionIsMounted' };
        }
        if (ctx.hasAttribute(/^data-projection-id$/)) {
            return { version: fromUrl?.version || '≤10.12', evidence: 'data-projection-id attribute' };
        }
        const config = ctx.reactComponents().contexts.find(context => {
            const value = context?._currentValue;
            return value && typeof value === 'object' && typeof value.transformPagePoint === 'function' && typeof value.isStatic === 'boolean';
        });
        if (config) {
            return { version: fromUrl?.version, evidence: 'MotionConfigContext read by a motion component' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/framework7.js  (17 lines)
==============================================================================

// Framework7: window.Framework7 (bundle), else the app it starts: framework7-root class with the app in its f7 expando.
// Neither gives the version, only the URL does
window[Symbol.for('dosson')].frameworks.add({
    id: 'framework7', name: 'Framework7', kind: 'js', href: 'https://framework7.io', npm: 'framework7', github: 'framework7io/framework7',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('framework7');
        const global = ctx.get('Framework7');
        if (typeof global === 'function' && typeof global.Dom7 === 'function') {
            return fromUrl || { evidence: 'window.Framework7' };
        }
        const root = ctx.query('.framework7-root');
        if (root && root.f7 && typeof root.f7 === 'object') {
            return fromUrl || { evidence: 'f7 app on .framework7-root' };
        }
        return null;
    }
});


==============================================================================
detect/js/fresh.js  (19 lines)
==============================================================================

// Fresh (Deno): 2.x boots from /_fresh/js/<build>/fresh-runtime.js, 1.x from /_frsh/js/ with <script id="__FRSH_STATE">
window[Symbol.for('dosson')].frameworks.add({
    id: 'fresh', name: 'Fresh', kind: 'js', href: 'https://fresh.deno.dev', github: 'freshframework/fresh',
    detect(ctx) {
        const v2 = ctx.url(/\/_fresh\/js\/[^/]+\/fresh-runtime\.js/);
        if (v2) {
            return { version: '2.x', evidence: `loaded from ${v2.split(/[?#]/)[0]}` };
        }
        const v1 = ctx.url(/\/_frsh\/(?:js|refresh\.js)/);
        if (v1) {
            return { version: '1.x', evidence: `loaded from ${v1.split(/[?#]/)[0]}` };
        }
        if (ctx.query('script#__FRSH_STATE[type="application/json"]')) {
            return { version: '1.x', evidence: '<script id="__FRSH_STATE">' };
        }
        const partial = ctx.query('script[id^="__FRSH_STATE_"][type="application/json"]');
        return partial ? { version: '2.x', evidence: `<script id="${partial.id}">` } : null;
    }
});


==============================================================================
detect/js/fusejs.js  (12 lines)
==============================================================================

// Fuse.js: window.Fuse.version, or its URL. Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'fusejs', name: 'Fuse.js', kind: 'js', href: 'https://www.fusejs.io', npm: 'fuse.js', github: 'krisk/Fuse',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('fuse.js');
        const Fuse = ctx.get('Fuse');
        if (typeof Fuse === 'function' && (typeof Fuse.createIndex === 'function' || ctx.version(Fuse.version))) {
            return ctx.globalVersion('Fuse.version') || fromUrl || { evidence: 'window.Fuse' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/gatsby.js  (11 lines)
==============================================================================

// Gatsby renders into #___gatsby
window[Symbol.for('dosson')].frameworks.add({
    id: 'gatsby', name: 'Gatsby', kind: 'js', href: 'https://www.gatsbyjs.com', npm: 'gatsby', github: 'gatsbyjs/gatsby',
    detect(ctx) {
        if (!ctx.query('#___gatsby') && !ctx.get('___loader')) {
            return null;
        }
        const generator = ctx.generator(/Gatsby\s+v?([\d.]+)/i);
        return { version: generator?.[1], evidence: generator ? '<meta name="generator">' : '<div id="___gatsby">' };
    }
});


==============================================================================
detect/js/glide.js  (11 lines)
==============================================================================

// Glide.js gives each mounted slider glide--slider or glide--carousel, and glide--ltr or glide--rtl (even when bundled)
window[Symbol.for('dosson')].frameworks.add({
    id: 'glide', name: 'Glide.js', kind: 'js', href: 'https://glidejs.com', npm: '@glidejs/glide', github: 'glidejs/glide',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('glide');
        if (ctx.hasClass('glide--slider', 'glide--carousel') && ctx.hasClass('glide--ltr', 'glide--rtl')) {
            return { version: fromUrl?.version, evidence: 'glide--slider / glide--carousel classes' };
        }
        return typeof ctx.get('Glide') === 'function' && typeof ctx.get('Glide.prototype.mount') === 'function' ? fromUrl || { evidence: 'window.Glide' } : null;
    }
});


==============================================================================
detect/js/google-charts.js  (14 lines)
==============================================================================

// Google Charts: loader.js sets google.charts.load, then google.visualization once a package is loaded (old jsapi too)
window[Symbol.for('dosson')].frameworks.add({
    id: 'google-charts', name: 'Google Charts', kind: 'js', href: 'https://developers.google.com/chart',
    detect(ctx) {
        const charts = typeof ctx.get('google.charts.load') === 'function';
        const visualization = typeof ctx.get('google.visualization.DataTable') === 'function';
        if (!charts && !visualization) {
            return null;
        }
        // www.gstatic.com/charts/<release>/js/… once a package is loaded
        const url = ctx.url(/\/\/www\.gstatic\.com\/charts\/\d+(\.\d+)*\//);
        return { version: url?.match(/\/charts\/([\d.]+)\//)[1], evidence: visualization ? 'window.google.visualization' : 'window.google.charts' };
    }
});


==============================================================================
detect/js/google-maps.js  (13 lines)
==============================================================================

// Google Maps JavaScript API: google.maps.version, else the gm-style container it renders each map in
window[Symbol.for('dosson')].frameworks.add({
    id: 'google-maps', name: 'Google Maps JS', kind: 'js', href: 'https://developers.google.com/maps/documentation/javascript',
    detect(ctx) {
        if (ctx.get('google.maps') && (typeof ctx.get('google.maps.Map') === 'function' || typeof ctx.get('google.maps.importLibrary') === 'function')) {
            return ctx.globalVersion('google.maps.version') || { evidence: 'window.google.maps' };
        }
        if (ctx.url(/^https:\/\/maps\.googleapis\.com\/maps\/api\/js/)) {
            return { evidence: 'loaded from maps.googleapis.com/maps/api/js' };
        }
        return ctx.hasClass('gm-style') && ctx.query('.gm-style > div') ? { evidence: 'gm-style class' } : null;
    }
});


==============================================================================
detect/js/gridsome.js  (8 lines)
==============================================================================

// Gridsome writes <meta name="generator" content="Gridsome v0.7.23"> on every page it renders
window[Symbol.for('dosson')].frameworks.add({
    id: 'gridsome', name: 'Gridsome', kind: 'js', href: 'https://gridsome.org', npm: 'gridsome', github: 'gridsome/gridsome',
    detect(ctx) {
        const generator = ctx.generator(/Gridsome\s+v?(\d[\w.-]*)/i);
        return generator ? { version: generator[1], evidence: '<meta name="generator">' } : null;
    }
});


==============================================================================
detect/js/gsap.js  (23 lines)
==============================================================================

// GSAP (GreenSock). Before 3, TweenMax / TweenLite. A bundled GSAP has no window.gsap, but its core still pushes its
// version on window.gsapVersions, and plugins loaded as scripts (ScrollTrigger…) carry the same version
window[Symbol.for('dosson')].frameworks.add({
    id: 'gsap', name: 'GSAP', kind: 'js', href: 'https://gsap.com', npm: 'gsap', github: 'greensock/GSAP',
    detect: (ctx) => {
        const direct = ctx.globalVersion('gsap.version') || ctx.globalVersion('TweenMax.version') || ctx.globalVersion('TweenLite.version');
        if (direct) {
            return direct;
        }
        const versions = ctx.get('gsapVersions');
        const registered = Array.isArray(versions) ? versions.map(ctx.version).find(Boolean) : undefined;
        if (registered) {
            return { version: registered, evidence: 'window.gsapVersions' };
        }
        for (const plugin of ['ScrollTrigger', 'ScrollToPlugin', 'ScrollSmoother', 'MotionPathPlugin', 'TextPlugin', 'DrawSVGPlugin', 'MorphSVGPlugin', 'SplitText']) {
            const found = ctx.globalVersion(plugin + '.version');
            if (found) {
                return found;
            }
        }
        return ctx.fromUrl('gsap');
    }
});


==============================================================================
detect/js/gwt.js  (20 lines)
==============================================================================

// GWT: the bootstrap script (<module>.nocache.js) defines __gwt_getMetaProperty, __gwt_isKnownPropertyValue and
// __gwt_stylesLoaded on the page; the xsiframe linker also lists modules in __gwt_activeModules. No version anywhere
window[Symbol.for('dosson')].frameworks.add({
    id: 'gwt', name: 'GWT', kind: 'js', href: 'https://www.gwtproject.org', github: 'gwtproject/gwt',
    detect(ctx) {
        const modules = ctx.get('__gwt_activeModules');
        if (modules && typeof modules === 'object' && Object.keys(modules).length) {
            return { evidence: `window.__gwt_activeModules (${Object.keys(modules).join(', ')})` };
        }
        if (typeof ctx.get('__gwt_getMetaProperty') === 'function' || typeof ctx.get('__gwt_isKnownPropertyValue') === 'function') {
            return { evidence: 'window.__gwt_getMetaProperty' };
        }
        const marker = ctx.query('script[id^="__gwt_marker_"]');
        if (marker) {
            return { evidence: `<script id="${marker.id}">` };
        }
        const url = ctx.url(/\.nocache\.js(?:[?#]|$)/);
        return url && ctx.get('__gwt_stylesLoaded') ? { evidence: `loaded ${url.split(/[?#]/)[0]}` } : null;
    }
});


==============================================================================
detect/js/hammerjs.js  (13 lines)
==============================================================================

// Hammer.js: window.Hammer (a function with Manager and Recognizer). The URL comes first: 2.0.8 still says 2.0.7 in
// Hammer.VERSION
window[Symbol.for('dosson')].frameworks.add({
    id: 'hammerjs', name: 'Hammer.js', kind: 'js', href: 'https://hammerjs.github.io', npm: 'hammerjs', github: 'hammerjs/hammer.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('hammerjs') || ctx.fromUrl('hammer.js');
        const Hammer = ctx.get('Hammer');
        if (typeof Hammer === 'function' && typeof Hammer.Manager === 'function' && typeof Hammer.Recognizer === 'function') {
            return fromUrl || ctx.globalVersion('Hammer.VERSION') || { evidence: 'window.Hammer' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/handlebars.js  (10 lines)
==============================================================================

// Handlebars (full or runtime build): Handlebars.VERSION with Handlebars.template
window[Symbol.for('dosson')].frameworks.add({
    id: 'handlebars', name: 'Handlebars', kind: 'js', href: 'https://handlebarsjs.com', npm: 'handlebars', github: 'handlebars-lang/handlebars.js',
    detect(ctx) {
        if (typeof ctx.get('Handlebars.template') === 'function') {
            return ctx.globalVersion('Handlebars.VERSION') || ctx.fromUrl('handlebars') || { evidence: 'window.Handlebars' };
        }
        return ctx.fromUrl('handlebars') || null;
    }
});


==============================================================================
detect/js/handsontable.js  (13 lines)
==============================================================================

// Handsontable: Handsontable.version (UMD build), else the ht_master class of every table it renders (bundled)
window[Symbol.for('dosson')].frameworks.add({
    id: 'handsontable', name: 'Handsontable', kind: 'js', href: 'https://handsontable.com', npm: 'handsontable', github: 'handsontable/handsontable',
    detect(ctx) {
        if (typeof ctx.get('Handsontable') === 'function') {
            return ctx.globalVersion('Handsontable.version') || { evidence: 'window.Handsontable' };
        }
        if (ctx.hasClass('ht_master') && ctx.hasClass('handsontable')) {
            return ctx.fromUrl('handsontable') || { evidence: 'handsontable and ht_master classes' };
        }
        return null;
    }
});


==============================================================================
detect/js/highcharts.js  (5 lines)
==============================================================================

// Highcharts
window[Symbol.for('dosson')].frameworks.add({
    id: 'highcharts', name: 'Highcharts', kind: 'js', href: 'https://www.highcharts.com', npm: 'highcharts', github: 'highcharts/highcharts',
    detect: (ctx) => ctx.globalVersion('Highcharts.version')
});


==============================================================================
detect/js/highlightjs.js  (14 lines)
==============================================================================

// highlight.js: hljs.versionString (CDN build), else the hljs and hljs-* classes it puts on the code it highlights
window[Symbol.for('dosson')].frameworks.add({
    id: 'highlightjs', name: 'highlight.js', kind: 'js', href: 'https://highlightjs.org', npm: 'highlight.js', github: 'highlightjs/highlight.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('highlight.js') || ctx.fromUrl('cdn-assets') || ctx.fromUrl('cdn-release');
        if (typeof ctx.get('hljs.highlightElement') === 'function' || typeof ctx.get('hljs.highlightBlock') === 'function') {
            return ctx.globalVersion('hljs.versionString') || fromUrl || { evidence: 'window.hljs' };
        }
        if (ctx.hasClass('hljs') && ctx.classesMatching(/^hljs-(keyword|string|title|comment|number|attr|built_in|literal|tag|name)$/).length) {
            return { version: fromUrl?.version, evidence: 'hljs, hljs-* classes' };
        }
        return null;
    }
});


==============================================================================
detect/js/hlsjs.js  (10 lines)
==============================================================================

// hls.js: Hls.version (CDN build). Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'hlsjs', name: 'hls.js', kind: 'js', href: 'https://github.com/video-dev/hls.js', npm: 'hls.js', github: 'video-dev/hls.js',
    detect(ctx) {
        if (typeof ctx.get('Hls') === 'function' && typeof ctx.get('Hls.isSupported') === 'function') {
            return ctx.globalVersion('Hls.version') || ctx.fromUrl('hls.js') || { evidence: 'window.Hls' };
        }
        return ctx.fromUrl('hls.js') || null;
    }
});


==============================================================================
detect/js/howler.js  (10 lines)
==============================================================================

// Howler.js always sets window.Howler (even bundled) and window.Howl. No version: the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'howler', name: 'Howler.js', kind: 'js', href: 'https://howlerjs.com', npm: 'howler', github: 'goldfire/howler.js',
    detect(ctx) {
        if (typeof ctx.get('Howl') !== 'function' || !Array.isArray(ctx.get('Howler._howls'))) {
            return null;
        }
        return ctx.fromUrl('howler') || { evidence: 'window.Howler' };
    }
});


==============================================================================
detect/js/htmx.js  (5 lines)
==============================================================================

// htmx
window[Symbol.for('dosson')].frameworks.add({
    id: 'htmx', name: 'htmx', kind: 'js', href: 'https://htmx.org', npm: 'htmx.org', github: 'bigskysoftware/htmx',
    detect: (ctx) => ctx.globalVersion('htmx.version') || ctx.fromUrl('htmx.org') || ctx.fromUrl('htmx')
});


==============================================================================
detect/js/hyperapp.js  (23 lines)
==============================================================================

// Hyperapp: window.hyperapp (1.x UMD build) or the URL (2.x is imported as a module). Otherwise only the handlers
// it keeps on elements (events: { click: action }), which other code could name the same: low confidence
window[Symbol.for('dosson')].frameworks.add({
    id: 'hyperapp', name: 'Hyperapp', kind: 'js', href: 'https://github.com/jorgebucaran/hyperapp', npm: 'hyperapp', github: 'jorgebucaran/hyperapp',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('hyperapp');
        if (fromUrl) {
            return fromUrl;
        }
        if (typeof ctx.get('hyperapp.app') === 'function' && typeof ctx.get('hyperapp.h') === 'function') {
            return { version: '1.x', evidence: 'window.hyperapp' };
        }
        const events = ctx.expando(/^events$/);
        const value = events?.value;
        if (value && typeof value === 'object' && Object.getPrototypeOf(value) === ctx.win.Object.prototype) {
            const types = Object.keys(value);
            if (types.length && types.every(type => /^[a-z]+$/.test(type) && ('on' + type) in events.element && value[type] != null)) {
                return { evidence: `events on <${events.element.localName}> (Hyperapp's handlers)` };
            }
        }
        return null;
    }
});


==============================================================================
detect/js/immutable.js  (10 lines)
==============================================================================

// Immutable.js: window.Immutable (UMD build) with Map, List (Vector in 2.x) and version (since 3.x)
window[Symbol.for('dosson')].frameworks.add({
    id: 'immutable', name: 'Immutable.js', kind: 'js', href: 'https://immutable-js.com', npm: 'immutable', github: 'immutable-js/immutable-js',
    detect(ctx) {
        if (typeof ctx.get('Immutable.Map') === 'function' && typeof (ctx.get('Immutable.List') || ctx.get('Immutable.Vector')) === 'function') {
            return ctx.globalVersion('Immutable.version') || ctx.fromUrl('immutable') || { evidence: 'window.Immutable' };
        }
        return ctx.fromUrl('immutable') || null;
    }
});


==============================================================================
detect/js/inertia.js  (22 lines)
==============================================================================

// Inertia.js boots from the page object the server renders ({ component, props, url, version }): in
// <script data-page type="application/json"> (2.x+) or a <div data-page>, then keeps it in history.state.page
window[Symbol.for('dosson')].frameworks.add({
    id: 'inertia', name: 'Inertia.js', kind: 'js', href: 'https://inertiajs.com', npm: '@inertiajs/core', github: 'inertiajs/inertia',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@inertiajs/core');
        const isPage = (text) => /^\s*\{/.test(text || '') && /"component"\s*:/.test(text) && /"props"\s*:/.test(text);
        const script = ctx.query('script[data-page][type="application/json"]');
        if (script && isPage(script.textContent)) {
            return { version: fromUrl?.version, evidence: '<script data-page> page object' };
        }
        const element = ctx.query('[data-page^="{"]:not(script)');
        if (element && isPage(element.getAttribute('data-page'))) {
            return { version: fromUrl?.version, evidence: `<${element.localName} data-page> page object` };
        }
        const page = ctx.get('history.state.page');
        if (typeof page?.component === 'string' && page.props && 'version' in page) {
            return { version: fromUrl?.version, evidence: 'history.state.page' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/inferno.js  (17 lines)
==============================================================================

// Inferno: window.Inferno (UMD build), else, bundled, the root VNode that render() keeps on its container as $V
// (Inferno 4+; a VNode has numeric flags, its dom, type and props. Inferno 10 packs childFlags into flags)
window[Symbol.for('dosson')].frameworks.add({
    id: 'inferno', name: 'Inferno', kind: 'js', href: 'https://www.infernojs.org', npm: 'inferno', github: 'infernojs/inferno',
    detect(ctx) {
        const global = ctx.globalVersion('Inferno.version') || ctx.fromUrl('inferno');
        if (global) {
            return global;
        }
        const root = ctx.expando(/^\$V$/);
        const vnode = root?.value;
        if (vnode && typeof vnode.flags === 'number' && 'dom' in vnode && 'type' in vnode && 'props' in vnode) {
            return { evidence: `<${root.element.localName}>.$V (root VNode)` };
        }
        return null;
    }
});


==============================================================================
detect/js/inputmask.js  (16 lines)
==============================================================================

// Inputmask: window.Inputmask (set even when bundled, no version in it), else the inputmask instance on masked inputs
window[Symbol.for('dosson')].frameworks.add({
    id: 'inputmask', name: 'Inputmask', kind: 'js', href: 'https://robinherbots.github.io/Inputmask/', npm: 'inputmask', github: 'RobinHerbots/Inputmask',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('inputmask') || ctx.fromUrl('jquery.inputmask');
        const Inputmask = ctx.get('Inputmask');
        if (typeof Inputmask === 'function' && typeof Inputmask.extendAliases === 'function') {
            return fromUrl || { evidence: 'window.Inputmask' };
        }
        const found = ctx.expando(/^inputmask$/);
        if (found && found.value && typeof found.value.unmaskedvalue === 'function') {
            return { version: fromUrl?.version, evidence: 'element.inputmask instance' };
        }
        return null;
    }
});


==============================================================================
detect/js/instantsearch.js  (16 lines)
==============================================================================

// Algolia InstantSearch: instantsearch.version (CDN build), else the ais-* classes its widgets render (bundled, React/Vue InstantSearch)
window[Symbol.for('dosson')].frameworks.add({
    id: 'instantsearch', name: 'Algolia InstantSearch', kind: 'js', href: 'https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/js/', npm: 'instantsearch.js', github: 'algolia/instantsearch',
    detect(ctx) {
        const global = ctx.get('instantsearch');
        if (typeof global === 'function' && global.widgets && global.connectors) {
            return ctx.globalVersion('instantsearch.version') || { evidence: 'window.instantsearch' };
        }
        const widget = ['ais-InstantSearch', 'ais-SearchBox', 'ais-Hits', 'ais-InfiniteHits', 'ais-RefinementList', 'ais-Pagination', 'ais-HierarchicalMenu']
            .find(name => ctx.hasClass(name));
        if (widget) {
            return ctx.fromUrl('instantsearch.js') || { evidence: `${widget} class` };
        }
        return ctx.fromUrl('instantsearch.js') || null;
    }
});


==============================================================================
detect/js/interactjs.js  (11 lines)
==============================================================================

// interact.js: window.interact (a function with isSet and version). Bundled copies leave nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'interactjs', name: 'interact.js', kind: 'js', href: 'https://interactjs.io', npm: 'interactjs', github: 'taye/interact.js',
    detect(ctx) {
        const global = ctx.get('interact');
        if (typeof global === 'function' && typeof global.isSet === 'function') {
            return ctx.globalVersion('interact.version') || ctx.fromUrl('interactjs') || { evidence: 'window.interact' };
        }
        return ctx.fromUrl('interactjs') || ctx.fromUrl('@interactjs/interactjs') || null;
    }
});


==============================================================================
detect/js/intercooler.js  (14 lines)
==============================================================================

// intercooler.js: window.Intercooler (no version in it), else its ic-* request attributes. The version comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'intercooler', name: 'intercooler.js', kind: 'js', href: 'https://intercoolerjs.org', npm: 'intercooler', github: 'bigskysoftware/intercooler-js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('intercooler');
        if (typeof ctx.get('Intercooler.processNodes') === 'function' && typeof ctx.get('Intercooler.triggerRequest') === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.Intercooler, ${fromUrl.evidence}` : 'window.Intercooler' };
        }
        if (ctx.hasAttribute(/^(data-)?ic-(get-from|post-to|put-to|patch-to|delete-from|src)$/)) {
            return { version: fromUrl?.version, evidence: 'ic-get-from / ic-post-to… attributes' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/intl-tel-input.js  (16 lines)
==============================================================================

// intl-tel-input: intlTelInput.version (intlTelInputGlobals.version before 21, jQuery.fn.intlTelInput.version for the
// jQuery plugin up to 13), else its iti__ classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'intl-tel-input', name: 'intl-tel-input', kind: 'js', href: 'https://intl-tel-input.com', npm: 'intl-tel-input', github: 'jackocnr/intl-tel-input',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('intl-tel-input');
        if (typeof ctx.get('intlTelInput') === 'function' || ctx.get('intlTelInputGlobals')) {
            return ctx.globalVersion('intlTelInput.version') || ctx.globalVersion('intlTelInputGlobals.version') || fromUrl || { evidence: 'window.intlTelInput' };
        }
        if (typeof ctx.get('jQuery.fn.intlTelInput') === 'function') {
            return ctx.globalVersion('jQuery.fn.intlTelInput.version') || fromUrl || { evidence: 'jQuery.fn.intlTelInput' };
        }
        return ctx.hasClass('iti__country-list', 'iti__selected-country', 'iti__flag-container', 'iti__country-container')
            ? { version: fromUrl?.version, evidence: 'iti__ classes' } : null;
    }
});


==============================================================================
detect/js/ionic.js  (11 lines)
==============================================================================

// Ionic: window.Ionic.config and Ionic.mode (set by @ionic/core, even bundled with Angular, React or Vue), <ion-app>
window[Symbol.for('dosson')].frameworks.add({
    id: 'ionic', name: 'Ionic', kind: 'js', href: 'https://ionicframework.com', npm: '@ionic/core', github: 'ionic-team/ionic-framework',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@ionic/core');
        if (typeof ctx.get('Ionic.config.get') === 'function' && typeof ctx.get('Ionic.mode') === 'string') {
            return fromUrl || { evidence: 'window.Ionic.config' };
        }
        return ctx.tags.has('ion-app') ? fromUrl || { evidence: '<ion-app> element' } : fromUrl || null;
    }
});


==============================================================================
detect/js/isotope.js  (18 lines)
==============================================================================

// Isotope: window.Isotope (Outlayer.create('isotope')), or an element whose outlayerGUID expando is an Isotope
// (Isotope.data, or jQuery.data(element, 'isotope'))
window[Symbol.for('dosson')].frameworks.add({
    id: 'isotope', name: 'Isotope', kind: 'js', href: 'https://isotope.metafizzy.co', npm: 'isotope-layout', github: 'metafizzy/isotope',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('isotope-layout') || ctx.fromUrl('isotope');
        const Isotope = ctx.get('Isotope');
        if (typeof Isotope === 'function' && Isotope.namespace === 'isotope' && Isotope.LayoutMode) {
            return fromUrl || { evidence: 'window.Isotope' };
        }
        const grid = ctx.expando(/^outlayerGUID$/);
        const jQuery = ctx.get('jQuery');
        if (grid && typeof jQuery?.data === 'function' && jQuery.data(grid.element, 'isotope')) {
            return fromUrl || { evidence: 'jQuery.data(element, "isotope")' };
        }
        return null;
    }
});


==============================================================================
detect/js/jquery.js  (5 lines)
==============================================================================

// jQuery
window[Symbol.for('dosson')].frameworks.add({
    id: 'jquery', name: 'jQuery', kind: 'js', href: 'https://jquery.com', npm: 'jquery', github: 'jquery/jquery',
    detect: (ctx) => ctx.globalVersion('jQuery.fn.jquery') || ctx.fromUrl('jquery')
});


==============================================================================
detect/js/jquery-migrate.js  (5 lines)
==============================================================================

// jQuery Migrate: brings back what newer jQuery versions removed
window[Symbol.for('dosson')].frameworks.add({
    id: 'jquery-migrate', name: 'jQuery Migrate', kind: 'js', href: 'https://github.com/jquery/jquery-migrate', npm: 'jquery-migrate', github: 'jquery/jquery-migrate',
    detect: (ctx) => ctx.globalVersion('jQuery.migrateVersion') || ctx.fromUrl('jquery-migrate')
});


==============================================================================
detect/js/jquery-mobile.js  (11 lines)
==============================================================================

// jQuery Mobile sets jQuery.mobile.version, and ui-mobile on <html> with ui-mobile-viewport on its page container
window[Symbol.for('dosson')].frameworks.add({
    id: 'jquery-mobile', name: 'jQuery Mobile', kind: 'js', href: 'https://jquerymobile.com', npm: 'jquery-mobile', github: 'jquery-archive/jquery-mobile',
    detect(ctx) {
        const version = ctx.globalVersion('jQuery.mobile.version') || ctx.fromUrl('jquery.mobile') || ctx.fromUrl('jquery-mobile');
        if (version) {
            return version;
        }
        return ctx.doc.documentElement.classList.contains('ui-mobile') && ctx.hasClass('ui-mobile-viewport') ? { evidence: 'ui-mobile, ui-mobile-viewport classes' } : null;
    }
});


==============================================================================
detect/js/jquery-ui.js  (5 lines)
==============================================================================

// jQuery UI
window[Symbol.for('dosson')].frameworks.add({
    id: 'jquery-ui', name: 'jQuery UI', kind: 'js', href: 'https://jqueryui.com', npm: 'jquery-ui', github: 'jquery/jquery-ui',
    detect: (ctx) => ctx.globalVersion('jQuery.ui.version') || ctx.fromUrl('jquery-ui') || ctx.fromUrl('jqueryui')
});


==============================================================================
detect/js/jquery-validation.js  (12 lines)
==============================================================================

// jQuery Validation: jQuery.validator (no version in it), with its URL for the version
window[Symbol.for('dosson')].frameworks.add({
    id: 'jquery-validation', name: 'jQuery Validation', kind: 'js', href: 'https://jqueryvalidation.org', npm: 'jquery-validation', github: 'jquery-validation/jquery-validation',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('jquery-validation') || ctx.fromUrl('jquery-validate') || ctx.fromUrl('jquery.validate');
        const validator = ctx.get('jQuery.validator');
        if (typeof validator === 'function' && typeof validator.addMethod === 'function' && validator.methods) {
            return fromUrl || { evidence: 'jQuery.validator' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/js-cookie.js  (48 lines)
==============================================================================

// js-cookie: window.Cookies (UMD builds) with get, set, remove and withConverter. It has no version property: 3.x has
// withAttributes, 2.x has getJSON. Cookies.js (another library) has no withConverter. Bundled, it leaves only its banner
// ("js-cookie v3.0.5 | MIT", 2.x: "JavaScript Cookie v2.2.1") in the script's text, which survives most minifiers
window[Symbol.for('dosson')].frameworks.add({
    id: 'js-cookie', name: 'js-cookie', kind: 'js', href: 'https://github.com/js-cookie/js-cookie', npm: 'js-cookie', github: 'js-cookie/js-cookie',
    async detect(ctx) {
        const fromUrl = ctx.fromUrl('js-cookie') || ctx.fromUrl('js.cookie');
        const isFunction = name => typeof ctx.get(`Cookies.${name}`) === 'function';
        if (['get', 'set', 'remove', 'withConverter'].every(isFunction)) {
            if (fromUrl) {
                return { version: fromUrl.version, evidence: `window.Cookies, ${fromUrl.evidence}` };
            }
            const major = isFunction('withAttributes') ? '3.x' : isFunction('getJSON') ? '2.x' : undefined;
            return major ? { version: major, evidence: 'window.Cookies' } : { evidence: 'window.Cookies' };
        }
        if (fromUrl) {
            return fromUrl;
        }
        const banner = /\b(?:js-cookie|JavaScript Cookie) v(\d+\.\d+\.\d+)\b/i;
        const found = text => { const match = typeof text === 'string' && text.match(banner); return match ? match[1] : undefined; };
        for (const script of ctx.doc.scripts) {
            if (!script.src && (script.type || 'text/javascript').toLowerCase() !== 'application/json') {
                const version = found(script.textContent);
                if (version) {
                    return { version, evidence: 'banner in an inline script' };
                }
            }
        }
        // the page's script files, as the browser loaded them (Resource Timing also lists those added by scripts); the
        // files come from the cache, and one from another origin without CORS can't be read
        const files = [];
        try {
            ctx.win.performance.getEntriesByType('resource').forEach(entry => entry.initiatorType === 'script' && files.push(entry.name));
        } catch (e) { }
        Array.from(ctx.doc.scripts, script => script.src).forEach(src => src && files.push(src));
        const unique = [...new Set(files)].slice(0, 60);
        const results = await Promise.all(unique.map(async url => {
            try {
                const response = await ctx.win.fetch(url, { cache: 'force-cache', credentials: 'omit' });
                const version = response.ok ? found(await response.text()) : undefined;
                return version ? { version, evidence: `banner in ${url.split(/[?#]/)[0]}` } : undefined;
            } catch (e) {
                return undefined;
            }
        }));
        return results.find(Boolean) || null;
    }
});


==============================================================================
detect/js/katex.js  (14 lines)
==============================================================================

// KaTeX: window.katex.version, else what it renders: .katex holding .katex-html (also when bundled or rendered on the server)
window[Symbol.for('dosson')].frameworks.add({
    id: 'katex', name: 'KaTeX', kind: 'js', href: 'https://katex.org', npm: 'katex', github: 'KaTeX/KaTeX',
    detect(ctx) {
        if (typeof ctx.get('katex.render') === 'function') {
            // katex.version came with 0.10: before, the URL it was loaded from
            return ctx.globalVersion('katex.version') || ctx.fromUrl('katex') || { evidence: 'window.katex' };
        }
        if (ctx.query('.katex > .katex-html, .katex > .katex-mathml')) {
            return { version: ctx.fromUrl('katex')?.version, evidence: 'katex-html class' };
        }
        return null;
    }
});


==============================================================================
detect/js/kendo.js  (11 lines)
==============================================================================

// Kendo UI for jQuery: window.kendo with its version (date-based, 2024.3.1015), set by every build, CDN or npm
window[Symbol.for('dosson')].frameworks.add({
    id: 'kendo', name: 'Kendo UI', kind: 'js', href: 'https://www.telerik.com/kendo-jquery-ui', npm: '@progress/kendo-ui', github: 'telerik/kendo-ui-core',
    detect(ctx) {
        const kendo = ctx.get('kendo');
        if (!kendo || typeof kendo !== 'object' || typeof kendo.widgetInstance !== 'function') {
            return null;
        }
        return ctx.globalVersion('kendo.version') || { evidence: 'window.kendo' };
    }
});


==============================================================================
detect/js/knockout.js  (5 lines)
==============================================================================

// Knockout
window[Symbol.for('dosson')].frameworks.add({
    id: 'knockout', name: 'Knockout', kind: 'js', href: 'https://knockoutjs.com', npm: 'knockout', github: 'knockout/knockout',
    detect: (ctx) => ctx.globalVersion('ko.version') || ctx.fromUrl('knockout')
});


==============================================================================
detect/js/konva.js  (10 lines)
==============================================================================

// Konva sets window.Konva even when bundled (react-konva too), and each stage renders a div.konvajs-content
window[Symbol.for('dosson')].frameworks.add({
    id: 'konva', name: 'Konva', kind: 'js', href: 'https://konvajs.org', npm: 'konva', github: 'konvajs/konva',
    detect(ctx) {
        if (typeof ctx.get('Konva.Stage') === 'function') {
            return ctx.globalVersion('Konva.version') || { evidence: 'window.Konva' };
        }
        return ctx.hasClass('konvajs-content') ? { version: ctx.fromUrl('konva')?.version, evidence: 'konvajs-content class' } : null;
    }
});


==============================================================================
detect/js/lazysizes.js  (11 lines)
==============================================================================

// lazysizes always sets window.lazySizes (even bundled), with cfg and loader
window[Symbol.for('dosson')].frameworks.add({
    id: 'lazysizes', name: 'lazysizes', kind: 'js', href: 'https://github.com/aFarkas/lazysizes', npm: 'lazysizes', github: 'aFarkas/lazysizes',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('lazysizes');
        if (ctx.get('lazySizes.cfg') && typeof ctx.get('lazySizes.loader.unveil') === 'function') {
            return fromUrl || { evidence: 'window.lazySizes' };
        }
        return null;
    }
});


==============================================================================
detect/js/leaflet.js  (10 lines)
==============================================================================

// Leaflet lives on window.L
window[Symbol.for('dosson')].frameworks.add({
    id: 'leaflet', name: 'Leaflet', kind: 'js', href: 'https://leafletjs.com', npm: 'leaflet', github: 'Leaflet/Leaflet',
    detect(ctx) {
        if (typeof ctx.get('L.map') === 'function') {
            return ctx.globalVersion('L.version') || { evidence: 'window.L' };
        }
        return ctx.hasClass('leaflet-container') ? { evidence: 'leaflet-container class' } : null;
    }
});


==============================================================================
detect/js/lenis.js  (16 lines)
==============================================================================

// Lenis sets window.lenisVersion (and window.lenis.version) when it starts, even when bundled, and the lenis class on
// the element it scrolls
window[Symbol.for('dosson')].frameworks.add({
    id: 'lenis', name: 'Lenis', kind: 'js', href: 'https://lenis.darkroom.engineering', npm: 'lenis', github: 'darkroomengineering/lenis',
    detect(ctx) {
        const version = ctx.globalVersion('lenisVersion') || ctx.globalVersion('lenis.version');
        if (version) {
            return version;
        }
        const fromUrl = ctx.fromUrl('lenis') || ctx.fromUrl('@studio-freight/lenis');
        if (ctx.doc.documentElement.classList.contains('lenis')) {
            return { version: fromUrl?.version, evidence: 'lenis class on <html>' };
        }
        return typeof ctx.get('Lenis') === 'function' && fromUrl ? fromUrl : null;
    }
});


==============================================================================
detect/js/lexical.js  (14 lines)
==============================================================================

// Lexical marks its root data-lexical-editor and keeps the editor on it (__lexicalEditor); LexicalEditor.version
// ("0.52.0+prod.esm") since 0.17
window[Symbol.for('dosson')].frameworks.add({
    id: 'lexical', name: 'Lexical', kind: 'js', href: 'https://lexical.dev', npm: 'lexical', github: 'facebook/lexical',
    detect(ctx) {
        const root = ctx.query('[data-lexical-editor="true"]');
        const editor = root?.__lexicalEditor;
        if (!editor) {
            return ctx.fromUrl('lexical') || null;
        }
        const version = String(editor.constructor?.version || '').match(/^\d+(\.\d+)+/)?.[0];
        return { version: version || ctx.fromUrl('lexical')?.version, evidence: '__lexicalEditor on [data-lexical-editor]' };
    }
});


==============================================================================
detect/js/lightbox2.js  (11 lines)
==============================================================================

// Lightbox2 sets window.lightbox (an object with option()) and adds #lightboxOverlay to the page when it starts
window[Symbol.for('dosson')].frameworks.add({
    id: 'lightbox2', name: 'Lightbox2', kind: 'js', href: 'https://lokeshdhakar.com/projects/lightbox2/', npm: 'lightbox2', github: 'lokesh/lightbox2',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('lightbox2');
        if (typeof ctx.get('lightbox.option') === 'function' && typeof ctx.get('lightbox.changeImage') === 'function') {
            return fromUrl || { evidence: 'window.lightbox' };
        }
        return ctx.query('#lightboxOverlay.lightboxOverlay') && ctx.query('#lightbox .lb-outerContainer') ? fromUrl || { evidence: '#lightboxOverlay' } : null;
    }
});


==============================================================================
detect/js/lit.js  (16 lines)
==============================================================================

// Lit adds each loaded version to window.litHtmlVersions, litElementVersions and reactiveElementVersions. lit-html's
// matches Lit's own (Lit 3 is lit-html 3, but lit-element 4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'lit', name: 'Lit', kind: 'js', href: 'https://lit.dev', npm: 'lit', github: 'lit/lit',
    detect(ctx) {
        const versions = ctx.get('litHtmlVersions');
        if (Array.isArray(versions) && versions.length) {
            return { version: [...new Set(versions)].join(', '), evidence: 'window.litHtmlVersions' };
        }
        const element = ctx.get('litElementVersions');
        if (Array.isArray(element) && element.length) {
            return { evidence: `window.litElementVersions (lit-element ${[...new Set(element)].join(', ')})` };
        }
        return null;
    }
});


==============================================================================
detect/js/livewire.js  (14 lines)
==============================================================================

// Livewire renders components with wire:id, plus wire:snapshot (3+) or wire:initial-data (1, 2), and sets window.Livewire
window[Symbol.for('dosson')].frameworks.add({
    id: 'livewire', name: 'Livewire', kind: 'js', href: 'https://livewire.laravel.com', github: 'livewire/livewire',
    detect(ctx) {
        if (ctx.hasAttribute(/^wire:snapshot$/)) {
            return { version: '≥3', evidence: 'wire:snapshot attribute' };
        }
        if (ctx.hasAttribute(/^wire:initial-data$/)) {
            return { version: '≤2', evidence: 'wire:initial-data attribute' };
        }
        const livewire = ctx.get('Livewire');
        return livewire && typeof livewire.find === 'function' && ctx.hasAttribute(/^wire:id$/) ? { evidence: 'window.Livewire, wire:id' } : null;
    }
});


==============================================================================
detect/js/locomotive-scroll.js  (20 lines)
==============================================================================

// Locomotive Scroll 5 sets window.locomotiveScrollVersion (5.0.1 still says "5.0.0", so only its major is kept) and
// data-scroll-orientation on <html>; 4 adds has-scroll-init to <html>
window[Symbol.for('dosson')].frameworks.add({
    id: 'locomotive-scroll', name: 'Locomotive Scroll', kind: 'js', href: 'https://scroll.locomotive.ca', npm: 'locomotive-scroll', github: 'locomotivemtl/locomotive-scroll',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('locomotive-scroll');
        const global = ctx.version(ctx.get('locomotiveScrollVersion'));
        if (global) {
            return { version: fromUrl?.version || `${global.split('.')[0]}.x`, evidence: 'window.locomotiveScrollVersion' };
        }
        const root = ctx.doc.documentElement;
        if (root.hasAttribute('data-scroll-orientation') && ctx.query('[data-scroll]')) {
            return { version: fromUrl?.version || '5.x', evidence: 'data-scroll-orientation on <html>' };
        }
        if (root.classList.contains('has-scroll-init') && ctx.query('[data-scroll-container], [data-scroll]')) {
            return { version: fromUrl?.version || '4.x', evidence: 'has-scroll-init class on <html>' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/lodash.js  (6 lines)
==============================================================================

// Lodash
window[Symbol.for('dosson')].frameworks.add({
    id: 'lodash', name: 'Lodash', kind: 'js', href: 'https://lodash.com', npm: 'lodash', github: 'lodash/lodash',
    // _.cloneDeep since 1.0; lodash 0.x has _.forOwn (underscore never had either)
    detect: (ctx) => typeof (ctx.get('_.cloneDeep') || ctx.get('_.forOwn')) === 'function' ? ctx.globalVersion('_.VERSION') || { evidence: 'window._' } : null
});


==============================================================================
detect/js/lottie.js  (18 lines)
==============================================================================

// Lottie (lottie-web): window.lottie / window.bodymovin with the version, else the __lottie_element_<n> ids of the
// SVGs it renders (even when bundled), or LottieFiles' <lottie-player>
window[Symbol.for('dosson')].frameworks.add({
    id: 'lottie', name: 'Lottie', kind: 'js', href: 'https://airbnb.io/lottie/', npm: 'lottie-web', github: 'airbnb/lottie-web',
    detect(ctx) {
        for (const name of ['lottie', 'bodymovin']) {
            const lottie = ctx.get(name);
            if (lottie && typeof lottie.loadAnimation === 'function') {
                return ctx.globalVersion(`${name}.version`) || { evidence: `window.${name}` };
            }
        }
        const version = ctx.fromUrl('lottie-web')?.version;
        if (ctx.query('[id*="__lottie_element_"]')) {
            return { version, evidence: '__lottie_element_ ids' };
        }
        return ctx.tags.has('lottie-player') ? { version, evidence: '<lottie-player> element' } : null;
    }
});


==============================================================================
detect/js/lwc.js  (15 lines)
==============================================================================

// Lightning Web Components: the engine defines globalThis.lwcRuntimeFlags (even bundled, on LWR and Lightning pages);
// Lightning Experience also has window.LWC
window[Symbol.for('dosson')].frameworks.add({
    id: 'lwc', name: 'Lightning Web Components', kind: 'js', href: 'https://lwc.dev', npm: '@lwc/engine-dom', github: 'salesforce/lwc',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@lwc/engine-dom');
        if (typeof ctx.get('LWC.LightningElement') === 'function') {
            return fromUrl || { evidence: 'window.LWC' };
        }
        if (ctx.get('lwcRuntimeFlags') && typeof ctx.get('lwcRuntimeFlags') === 'object') {
            return fromUrl || { evidence: 'window.lwcRuntimeFlags' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/mapbox-gl.js  (10 lines)
==============================================================================

// Mapbox GL: window.mapboxgl.version (CDN build), else the mapboxgl-map class it gives every map (MapLibre 1.x used it too)
window[Symbol.for('dosson')].frameworks.add({
    id: 'mapbox-gl', name: 'Mapbox GL', kind: 'js', href: 'https://docs.mapbox.com/mapbox-gl-js/', npm: 'mapbox-gl', github: 'mapbox/mapbox-gl-js',
    detect(ctx) {
        if (typeof ctx.get('mapboxgl.Map') === 'function') {
            return ctx.globalVersion('mapboxgl.version') || ctx.fromUrl('mapbox-gl') || { evidence: 'window.mapboxgl' };
        }
        return ctx.hasClass('mapboxgl-map') ? { version: ctx.fromUrl('mapbox-gl')?.version, evidence: 'mapboxgl-map class' } : null;
    }
});


==============================================================================
detect/js/maplibre.js  (14 lines)
==============================================================================

// MapLibre: window.maplibregl.version (UMD builds up to 5), the URL (6 is an ES module), else the maplibregl-map class (2+)
window[Symbol.for('dosson')].frameworks.add({
    id: 'maplibre', name: 'MapLibre', kind: 'js', href: 'https://maplibre.org', npm: 'maplibre-gl', github: 'maplibre/maplibre-gl-js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('maplibre-gl');
        if (typeof ctx.get('maplibregl.Map') === 'function') {
            return ctx.globalVersion('maplibregl.version') || fromUrl || { evidence: 'window.maplibregl' };
        }
        if (ctx.hasClass('maplibregl-map')) {
            return { version: fromUrl?.version, evidence: fromUrl ? `maplibregl-map class, ${fromUrl.evidence}` : 'maplibregl-map class' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/marked.js  (11 lines)
==============================================================================

// Marked: window.marked with parse and Lexer (no version in it), or its URL. Bundled, it leaves nothing on the page
window[Symbol.for('dosson')].frameworks.add({
    id: 'marked', name: 'Marked', kind: 'js', href: 'https://marked.js.org', npm: 'marked', github: 'markedjs/marked',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('marked');
        if (typeof ctx.get('marked.parse') === 'function' && typeof ctx.get('marked.Lexer') === 'function' && typeof ctx.get('marked.Parser') === 'function') {
            return fromUrl || { evidence: 'window.marked' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/marko.js  (22 lines)
==============================================================================

// Marko. 6 resumes server-rendered HTML through the runtime it inlines (self.M, one render per key: M._ = { i: 'M_',
// w() }). 4 and 5 count their runtimes in window.$MUID and hand server-rendered components over in window.$MC
window[Symbol.for('dosson')].frameworks.add({
    id: 'marko', name: 'Marko', kind: 'js', href: 'https://markojs.com', npm: 'marko', github: 'marko-js/marko',
    detect(ctx) {
        const runtime = ctx.get('M');
        if (typeof runtime === 'function') {
            const render = Object.keys(runtime).find(key => runtime[key]?.i === `M${key}` && typeof runtime[key].w === 'function');
            if (render) {
                return { version: '6.x', evidence: 'window.M (Marko 6 resume runtime)' };
            }
        }
        const uid = ctx.get('$MUID');
        if (uid && typeof uid === 'object' && typeof uid.i === 'number') {
            return { version: '≤5', evidence: 'window.$MUID' };
        }
        if (typeof ctx.get('$MC.concat') === 'function' || ctx.hasAttribute(/^data-marko(-key)?$/)) {
            return { version: '≤5', evidence: ctx.get('$MC') ? 'window.$MC' : 'data-marko attribute' };
        }
        return null;
    }
});


==============================================================================
detect/js/masonry.js  (18 lines)
==============================================================================

// Masonry: an element whose outlayerGUID expando is a Masonry (Masonry.data, or jQuery.data(element, 'masonry')), else
// window.Masonry when Isotope isn't there (isotope.pkgd.js defines window.Masonry for its masonry layout mode)
window[Symbol.for('dosson')].frameworks.add({
    id: 'masonry', name: 'Masonry', kind: 'js', href: 'https://masonry.desandro.com', npm: 'masonry-layout', github: 'desandro/masonry',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('masonry-layout') || ctx.fromUrl('masonry');
        const Masonry = ctx.get('Masonry');
        const isMasonry = typeof Masonry === 'function' && Masonry.namespace === 'masonry';
        const grid = ctx.expando(/^outlayerGUID$/);
        if (grid) {
            const jQuery = ctx.get('jQuery');
            if ((isMasonry && Masonry.data(grid.element) instanceof Masonry) || (typeof jQuery?.data === 'function' && jQuery.data(grid.element, 'masonry'))) {
                return fromUrl || { evidence: 'Masonry on an element (outlayerGUID)' };
            }
        }
        return isMasonry && typeof ctx.get('Isotope') !== 'function' ? fromUrl || { evidence: 'window.Masonry' } : null;
    }
});


==============================================================================
detect/js/mathjax.js  (14 lines)
==============================================================================

// MathJax: window.MathJax.version (2, 3 and 4; before it loads, MathJax is just the config), else <mjx-container> (3+)
window[Symbol.for('dosson')].frameworks.add({
    id: 'mathjax', name: 'MathJax', kind: 'js', href: 'https://www.mathjax.org', npm: 'mathjax', github: 'mathjax/MathJax',
    detect(ctx) {
        const version = ctx.globalVersion('MathJax.version');
        if (version) {
            return version;
        }
        if (ctx.tags.has('mjx-container')) {
            return { version: ctx.fromUrl('mathjax')?.version || '≥3', evidence: '<mjx-container> element' };
        }
        return null;
    }
});


==============================================================================
detect/js/mermaid.js  (15 lines)
==============================================================================

// Mermaid: window.mermaid (its UMD build) with mermaidAPI, else the diagrams it renders: <svg id="mermaid-…"
// aria-roledescription="…"> or a .mermaid block marked data-processed. The version only comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'mermaid', name: 'Mermaid', kind: 'js', href: 'https://mermaid.js.org', npm: 'mermaid', github: 'mermaid-js/mermaid',
    detect(ctx) {
        const version = ctx.fromUrl('mermaid')?.version;
        if (ctx.get('mermaid.mermaidAPI') && typeof ctx.get('mermaid.initialize') === 'function') {
            return { version, evidence: 'window.mermaid' };
        }
        if (ctx.query('svg[id^="mermaid-"][aria-roledescription], .mermaid[data-processed="true"] > svg')) {
            return { version, evidence: 'a rendered Mermaid <svg>' };
        }
        return null;
    }
});


==============================================================================
detect/js/meteor.js  (11 lines)
==============================================================================

// Meteor: Meteor.release is "METEOR@2.13.3"
window[Symbol.for('dosson')].frameworks.add({
    id: 'meteor', name: 'Meteor', kind: 'js', href: 'https://www.meteor.com', github: 'meteor/meteor',
    detect(ctx) {
        const release = ctx.get('Meteor.release') || ctx.get('__meteor_runtime_config__.meteorRelease');
        if (typeof release === 'string') {
            return { version: ctx.version(release.split('@')[1]), evidence: 'Meteor.release' };
        }
        return ctx.get('Meteor') ? { evidence: 'window.Meteor' } : null;
    }
});


==============================================================================
detect/js/million.js  (5 lines)
==============================================================================

// Million.js: million/react sets window.__MILLION_DATA__.version, even when bundled
window[Symbol.for('dosson')].frameworks.add({
    id: 'million', name: 'Million.js', kind: 'js', href: 'https://million.dev', npm: 'million', github: 'aidenybai/million',
    detect: (ctx) => ctx.globalVersion('__MILLION_DATA__.version') || null
});


==============================================================================
detect/js/mithril.js  (20 lines)
==============================================================================

// Mithril: window.m, else, bundled (Mithril 1+), the vnodes m.render / m.mount keeps on the root element (dom.vnodes:
// vnode objects with tag, attrs, dom and domSize)
window[Symbol.for('dosson')].frameworks.add({
    id: 'mithril', name: 'Mithril', kind: 'js', href: 'https://mithril.js.org', npm: 'mithril', github: 'MithrilJS/mithril.js',
    detect(ctx) {
        if (typeof ctx.get('m.mount') === 'function') {
            return ctx.globalVersion('m.version') || { evidence: 'window.m' };
        }
        const fromUrl = ctx.fromUrl('mithril');
        if (fromUrl) {
            return fromUrl;
        }
        const root = ctx.expando(/^vnodes$/);
        const vnode = Array.isArray(root?.value) ? root.value.find(Boolean) : undefined;
        if (vnode && 'tag' in vnode && 'attrs' in vnode && 'domSize' in vnode && 'dom' in vnode) {
            return { evidence: `<${root.element.localName}>.vnodes (root vnodes)` };
        }
        return null;
    }
});


==============================================================================
detect/js/mobx.js  (23 lines)
==============================================================================

// MobX keeps its shared state on globalThis.__mobxGlobals, even when bundled. Its version field is the state's format:
// 5 for MobX 4 and 5, 6 for MobX 6, 7 for MobX 7. MobX 3 has only __mobxInstanceCount (4 and 5 have both), and MobX 2
// keeps its state on __mobxGlobal (format 4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'mobx', name: 'MobX', kind: 'js', href: 'https://mobx.js.org', npm: 'mobx', github: 'mobxjs/mobx',
    detect(ctx) {
        const globals = ctx.get('__mobxGlobals');
        const fromUrl = ctx.fromUrl('mobx');
        if (globals && typeof globals === 'object' && typeof globals.mobxGuid === 'number') {
            const format = globals.version;
            const version = typeof format !== 'number' ? undefined : format <= 5 ? '4.x / 5.x' : `${format}.x`;
            return { version: fromUrl?.version || version, evidence: 'window.__mobxGlobals' };
        }
        if (typeof ctx.get('__mobxInstanceCount') === 'number') {
            return { version: fromUrl?.version || '3.x', evidence: 'window.__mobxInstanceCount' };
        }
        const legacy = ctx.get('__mobxGlobal');
        if (legacy && typeof legacy === 'object' && typeof legacy.mobxGuid === 'number') {
            return { version: fromUrl?.version || (legacy.version === 4 ? '2.x' : '≤2'), evidence: 'window.__mobxGlobal' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/modernizr.js  (5 lines)
==============================================================================

// Modernizr
window[Symbol.for('dosson')].frameworks.add({
    id: 'modernizr', name: 'Modernizr', kind: 'js', href: 'https://modernizr.com', npm: 'modernizr', github: 'Modernizr/Modernizr',
    detect: (ctx) => ctx.globalVersion('Modernizr._version') || (ctx.get('Modernizr') ? { evidence: 'window.Modernizr' } : null)
});


==============================================================================
detect/js/moment.js  (5 lines)
==============================================================================

// Moment.js
window[Symbol.for('dosson')].frameworks.add({
    id: 'moment', name: 'Moment.js', kind: 'js', href: 'https://momentjs.com', npm: 'moment', github: 'moment/moment',
    detect: (ctx) => ctx.globalVersion('moment.version') || ctx.fromUrl('moment')
});


==============================================================================
detect/js/monaco.js  (14 lines)
==============================================================================

// Monaco: window.monaco.editor when loaded with its AMD loader, else the .monaco-editor it renders (bundled ESM)
window[Symbol.for('dosson')].frameworks.add({
    id: 'monaco', name: 'Monaco', kind: 'js', href: 'https://microsoft.github.io/monaco-editor/', npm: 'monaco-editor', github: 'microsoft/monaco-editor',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('monaco-editor');
        if (typeof ctx.get('monaco.editor.create') === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.monaco, ${fromUrl.evidence}` : 'window.monaco.editor' };
        }
        if (ctx.query('.monaco-editor .view-lines')) {
            return { version: fromUrl?.version, evidence: '.monaco-editor with .view-lines' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/mootools.js  (5 lines)
==============================================================================

// MooTools
window[Symbol.for('dosson')].frameworks.add({
    id: 'mootools', name: 'MooTools', kind: 'js', href: 'https://mootools.net', npm: 'mootools', github: 'mootools/mootools-core',
    detect: (ctx) => ctx.globalVersion('MooTools.version') || ctx.fromUrl('mootools')
});


==============================================================================
detect/js/next.js  (18 lines)
==============================================================================

// Next.js sets window.next ({ version, router… }) on every page it renders
window[Symbol.for('dosson')].frameworks.add({
    id: 'next', name: 'Next.js', kind: 'js', href: 'https://nextjs.org', npm: 'next', github: 'vercel/next.js',
    detect(ctx) {
        const version = ctx.globalVersion('next.version');
        if (version) {
            return version;
        }
        if (ctx.query('script#__NEXT_DATA__')) {
            return { evidence: '<script id="__NEXT_DATA__"> (pages router)' };
        }
        if (Array.isArray(ctx.get('__next_f'))) {
            return { evidence: 'self.__next_f (app router)' };
        }
        const chunk = ctx.url(/\/_next\/static\//);
        return chunk ? { evidence: `loaded ${chunk.split(/[?#]/)[0]}` } : null;
    }
});


==============================================================================
detect/js/nuxt.js  (18 lines)
==============================================================================

// Nuxt. 3+ renders into #__nuxt and keeps its versions on the Vue app; 2 sets window.$nuxt
window[Symbol.for('dosson')].frameworks.add({
    id: 'nuxt', name: 'Nuxt', kind: 'js', href: 'https://nuxt.com', npm: 'nuxt', github: 'nuxt/nuxt',
    detect(ctx) {
        const container = ctx.query('#__nuxt');
        const version = ctx.version(container?.__vue_app__?.$nuxt?.versions?.nuxt);
        if (version) {
            return { version, evidence: '#__nuxt app ($nuxt.versions)' };
        }
        if (ctx.get('$nuxt')) {
            return { version: '2.x', evidence: 'window.$nuxt' };
        }
        if (ctx.get('__NUXT__') || ctx.query('script#__NUXT_DATA__')) {
            return { evidence: ctx.get('__NUXT__') ? 'window.__NUXT__' : '<script id="__NUXT_DATA__">' };
        }
        return container ? { evidence: '<div id="__nuxt">' } : null;
    }
});


==============================================================================
detect/js/onsen.js  (18 lines)
==============================================================================

// Onsen UI: window.ons, else its registered <ons-*> custom elements. The version only comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'onsen', name: 'Onsen UI', kind: 'js', href: 'https://onsen.io', npm: 'onsenui', github: 'OnsenUI/OnsenUI',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('onsenui');
        const ons = ctx.get('ons');
        // ons.platform came with 2.0: Onsen UI 1 (AngularJS directives) has ons.bootstrap
        if (ons && typeof ons === 'object' && (ons.platform || typeof ons.bootstrap === 'function') && typeof ons.ready === 'function') {
            return fromUrl || { evidence: 'window.ons' };
        }
        const tag = ['ons-page', 'ons-navigator', 'ons-splitter', 'ons-tabbar', 'ons-toolbar'].find(name => ctx.tags.has(name));
        let defined = false;
        try {
            defined = Boolean(tag && ctx.win.customElements.get(tag));
        } catch (e) { }
        return defined ? fromUrl || { evidence: `<${tag}> element` } : null;
    }
});


==============================================================================
detect/js/openlayers.js  (15 lines)
==============================================================================

// OpenLayers: window.ol (the full build, with ol.util.VERSION), else the .ol-viewport and .ol-overlaycontainer every map
// creates in its target
window[Symbol.for('dosson')].frameworks.add({
    id: 'openlayers', name: 'OpenLayers', kind: 'js', href: 'https://openlayers.org', npm: 'ol', github: 'openlayers/openlayers',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('ol') || ctx.fromUrl('openlayers');
        if (typeof ctx.get('ol.Map') === 'function' && typeof ctx.get('ol.View') === 'function') {
            return ctx.globalVersion('ol.util.VERSION') || ctx.globalVersion('ol.VERSION') || fromUrl || { evidence: 'window.ol' };
        }
        if (ctx.hasClass('ol-viewport') && ctx.hasClass('ol-overlaycontainer')) {
            return fromUrl || { evidence: '.ol-viewport class' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/owl-carousel.js  (18 lines)
==============================================================================

// Owl Carousel is a jQuery plugin (jQuery.fn.owlCarousel). Version 2 marks each carousel owl-loaded with an owl-stage;
// version 1 builds owl-wrapper-outer
window[Symbol.for('dosson')].frameworks.add({
    id: 'owl-carousel', name: 'Owl Carousel', kind: 'js', href: 'https://owlcarousel2.github.io/OwlCarousel2/', npm: 'owl.carousel', github: 'OwlCarousel2/OwlCarousel2',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('owl.carousel') || ctx.fromUrl('OwlCarousel2') || ctx.fromUrl('owl-carousel');
        if (ctx.hasClass('owl-loaded') && ctx.hasClass('owl-stage')) {
            return { version: fromUrl?.version || '2.x', evidence: 'owl-loaded class' };
        }
        if (ctx.hasClass('owl-wrapper-outer') && ctx.hasClass('owl-carousel')) {
            return { version: fromUrl?.version || '1.x', evidence: 'owl-wrapper-outer class' };
        }
        if (typeof ctx.get('jQuery.fn.owlCarousel') === 'function') {
            return { version: fromUrl?.version || (ctx.get('jQuery.fn.owlCarousel.Constructor') ? '2.x' : undefined), evidence: 'jQuery.fn.owlCarousel' };
        }
        return null;
    }
});


==============================================================================
detect/js/p5.js  (13 lines)
==============================================================================

// p5.js: window.p5 is a function with p5.VERSION, and every sketch's <canvas> gets the p5Canvas class (even bundled)
window[Symbol.for('dosson')].frameworks.add({
    id: 'p5', name: 'p5.js', kind: 'js', href: 'https://p5js.org', npm: 'p5', github: 'processing/p5.js',
    detect(ctx) {
        if (typeof ctx.get('p5') === 'function' && ctx.get('p5.VERSION')) {
            return ctx.globalVersion('p5.VERSION') || { evidence: 'window.p5' };
        }
        if (ctx.query('canvas.p5Canvas')) {
            return { version: ctx.fromUrl('p5')?.version, evidence: 'p5Canvas class on a <canvas>' };
        }
        return null;
    }
});


==============================================================================
detect/js/paperjs.js  (10 lines)
==============================================================================

// Paper.js: its script declares window.paper, a PaperScope with a version
window[Symbol.for('dosson')].frameworks.add({
    id: 'paperjs', name: 'Paper.js', kind: 'js', href: 'http://paperjs.org', npm: 'paper', github: 'paperjs/paper.js',
    detect(ctx) {
        if (typeof ctx.get('paper.PaperScope') === 'function' && typeof ctx.get('paper.Path') === 'function') {
            return ctx.globalVersion('paper.version') || { evidence: 'window.paper' };
        }
        return ctx.fromUrl('paper') || null;
    }
});


==============================================================================
detect/js/parsley.js  (11 lines)
==============================================================================

// Parsley: window.Parsley.version, else the parsley-errors-list it adds after each validated field
window[Symbol.for('dosson')].frameworks.add({
    id: 'parsley', name: 'Parsley', kind: 'js', href: 'https://parsleyjs.org', npm: 'parsleyjs', github: 'guillaumepotier/Parsley.js',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('parsleyjs') || ctx.fromUrl('parsley.js') || ctx.fromUrl('parsley');
        if (ctx.get('Parsley.Factory') && typeof ctx.get('Parsley.addValidator') === 'function') {
            return ctx.globalVersion('Parsley.version') || fromUrl || { evidence: 'window.Parsley' };
        }
        return ctx.hasClass('parsley-errors-list') ? { version: fromUrl?.version, evidence: 'parsley-errors-list class' } : null;
    }
});


==============================================================================
detect/js/petite-vue.js  (19 lines)
==============================================================================

// Petite-vue: window.PetiteVue (the IIFE build, no version in it), else the URL. Once mounted it removes v-scope, so
// v-scope only shows on a page it hasn't mounted yet
window[Symbol.for('dosson')].frameworks.add({
    id: 'petite-vue', name: 'Petite-vue', kind: 'js', href: 'https://github.com/vuejs/petite-vue', npm: 'petite-vue', github: 'vuejs/petite-vue',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('petite-vue');
        if (typeof ctx.get('PetiteVue.createApp') === 'function' && typeof ctx.get('PetiteVue.reactive') === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.PetiteVue, ${fromUrl.evidence}` : 'window.PetiteVue' };
        }
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/[/@]petite-vue(?:[@/.]|$)/);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        return ctx.hasAttribute(/^v-scope$/) && !ctx.get('Vue') ? { evidence: 'v-scope attribute' } : null;
    }
});


==============================================================================
detect/js/phaser.js  (10 lines)
==============================================================================

// Phaser: window.Phaser.VERSION (its builds set window.Phaser), with Phaser.Game to tell it from another "Phaser"
window[Symbol.for('dosson')].frameworks.add({
    id: 'phaser', name: 'Phaser', kind: 'js', href: 'https://phaser.io', npm: 'phaser', github: 'phaserjs/phaser',
    detect(ctx) {
        if (typeof ctx.get('Phaser.Game') === 'function') {
            return ctx.globalVersion('Phaser.VERSION') || { evidence: 'window.Phaser' };
        }
        return ctx.fromUrl('phaser') || ctx.fromUrl('phaser-ce') || null;
    }
});


==============================================================================
detect/js/phoenix-liveview.js  (21 lines)
==============================================================================

// Phoenix LiveView: window.liveSocket (every generated app.js sets it), with liveSocket.version(); else the
// data-phx-session every LiveView's container has
window[Symbol.for('dosson')].frameworks.add({
    id: 'phoenix-liveview', name: 'Phoenix LiveView', kind: 'js', href: 'https://www.phoenixframework.org', npm: 'phoenix_live_view', github: 'phoenixframework/phoenix_live_view',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('phoenix_live_view');
        const liveSocket = ctx.get('liveSocket');
        if (liveSocket && typeof liveSocket.connect === 'function' && typeof liveSocket.getSocket === 'function') {
            let version;
            try {
                version = ctx.version(liveSocket.version?.());
            } catch (e) { }
            return version ? { version, evidence: 'window.liveSocket.version()' } : fromUrl || { evidence: 'window.liveSocket' };
        }
        const view = ctx.query('[data-phx-session]');
        if (view) {
            return fromUrl || { evidence: `data-phx-session on <${view.localName}>` };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/photoswipe.js  (17 lines)
==============================================================================

// PhotoSwipe: window.PhotoSwipe / PhotoSwipeLightbox, the data-pswp-* attributes of a 5.x gallery, or its pswp__ markup
window[Symbol.for('dosson')].frameworks.add({
    id: 'photoswipe', name: 'PhotoSwipe', kind: 'js', href: 'https://photoswipe.com', npm: 'photoswipe', github: 'dimsemenov/PhotoSwipe',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('photoswipe');
        if (typeof ctx.get('PhotoSwipeLightbox') === 'function') {
            return fromUrl || { version: '5.x', evidence: 'window.PhotoSwipeLightbox' };
        }
        if (typeof ctx.get('PhotoSwipe') === 'function' && typeof ctx.get('PhotoSwipeUI_Default') === 'function') {
            return fromUrl || { version: '4.x', evidence: 'window.PhotoSwipe and PhotoSwipeUI_Default' };
        }
        if (ctx.hasAttribute(/^data-pswp-(width|height|src)$/)) {
            return { version: fromUrl?.version || '5.x', evidence: 'data-pswp-* attributes' };
        }
        return ctx.hasClass('pswp__scroll-wrap', 'pswp__container', 'pswp__bg') ? { version: fromUrl?.version, evidence: 'pswp__ classes' } : null;
    }
});


==============================================================================
detect/js/pikaday.js  (15 lines)
==============================================================================

// Pikaday: window.Pikaday (a constructor with getMoment/setDate), else its .pika-single calendars with .pika-lendar
window[Symbol.for('dosson')].frameworks.add({
    id: 'pikaday', name: 'Pikaday', kind: 'js', href: 'https://github.com/Pikaday/Pikaday', npm: 'pikaday', github: 'Pikaday/Pikaday',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('pikaday');
        const global = ctx.get('Pikaday');
        if (typeof global === 'function' && typeof global.prototype?.setDate === 'function' && typeof global.prototype?.gotoDate === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.Pikaday, ${fromUrl.evidence}` : 'window.Pikaday' };
        }
        if (ctx.hasClass('pika-single') && ctx.query('.pika-single .pika-lendar')) {
            return { version: fromUrl?.version, evidence: '.pika-single calendar' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/pinia.js  (18 lines)
==============================================================================

// Pinia: $pinia on the Vue 3 app (__vue_app__.config.globalProperties) or on the Vue 2 root (__vue__), with its
// stores in _s. It has no version: only a URL gives it
window[Symbol.for('dosson')].frameworks.add({
    id: 'pinia', name: 'Pinia', kind: 'js', href: 'https://pinia.vuejs.org', npm: 'pinia', github: 'vuejs/pinia',
    detect(ctx) {
        const isPinia = (pinia) => pinia && pinia._s instanceof Map && typeof pinia.use === 'function';
        const version = ctx.fromUrl('pinia')?.version;
        const app = ctx.expando(/^__vue_app__$/)?.value;
        if (isPinia(app?.config?.globalProperties?.$pinia)) {
            return { version, evidence: '$pinia on the Vue app' };
        }
        if (isPinia(ctx.expando(/^__vue__$/)?.value?.$root?.$pinia)) {
            return { version, evidence: '$pinia on the Vue root' };
        }
        const Pinia = ctx.get('Pinia');
        return Pinia && typeof Pinia.createPinia === 'function' && typeof Pinia.defineStore === 'function' ? { version, evidence: 'window.Pinia' } : null;
    }
});


==============================================================================
detect/js/pixi.js  (15 lines)
==============================================================================

// PixiJS: PIXI.VERSION (browser build; PIXI.Application since 4, autoDetectRenderer before), else the app or renderer exposed for PixiJS DevTools (__PIXI_APP__,
// __PIXI_RENDERER__). Bundled PixiJS without them leaves no global
window[Symbol.for('dosson')].frameworks.add({
    id: 'pixi', name: 'PixiJS', kind: 'js', href: 'https://pixijs.com', npm: 'pixi.js', github: 'pixijs/pixijs',
    detect(ctx) {
        if (typeof (ctx.get('PIXI.Application') || ctx.get('PIXI.autoDetectRenderer')) === 'function') {
            return ctx.globalVersion('PIXI.VERSION') || ctx.fromUrl('pixi.js') || { evidence: 'window.PIXI' };
        }
        const fromUrl = ctx.fromUrl('pixi.js');
        if (ctx.get('__PIXI_APP__.stage') || ctx.get('__PIXI_RENDERER__.view')) {
            return { version: fromUrl?.version, evidence: ctx.get('__PIXI_APP__') ? 'window.__PIXI_APP__' : 'window.__PIXI_RENDERER__' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/plotly.js  (13 lines)
==============================================================================

// Plotly: window.Plotly.version, else the js-plotly-plot class on each graph div (bundled, react-plotly.js)
window[Symbol.for('dosson')].frameworks.add({
    id: 'plotly', name: 'Plotly', kind: 'js', href: 'https://plotly.com/javascript/', npm: 'plotly.js', github: 'plotly/plotly.js',
    detect(ctx) {
        if (typeof ctx.get('Plotly.newPlot') === 'function') {
            return ctx.globalVersion('Plotly.version') || { evidence: 'window.Plotly' };
        }
        if (ctx.hasClass('js-plotly-plot')) {
            return { version: (ctx.fromUrl('plotly') || ctx.fromUrl('plotly.js-dist-min') || ctx.fromUrl('plotly.js-dist'))?.version, evidence: 'js-plotly-plot class' };
        }
        return null;
    }
});


==============================================================================
detect/js/plyr.js  (13 lines)
==============================================================================

// Plyr: window.Plyr, whose default icon URL holds the version (cdn.plyr.io/3.8.4/plyr.svg), else the plyr--full-ui class of its players.
// A URL naming the version comes first: some releases kept an older icon URL (3.3.13 to 3.3.23 say 3.3.12)
window[Symbol.for('dosson')].frameworks.add({
    id: 'plyr', name: 'Plyr', kind: 'js', href: 'https://plyr.io', npm: 'plyr', github: 'sampotts/plyr',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('plyr');
        if (typeof ctx.get('Plyr') === 'function' && typeof ctx.get('Plyr.setup') === 'function') {
            const icon = String(ctx.get('Plyr.defaults.iconUrl') || '').match(/cdn\.plyr\.io\/(\d+\.\d+\.\d+)\//);
            return fromUrl || (icon ? { version: icon[1], evidence: 'window.Plyr.defaults.iconUrl' } : { evidence: 'window.Plyr' });
        }
        return ctx.hasClass('plyr--full-ui') && ctx.hasClass('plyr') ? { version: fromUrl?.version, evidence: 'plyr, plyr--full-ui classes' } : null;
    }
});


==============================================================================
detect/js/polymer.js  (27 lines)
==============================================================================

// Polymer 1 and 2 (and Polymer 3's polymer-legacy.js) set window.Polymer with its version. A Polymer 3 app bundled from
// ES modules has no global: its elements' classes have the static polymerElementVersion of PolymerElement
window[Symbol.for('dosson')].frameworks.add({
    id: 'polymer', name: 'Polymer', kind: 'js', href: 'https://polymer-library.polymer-project.org', npm: '@polymer/polymer', github: 'Polymer/polymer',
    detect(ctx) {
        const version = ctx.globalVersion('Polymer.version');
        if (version) {
            return version;
        }
        if (typeof ctx.get('Polymer') === 'function') {
            return { evidence: 'window.Polymer' };
        }
        for (const tag of ctx.tags) {
            if (!tag.includes('-')) {
                continue;
            }
            try {
                const element = ctx.win.customElements?.get(tag);
                const elementVersion = element && ctx.version(element.polymerElementVersion);
                if (elementVersion) {
                    return { version: elementVersion, evidence: `<${tag}>'s class polymerElementVersion` };
                }
            } catch (e) { }
        }
        return null;
    }
});


==============================================================================
detect/js/popper.js  (18 lines)
==============================================================================

// Popper 2 (window.Popper.createPopper) and Popper 1 (window.Popper class with Popper.Defaults), else the attribute it
// puts on positioned elements: data-popper-placement (2), x-placement (1)
window[Symbol.for('dosson')].frameworks.add({
    id: 'popper', name: 'Popper.js', kind: 'js', href: 'https://popper.js.org', npm: '@popperjs/core', github: 'floating-ui/floating-ui',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@popperjs/core') || ctx.fromUrl('popper.js');
        if (typeof ctx.get('Popper.createPopper') === 'function' && typeof ctx.get('Popper.popperGenerator') === 'function') {
            return { version: fromUrl?.version || '2.x', evidence: 'window.Popper.createPopper' };
        }
        if (typeof ctx.get('Popper') === 'function' && ctx.get('Popper.Defaults') && ctx.get('Popper.placements')) {
            return { version: fromUrl?.version || '1.x', evidence: 'window.Popper.Defaults' };
        }
        if (ctx.hasAttribute(/^data-popper-placement$/)) {
            return { version: fromUrl?.version || '2.x', evidence: 'data-popper-placement attribute' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/preact.js  (20 lines)
==============================================================================

// Preact. 10+ keeps the rendered tree on its container as __k (its mangled _children); 8 marks nodes with
// __preactattr_ and _component
window[Symbol.for('dosson')].frameworks.add({
    id: 'preact', name: 'Preact', kind: 'js', href: 'https://preactjs.com', npm: 'preact', github: 'preactjs/preact',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('preact');
        const root = ctx.expando(/^__k$/);
        if (root && root.value && typeof root.value === 'object' && 'props' in root.value) {
            return { version: fromUrl?.version || '≥10', evidence: `__k on <${root.element.localName}>` };
        }
        const legacy = ctx.expando(/^__preactattr_$/);
        if (legacy) {
            return { version: fromUrl?.version || '8.x', evidence: `__preactattr_ on <${legacy.element.localName}>` };
        }
        if (ctx.get('preact.render')) {
            return fromUrl || { evidence: 'window.preact' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/prism.js  (10 lines)
==============================================================================

// Prism always sets window.Prism (even bundled), with Prism.languages and Prism.highlightElement. No version: the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'prism', name: 'Prism', kind: 'js', href: 'https://prismjs.com', npm: 'prismjs', github: 'PrismJS/prism',
    detect(ctx) {
        if (typeof ctx.get('Prism.highlightElement') !== 'function' || typeof ctx.get('Prism.languages') !== 'object') {
            return null;
        }
        return ctx.fromUrl('prismjs') || ctx.fromUrl('prism') || { evidence: 'window.Prism' };
    }
});


==============================================================================
detect/js/prosemirror.js  (13 lines)
==============================================================================

// ProseMirror's view marks its editable .ProseMirror and keeps its view description on it (pmViewDesc). Up to 0.14 the
// editable is a .ProseMirror-content inside the .ProseMirror
window[Symbol.for('dosson')].frameworks.add({
    id: 'prosemirror', name: 'ProseMirror', kind: 'js', href: 'https://prosemirror.net', npm: 'prosemirror-view', github: 'ProseMirror/prosemirror',
    detect(ctx) {
        const dom = ctx.query('.ProseMirror');
        const content = dom && !dom.pmViewDesc ? dom.querySelector('.ProseMirror-content') : null;
        if (dom && (dom.pmViewDesc || content?.pmViewDesc)) {
            return { version: ctx.fromUrl('prosemirror-view')?.version, evidence: 'pmViewDesc on .ProseMirror' };
        }
        return ctx.fromUrl('prosemirror-view') || null;
    }
});


==============================================================================
detect/js/prototype.js  (5 lines)
==============================================================================

// Prototype
window[Symbol.for('dosson')].frameworks.add({
    id: 'prototype', name: 'Prototype', kind: 'js', href: 'http://prototypejs.org', github: 'prototypejs/prototype',
    detect: (ctx) => ctx.globalVersion('Prototype.Version')
});


==============================================================================
detect/js/quill.js  (13 lines)
==============================================================================

// Quill: window.Quill.version, else the editor it builds: .ql-editor inside .ql-container (bundled, react-quill)
window[Symbol.for('dosson')].frameworks.add({
    id: 'quill', name: 'Quill', kind: 'js', href: 'https://quilljs.com', npm: 'quill', github: 'slab/quill',
    detect(ctx) {
        if (typeof ctx.get('Quill') === 'function' && typeof ctx.get('Quill.register') === 'function') {
            return ctx.globalVersion('Quill.version') || { evidence: 'window.Quill' };
        }
        if (ctx.query('.ql-container > .ql-editor')) {
            return { version: ctx.fromUrl('quill')?.version, evidence: 'ql-editor in a ql-container' };
        }
        return null;
    }
});


==============================================================================
detect/js/qwik.js  (8 lines)
==============================================================================

// Qwik marks its container: <html q:container="paused" q:version="1.5.0">
window[Symbol.for('dosson')].frameworks.add({
    id: 'qwik', name: 'Qwik', kind: 'js', href: 'https://qwik.dev', npm: '@builder.io/qwik', github: 'QwikDev/qwik',
    detect(ctx) {
        const container = ctx.query('[q\\:container]');
        return container ? { version: container.getAttribute('q:version') || undefined, evidence: `q:container on <${container.localName}>` } : null;
    }
});


==============================================================================
detect/js/ractive.js  (22 lines)
==============================================================================

// Ractive.js: Ractive.VERSION, else the instances it keeps on their target element (__ractive_instances__). 0.2 has
// neither: window.Ractive with Ractive.compile, and the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'ractive', name: 'Ractive.js', kind: 'js', href: 'https://ractive.js.org', npm: 'ractive', github: 'ractivejs/ractive',
    detect(ctx) {
        if (typeof ctx.get('Ractive') === 'function') {
            const global = ctx.globalVersion('Ractive.VERSION');
            if (global) {
                return global;
            }
        }
        if (typeof ctx.get('Ractive') === 'function' && typeof ctx.get('Ractive.compile') === 'function' && typeof ctx.get('Ractive.extend') === 'function') {
            return ctx.fromUrl('ractive') || { evidence: 'window.Ractive' };
        }
        const instances = ctx.expando(/^__ractive_instances__$/);
        if (instances && Array.isArray(instances.value)) {
            const version = instances.value.map(instance => ctx.version(instance?.constructor?.VERSION)).find(Boolean);
            return { version: version || ctx.fromUrl('ractive')?.version, evidence: `__ractive_instances__ on <${instances.element.localName}>` };
        }
        return null;
    }
});


==============================================================================
detect/js/react.js  (59 lines)
==============================================================================

// React. Exact version from window.React (UMD builds), React DevTools' hook, or a CDN URL. A bundled React (most
// sites) has no global: what it leaves on DOM nodes still gives the major version (see test-extension/react)
window[Symbol.for('dosson')].frameworks.add({
    id: 'react',
    name: 'React',
    kind: 'js',
    href: 'https://react.dev',
    npm: 'react',
    github: 'react/react',
    detect(ctx) {
        const version = ctx.version(ctx.get('React.version'));
        if (version) {
            return { version, evidence: 'window.React.version' };
        }
        // React DevTools (the extension) installs this hook, and every React renderer since 16 registers with it
        const renderers = ctx.get('__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers');
        if (renderers instanceof Map) {
            const renderer = [...renderers.values()].find(renderer => ctx.version(renderer.version));
            if (renderer) {
                return { version: renderer.version, evidence: `${renderer.rendererPackageName || 'renderer'} registered with React DevTools` };
            }
        }

        // 17+: __reactFiber$<random> on rendered nodes, __reactContainer$ on the root's container. The fiber root
        // gained identifierPrefix in 18 and onUncaughtError in 19
        const fiber = ctx.expando(/^__react(Fiber|Container)\$/);
        if (fiber) {
            let node = fiber.value;
            // a container holds the root fiber (tag 3); a rendered node walks up to it
            while (node && node.tag !== 3 && node.return) {
                node = node.return;
            }
            const root = node?.stateNode;
            const major = !root ? '≥17' : 'onUncaughtError' in root ? '19.x' : 'identifierPrefix' in root ? '18.x' : '17.x';
            return { version: major, evidence: `${fiber.key.replace(/\$.*/, '$')} on <${fiber.element.localName}>` };
        }
        // 15 and 16: __reactInternalInstance$<random>, a fiber (tag, return…) in 16, a component instance in 15
        const instance = ctx.expando(/^__reactInternalInstance\$/);
        if (instance) {
            const isFiber = instance.value && typeof instance.value.tag === 'number' && 'return' in instance.value;
            return { version: isFiber ? '16.x' : '15.x', evidence: `__reactInternalInstance$ on <${instance.element.localName}>` };
        }
        // 0.14 and older: data-reactid on every node. 0.14 also puts _reactInternalComponent on the top one
        const reactId = ctx.query('[data-reactid]');
        if (reactId) {
            const isFourteen = ctx.expando(/^_reactInternalComponent$/);
            return { version: isFourteen ? '0.14.x' : '≤0.13', evidence: 'data-reactid attributes' };
        }
        // server-rendered by 15/16 but not hydrated (yet)
        if (ctx.query('[data-reactroot]')) {
            return { version: ctx.urlVersion('react')?.version || '15–16', evidence: 'data-reactroot attribute' };
        }
        const fromUrl = ctx.urlVersion('react') || ctx.urlVersion('react-dom');
        if (fromUrl) {
            return { version: fromUrl.version, evidence: `loaded from ${fromUrl.url}` };
        }
        return null;
    }
});


==============================================================================
detect/js/react-router.js  (15 lines)
==============================================================================

// React Router, and Remix (now React Router's framework mode)
window[Symbol.for('dosson')].frameworks.add({
    id: 'react-router', name: 'React Router/Remix', kind: 'js', href: 'https://reactrouter.com', npm: 'react-router', github: 'remix-run/react-router',
    detect(ctx) {
        if (ctx.get('__reactRouterContext')) {
            return { version: ctx.version(ctx.get('__reactRouterVersion')) || '≥7', evidence: 'window.__reactRouterContext (framework mode)' };
        }
        if (ctx.get('__remixContext')) {
            return { evidence: 'window.__remixContext (Remix)' };
        }
        // react-router-dom sets it from 6.4 on: only the major version
        const version = ctx.version(ctx.get('__reactRouterVersion'));
        return version ? { version: `${version}.x`, evidence: 'window.__reactRouterVersion' } : null;
    }
});


==============================================================================
detect/js/recharts.js  (10 lines)
==============================================================================

// Recharts is bundled with the React app: every chart renders a div.recharts-wrapper around an svg.recharts-surface
window[Symbol.for('dosson')].frameworks.add({
    id: 'recharts', name: 'Recharts', kind: 'js', href: 'https://recharts.org', npm: 'recharts', github: 'recharts/recharts',
    detect(ctx) {
        if (ctx.get('Recharts.ResponsiveContainer')) {
            return { version: ctx.fromUrl('recharts')?.version, evidence: 'window.Recharts' };
        }
        return ctx.query('.recharts-wrapper .recharts-surface') ? { version: ctx.fromUrl('recharts')?.version, evidence: 'recharts-wrapper class' } : null;
    }
});


==============================================================================
detect/js/redux.js  (13 lines)
==============================================================================

// Redux: window.Redux (UMD builds before 5) or a URL. A bundled Redux leaves nothing on the page, and
// __REDUX_DEVTOOLS_EXTENSION__ only says the DevTools extension is installed
window[Symbol.for('dosson')].frameworks.add({
    id: 'redux', name: 'Redux', kind: 'js', href: 'https://redux.js.org', npm: 'redux', github: 'reduxjs/redux',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('redux');
        const Redux = ctx.get('Redux');
        if (Redux && typeof Redux.createStore === 'function' && typeof Redux.combineReducers === 'function' && typeof Redux.applyMiddleware === 'function') {
            return fromUrl || { evidence: 'window.Redux' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/redwood.js  (13 lines)
==============================================================================

// RedwoodJS: @redwoodjs/web's config sets globalThis.RWJS_API_GRAPHQL_URL, RWJS_API_URL and __REDWOOD__APP_TITLE;
// the app renders into <div id="redwood-app">
window[Symbol.for('dosson')].frameworks.add({
    id: 'redwood', name: 'RedwoodJS', kind: 'js', href: 'https://redwoodjs.com', npm: '@redwoodjs/web', github: 'redwoodjs/graphql',
    detect(ctx) {
        for (const name of ['RWJS_API_GRAPHQL_URL', '__REDWOOD__APP_TITLE']) {
            if (typeof ctx.get(name) === 'string') {
                return { evidence: `window.${name}` };
            }
        }
        return ctx.query('div#redwood-app') ? { evidence: '<div id="redwood-app">' } : null;
    }
});


==============================================================================
detect/js/requirejs.js  (5 lines)
==============================================================================

// RequireJS
window[Symbol.for('dosson')].frameworks.add({
    id: 'requirejs', name: 'RequireJS', kind: 'js', href: 'https://requirejs.org', npm: 'requirejs', github: 'requirejs/requirejs',
    detect: (ctx) => ctx.globalVersion('requirejs.version')
});


==============================================================================
detect/js/riot.js  (5 lines)
==============================================================================

// Riot.js
window[Symbol.for('dosson')].frameworks.add({
    id: 'riot', name: 'Riot.js', kind: 'js', href: 'https://riot.js.org', npm: 'riot', github: 'riot/riot',
    detect: (ctx) => ctx.globalVersion('riot.version') || ctx.fromUrl('riot')
});


==============================================================================
detect/js/rxjs.js  (14 lines)
==============================================================================

// RxJS: window.rxjs from the UMD bundle (7 and before). Bundled, it leaves nothing on the page. No version: the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'rxjs', name: 'RxJS', kind: 'js', href: 'https://rxjs.dev', npm: 'rxjs', github: 'ReactiveX/rxjs',
    detect(ctx) {
        if (typeof ctx.get('rxjs.Observable') === 'function' && typeof ctx.get('rxjs.Subject') === 'function') {
            return ctx.fromUrl('rxjs') || { evidence: 'window.rxjs' };
        }
        // RxJS 5 UMD was Rx
        if (typeof ctx.get('Rx.Observable') === 'function' && typeof ctx.get('Rx.Subject') === 'function') {
            return ctx.fromUrl('rxjs') || { version: '≤5', evidence: 'window.Rx' };
        }
        return null;
    }
});


==============================================================================
detect/js/scriptaculous.js  (10 lines)
==============================================================================

// script.aculo.us: Scriptaculous.Version, on top of Prototype
window[Symbol.for('dosson')].frameworks.add({
    id: 'scriptaculous', name: 'script.aculo.us', kind: 'js', href: 'https://script.aculo.us', github: 'madrobby/scriptaculous',
    detect(ctx) {
        if (!ctx.get('Scriptaculous') || typeof ctx.get('Scriptaculous.load') !== 'function') {
            return null;
        }
        return ctx.globalVersion('Scriptaculous.Version') || { evidence: 'window.Scriptaculous' };
    }
});


==============================================================================
detect/js/scrollreveal.js  (16 lines)
==============================================================================

// ScrollReveal: window.ScrollReveal (with isSupported and debug), else what it leaves when bundled: the sr class on
// <html> and data-sr-id on revealed elements. The version is only on its instance, so it comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'scrollreveal', name: 'ScrollReveal', kind: 'js', href: 'https://scrollrevealjs.org', npm: 'scrollreveal', github: 'jlmakes/scrollreveal',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('scrollreveal');
        const global = ctx.get('ScrollReveal');
        if (typeof global === 'function' && typeof global.isSupported === 'function' && 'debug' in global) {
            return { version: fromUrl?.version, evidence: 'window.ScrollReveal' };
        }
        if (ctx.doc.documentElement.classList.contains('sr') && ctx.hasAttribute(/^data-sr-id$/)) {
            return { version: fromUrl?.version, evidence: 'sr class on <html>, data-sr-id' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/select2.js  (18 lines)
==============================================================================

// Select2 is a jQuery plugin (jQuery.fn.select2); version 4 hides each select it replaces with select2-hidden-accessible
// (3 used select2-offscreen) and adds a .select2-container
window[Symbol.for('dosson')].frameworks.add({
    id: 'select2', name: 'Select2', kind: 'js', href: 'https://select2.org', npm: 'select2', github: 'select2/select2',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('select2');
        if (ctx.hasClass('select2-hidden-accessible') && ctx.hasClass('select2-container')) {
            return { version: fromUrl?.version || '4.x', evidence: 'select2-hidden-accessible class' };
        }
        if (ctx.hasClass('select2-offscreen') && ctx.hasClass('select2-container')) {
            return { version: fromUrl?.version || '3.x', evidence: 'select2-offscreen class' };
        }
        if (typeof ctx.get('jQuery.fn.select2') === 'function') {
            return { version: fromUrl?.version || (ctx.get('jQuery.fn.select2.amd') ? '4.x' : undefined), evidence: 'jQuery.fn.select2' };
        }
        return null;
    }
});


==============================================================================
detect/js/sencha-touch.js  (11 lines)
==============================================================================

// Sencha Touch: Ext.setVersion('touch', …) puts its version in Ext.versions.touch (Ext JS registers 'extjs' instead)
window[Symbol.for('dosson')].frameworks.add({
    id: 'sencha-touch', name: 'Sencha Touch', kind: 'js', href: 'https://www.sencha.com/products/touch/',
    detect(ctx) {
        const touch = ctx.get('Ext.versions.touch');
        if (!touch) {
            return null;
        }
        return { version: ctx.version(touch.version || String(touch)), evidence: 'window.Ext.versions.touch' };
    }
});


==============================================================================
detect/js/slate.js  (10 lines)
==============================================================================

// Slate (slate-react) renders its editable with data-slate-editor and its nodes with data-slate-node
window[Symbol.for('dosson')].frameworks.add({
    id: 'slate', name: 'Slate', kind: 'js', href: 'https://docs.slatejs.org', npm: 'slate', github: 'ianstormtaylor/slate',
    detect(ctx) {
        if (ctx.query('[data-slate-editor="true"] [data-slate-node]')) {
            return { version: ctx.fromUrl('slate-react')?.version || ctx.fromUrl('slate')?.version, evidence: '[data-slate-editor] with [data-slate-node]' };
        }
        return ctx.fromUrl('slate-react') || null;
    }
});


==============================================================================
detect/js/slick.js  (11 lines)
==============================================================================

// Slick is a jQuery plugin (jQuery.fn.slick); each slider it starts gets slick-initialized and a .slick expando
window[Symbol.for('dosson')].frameworks.add({
    id: 'slick', name: 'Slick', kind: 'js', href: 'https://kenwheeler.github.io/slick/', npm: 'slick-carousel', github: 'kenwheeler/slick',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('slick-carousel') || ctx.fromUrl('slick');
        if (ctx.hasClass('slick-initialized')) {
            return fromUrl || { evidence: 'slick-initialized class' };
        }
        return typeof ctx.get('jQuery.fn.slick') === 'function' ? fromUrl || { evidence: 'jQuery.fn.slick' } : null;
    }
});


==============================================================================
detect/js/socketio.js  (21 lines)
==============================================================================

// Socket.IO client: window.io (a function with Manager, Socket and protocol), else its polling requests to
// /socket.io/?EIO=4 (Engine.IO 4 is Socket.IO 3 and 4, 3 is Socket.IO 2 and before)
window[Symbol.for('dosson')].frameworks.add({
    id: 'socketio', name: 'Socket.IO', kind: 'js', href: 'https://socket.io', npm: 'socket.io-client', github: 'socketio/socket.io',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('socket.io-client') || ctx.fromUrl('socket.io');
        if (fromUrl) {
            return fromUrl;
        }
        const io = ctx.get('io');
        const engine = (protocol) => protocol >= 4 ? '≥3' : protocol === 3 ? '≤2' : undefined;
        if (typeof io === 'function' && typeof io.Manager === 'function' && typeof io.Socket === 'function' && typeof io.protocol === 'number') {
            return { version: io.protocol >= 5 ? '≥3' : io.protocol === 4 ? '≤2' : undefined, evidence: 'window.io' };
        }
        const polling = ctx.url(/\/socket\.io\/\?(?:.*&)?EIO=\d/);
        if (polling) {
            return { version: engine(Number(polling.match(/EIO=(\d)/)[1])), evidence: 'requests to /socket.io/?EIO=' };
        }
        return null;
    }
});


==============================================================================
detect/js/solid.js  (26 lines)
==============================================================================

// SolidJS: server-rendered pages hydrate through window._$HY, with data-hk on hydrated nodes. Client-rendered (bundled)
// apps leave their delegated events: document._$DX_DELEGATE (a Set of event names, 1.x) and the handlers on the
// elements as $$click, $$input… (dom-expressions, Solid's runtime; __click… before 0.24)
window[Symbol.for('dosson')].frameworks.add({
    id: 'solid', name: 'SolidJS', kind: 'js', href: 'https://www.solidjs.com', npm: 'solid-js', github: 'solidjs/solid',
    detect(ctx) {
        if (ctx.get('_$HY')) {
            return { evidence: 'window._$HY (hydration)' };
        }
        if (ctx.get('Solid$$')) {
            return { evidence: 'window.Solid$$ (development mode)' };
        }
        const fromUrl = ctx.fromUrl('solid-js');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.doc._$DX_DELEGATE instanceof ctx.win.Set) {
            return { evidence: 'document._$DX_DELEGATE (delegated events)' };
        }
        const handler = ctx.expando(/^(?:\$\$[a-z]+|__(?:click|dblclick|input|keydown|keyup|mousedown|mouseup|pointerdown|pointerup|touchstart|focusin|focusout|beforeinput|contextmenu))$/);
        if (handler && typeof handler.value === 'function') {
            return { evidence: `<${handler.element.localName}>.${handler.key} (delegated event)` };
        }
        return null;
    }
});


==============================================================================
detect/js/sortablejs.js  (16 lines)
==============================================================================

// SortableJS: window.Sortable.version, else the instance it keeps on each list under an expando Sortable<timestamp>,
// whose constructor has the version
window[Symbol.for('dosson')].frameworks.add({
    id: 'sortablejs', name: 'SortableJS', kind: 'js', href: 'https://sortablejs.github.io/Sortable/', npm: 'sortablejs', github: 'SortableJS/Sortable',
    detect(ctx) {
        const global = ctx.get('Sortable');
        if (typeof global === 'function' && typeof global.create === 'function') {
            return ctx.globalVersion('Sortable.version') || ctx.fromUrl('sortablejs') || { evidence: 'window.Sortable' };
        }
        const found = ctx.expando(/^Sortable\d{10,}$/);
        if (found && found.value && typeof found.value.toArray === 'function') {
            return { version: ctx.version(found.value.constructor?.version), evidence: `${found.key.replace(/\d+$/, '…')} on <${found.element.localName}>` };
        }
        return ctx.fromUrl('sortablejs') || null;
    }
});


==============================================================================
detect/js/splide.js  (19 lines)
==============================================================================

// Splide marks each slider it mounts: splide and is-initialized (3+), or its type and direction (splide--loop,
// splide--ltr… before 3). It exposes window.Splide when loaded from a CDN (the module, { default: Splide }, in 1.0
// and 1.1)
window[Symbol.for('dosson')].frameworks.add({
    id: 'splide', name: 'Splide', kind: 'js', href: 'https://splidejs.com', npm: '@splidejs/splide', github: 'Splidejs/splide',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('splide');
        const global = ctx.get('Splide');
        const Splide = typeof global === 'function' ? global : global?.default;
        if (typeof Splide === 'function' && (Splide.STATES || typeof Splide.prototype?.mount === 'function')) {
            return fromUrl || { evidence: 'window.Splide' };
        }
        if (ctx.query('.splide.is-initialized')) {
            return { version: fromUrl?.version, evidence: 'splide is-initialized classes' };
        }
        const mounted = ctx.query('.splide[class*="splide--"] > .splide__track');
        return mounted ? { version: fromUrl?.version, evidence: 'splide--* classes on a .splide' } : null;
    }
});


==============================================================================
detect/js/stencil.js  (8 lines)
==============================================================================

// Stencil (Ionic's components…): its style tags carry sty-id, server-rendered nodes s-id
window[Symbol.for('dosson')].frameworks.add({
    id: 'stencil', name: 'Stencil', kind: 'js', href: 'https://stenciljs.com', npm: '@stencil/core', github: 'stenciljs/core',
    detect(ctx) {
        const marker = ctx.query('style[sty-id], [s-id], [data-stencil-build], style[data-styles]');
        return marker ? { evidence: `<${marker.localName}> with Stencil attributes` } : null;
    }
});


==============================================================================
detect/js/stimulus.js  (8 lines)
==============================================================================

// Stimulus: apps usually keep their Application on window.Stimulus
window[Symbol.for('dosson')].frameworks.add({
    id: 'stimulus', name: 'Stimulus', kind: 'js', href: 'https://stimulus.hotwired.dev', npm: '@hotwired/stimulus', github: 'hotwired/stimulus',
    detect(ctx) {
        const app = ctx.get('Stimulus');
        return app && typeof app.register === 'function' && app.router ? ctx.fromUrl('@hotwired/stimulus') || { evidence: 'window.Stimulus' } : null;
    }
});


==============================================================================
detect/js/svelte.js  (15 lines)
==============================================================================

// Svelte. 4+ adds its major version to window.__svelte.v; scoped styles add svelte-<hash> classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'svelte', name: 'Svelte', kind: 'js', href: 'https://svelte.dev', npm: 'svelte', github: 'sveltejs/svelte',
    detect(ctx) {
        const majors = ctx.get('__svelte.v');
        if (majors instanceof Set && majors.size) {
            return { version: [...majors].map(major => `${major}.x`).join(', '), evidence: 'window.__svelte.v' };
        }
        const scoped = ctx.classesMatching(/^svelte-[a-z0-9]{4,}$/);
        if (scoped.length) {
            return { evidence: `scoped classes (${scoped[0]}…)` };
        }
        return ctx.expando(/^__svelte_meta$/) ? { evidence: '__svelte_meta (development mode)' } : null;
    }
});


==============================================================================
detect/js/sveltekit.js  (11 lines)
==============================================================================

// SvelteKit keeps its state in window.__sveltekit_<hash>, and links carry data-sveltekit-* options
window[Symbol.for('dosson')].frameworks.add({
    id: 'sveltekit', name: 'SvelteKit', kind: 'js', href: 'https://svelte.dev/docs/kit', npm: '@sveltejs/kit', github: 'sveltejs/kit',
    detect(ctx) {
        const key = Object.keys(ctx.win).find(name => name.startsWith('__sveltekit_'));
        if (key) {
            return { evidence: `window.${key}` };
        }
        return ctx.hasAttribute(/^data-sveltekit-/) ? { evidence: 'data-sveltekit-* attributes' } : null;
    }
});


==============================================================================
detect/js/swiper.js  (17 lines)
==============================================================================

// Swiper adds swiper-initialized (swiper-container-initialized before 7) to each slider it starts
window[Symbol.for('dosson')].frameworks.add({
    id: 'swiper', name: 'Swiper', kind: 'js', href: 'https://swiperjs.com', npm: 'swiper', github: 'nolimits4web/swiper',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('swiper');
        if (ctx.hasClass('swiper-initialized')) {
            return { version: fromUrl?.version || '≥7', evidence: 'swiper-initialized class' };
        }
        if (ctx.hasClass('swiper-container-initialized')) {
            return { version: fromUrl?.version || '≤6', evidence: 'swiper-container-initialized class' };
        }
        if (ctx.tags.has('swiper-container')) {
            return { version: fromUrl?.version || '≥9', evidence: '<swiper-container> element' };
        }
        return typeof ctx.get('Swiper') === 'function' ? fromUrl || { evidence: 'window.Swiper' } : null;
    }
});


==============================================================================
detect/js/syncfusion.js  (20 lines)
==============================================================================

// Syncfusion Essential JS 2: ej.base (CDN global scripts) with SDK_VERSION (not before 20), else its URL, else the
// ej2_instances expando every component leaves on its element (bundled)
window[Symbol.for('dosson')].frameworks.add({
    id: 'syncfusion', name: 'Syncfusion', kind: 'js', href: 'https://www.syncfusion.com/javascript-ui-controls', npm: '@syncfusion/ej2-base', github: 'syncfusion/ej2-javascript-ui-controls',
    detect(ctx) {
        const base = ctx.get('ej.base');
        if (base && typeof base.Component === 'function') {
            let major;
            try {
                major = base.getVersion?.();
            } catch (e) { }
            return ctx.globalVersion('ej.base.SDK_VERSION') || ctx.fromUrl('@syncfusion/ej2-base') || { version: major ? `${major}.x` : undefined, evidence: 'window.ej.base' };
        }
        const instances = ctx.expando(/^ej2_instances$/);
        if (instances && Array.isArray(instances.value)) {
            return ctx.fromUrl('@syncfusion/ej2-base') || ctx.fromUrl('ej2') || { evidence: `ej2_instances on <${instances.element.localName}>` };
        }
        return null;
    }
});


==============================================================================
detect/js/three.js  (8 lines)
==============================================================================

// three.js sets window.__THREE__ to its revision ("160") even when bundled
window[Symbol.for('dosson')].frameworks.add({
    id: 'three', name: 'three.js', kind: 'js', href: 'https://threejs.org', npm: 'three', github: 'mrdoob/three.js',
    detect(ctx) {
        const revision = ctx.get('__THREE__') || ctx.get('THREE.REVISION');
        return revision ? { version: `r${revision}`, evidence: ctx.get('__THREE__') ? 'window.__THREE__' : 'window.THREE.REVISION' } : null;
    }
});


==============================================================================
detect/js/tinymce.js  (16 lines)
==============================================================================

// TinyMCE: window.tinymce (set even when bundled), majorVersion + minorVersion; else the editor's container class,
// tox-tinymce (5+) or mce-tinymce (4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'tinymce', name: 'TinyMCE', kind: 'js', href: 'https://www.tiny.cloud', npm: 'tinymce', github: 'tinymce/tinymce',
    detect(ctx) {
        const tinymce = ctx.get('tinymce');
        if (tinymce && typeof tinymce.init === 'function' && tinymce.majorVersion) {
            const version = ctx.version(`${tinymce.majorVersion}.${tinymce.minorVersion}`) || ctx.version(tinymce.majorVersion);
            return { version, evidence: 'window.tinymce.majorVersion' };
        }
        if (ctx.hasClass('tox-tinymce')) {
            return { version: '≥5', evidence: 'tox-tinymce class' };
        }
        return ctx.hasClass('mce-tinymce') ? { version: '4.x', evidence: 'mce-tinymce class' } : null;
    }
});


==============================================================================
detect/js/tippy.js  (23 lines)
==============================================================================

// Tippy.js: window.tippy, else the _tippy instance it keeps on each reference element (bundled; 2+), else the
// data-tooltipped attribute Tippy 0.x and 1 put on the references
window[Symbol.for('dosson')].frameworks.add({
    id: 'tippy', name: 'Tippy.js', kind: 'js', href: 'https://atomiks.github.io/tippyjs/', npm: 'tippy.js', github: 'atomiks/tippyjs',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('tippy.js') || ctx.fromUrl('tippy');
        const tippy = ctx.get('tippy');
        if (typeof tippy === 'function' && (typeof tippy.setDefaultProps === 'function' || typeof tippy.setDefaults === 'function')) {
            return ctx.globalVersion('tippy.version') || fromUrl || { evidence: 'window.tippy' };
        }
        const found = ctx.expando(/^_tippy$/);
        if (found && found.value && typeof found.value.setProps === 'function') {
            return { version: fromUrl?.version || '≥5', evidence: 'element._tippy instance' };
        }
        if (found && found.value && found.value.popper && found.value.reference) {
            return { version: fromUrl?.version || '2.x–4.x', evidence: 'element._tippy instance' };
        }
        if (ctx.query('[data-tippy-root], style[data-tippy-stylesheet]')) {
            return { version: fromUrl?.version, evidence: 'data-tippy-root / data-tippy-stylesheet' };
        }
        return ctx.query('[data-tooltipped][aria-describedby^="tippy-tooltip-"]') ? { version: fromUrl?.version || '≤1', evidence: 'data-tooltipped reference' } : null;
    }
});


==============================================================================
detect/js/tiptap.js  (11 lines)
==============================================================================

// Tiptap puts its Editor on the ProseMirror element (dom.editor, with commands and extensionManager)
window[Symbol.for('dosson')].frameworks.add({
    id: 'tiptap', name: 'Tiptap', kind: 'js', href: 'https://tiptap.dev', npm: '@tiptap/core', github: 'ueberdosis/tiptap',
    detect(ctx) {
        const editor = ctx.query('.ProseMirror')?.editor;
        if (editor && editor.extensionManager && editor.commands) {
            return { version: ctx.fromUrl('@tiptap/core')?.version, evidence: 'Tiptap Editor on .ProseMirror' };
        }
        return ctx.fromUrl('@tiptap/core') || null;
    }
});


==============================================================================
detect/js/tom-select.js  (17 lines)
==============================================================================

// Tom Select: window.TomSelect, else the instance it keeps on each select it enhances (.tomselected, .tomselect).
// No version in the code: it comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'tom-select', name: 'Tom Select', kind: 'js', href: 'https://tom-select.js.org', npm: 'tom-select', github: 'orchidjs/tom-select',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('tom-select');
        const global = ctx.get('TomSelect');
        if (typeof global === 'function' && typeof global.define === 'function') {
            return { version: fromUrl?.version, evidence: fromUrl ? `window.TomSelect, ${fromUrl.evidence}` : 'window.TomSelect' };
        }
        const instance = ctx.query('.tomselected')?.tomselect;
        if (instance && instance.wrapper) {
            return { version: fromUrl?.version, evidence: 'tomselect on .tomselected' };
        }
        return fromUrl || null;
    }
});


==============================================================================
detect/js/turbo.js  (10 lines)
==============================================================================

// Hotwire Turbo (Rails 7+)
window[Symbol.for('dosson')].frameworks.add({
    id: 'turbo', name: 'Hotwire Turbo', kind: 'js', href: 'https://turbo.hotwired.dev', npm: '@hotwired/turbo', github: 'hotwired/turbo',
    detect(ctx) {
        if (ctx.get('Turbo.session')) {
            return ctx.fromUrl('@hotwired/turbo') || { evidence: 'window.Turbo' };
        }
        return ctx.tags.has('turbo-frame') ? { evidence: '<turbo-frame> elements' } : null;
    }
});


==============================================================================
detect/js/turbolinks.js  (19 lines)
==============================================================================

// Turbolinks: window.Turbolinks, set even when bundled. Only Turbolinks 5 has a controller (Turbolinks Classic, 2.x
// and 3.x, has pagesCached)
window[Symbol.for('dosson')].frameworks.add({
    id: 'turbolinks', name: 'Turbolinks', kind: 'js', href: 'https://github.com/turbolinks/turbolinks', npm: 'turbolinks', github: 'turbolinks/turbolinks',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('turbolinks');
        const Turbolinks = ctx.get('Turbolinks');
        if (!Turbolinks || typeof Turbolinks.visit !== 'function') {
            return fromUrl || null;
        }
        if (fromUrl) {
            return fromUrl;
        }
        if (Turbolinks.controller || typeof Turbolinks.setProgressBarDelay === 'function') {
            return { version: '5.x', evidence: 'window.Turbolinks.controller' };
        }
        return { version: typeof Turbolinks.pagesCached === 'function' ? '≤3' : undefined, evidence: 'window.Turbolinks' };
    }
});


==============================================================================
detect/js/underscore.js  (5 lines)
==============================================================================

// Underscore.js. Lodash also lives on window._, but has cloneDeep (forOwn in 0.x)
window[Symbol.for('dosson')].frameworks.add({
    id: 'underscore', name: 'Underscore.js', kind: 'js', href: 'https://underscorejs.org', npm: 'underscore', github: 'jashkenas/underscore',
    detect: (ctx) => typeof (ctx.get('_.cloneDeep') || ctx.get('_.forOwn')) !== 'function' && typeof ctx.get('_.each') === 'function' ? ctx.globalVersion('_.VERSION') || null : null
});


==============================================================================
detect/js/unpoly.js  (10 lines)
==============================================================================

// Unpoly always lives on window.up, with up.version
window[Symbol.for('dosson')].frameworks.add({
    id: 'unpoly', name: 'Unpoly', kind: 'js', href: 'https://unpoly.com', npm: 'unpoly', github: 'unpoly/unpoly',
    detect(ctx) {
        if (typeof ctx.get('up.on') === 'function' && ctx.get('up.fragment')) {
            return ctx.globalVersion('up.version') || ctx.fromUrl('unpoly') || { evidence: 'window.up' };
        }
        return ctx.fromUrl('unpoly') || null;
    }
});


==============================================================================
detect/js/uppy.js  (12 lines)
==============================================================================

// Uppy: window.Uppy.Uppy.VERSION (@uppy/core) with the CDN bundle, else the uppy-Root class of its UI plugins
window[Symbol.for('dosson')].frameworks.add({
    id: 'uppy', name: 'Uppy', kind: 'js', href: 'https://uppy.io', npm: 'uppy', github: 'transloadit/uppy',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('uppy');
        const Uppy = ctx.get('Uppy.Uppy') || ctx.get('Uppy.Core');
        if (typeof Uppy === 'function') {
            return fromUrl || ctx.globalVersion('Uppy.Uppy.VERSION') || ctx.globalVersion('Uppy.Core.VERSION') || { evidence: 'window.Uppy' };
        }
        return ctx.hasClass('uppy-Root') ? { version: fromUrl?.version, evidence: 'uppy-Root class' } : null;
    }
});


==============================================================================
detect/js/vaadin.js  (28 lines)
==============================================================================

// Vaadin. Its web components (24+, also what Flow renders) list themselves in window.Vaadin.registrations, each class
// with its version; Flow adds window.Vaadin.Flow. Vaadin 7 and 8 (GWT client) have window.vaadin with initApplication
window[Symbol.for('dosson')].frameworks.add({
    id: 'vaadin', name: 'Vaadin', kind: 'js', href: 'https://vaadin.com', npm: '@vaadin/component-base', github: 'vaadin/web-components',
    detect(ctx) {
        const registrations = ctx.get('Vaadin.registrations');
        if (Array.isArray(registrations) && registrations.length) {
            const version = registrations.map(component => ctx.version(component?.version)).find(Boolean);
            return { version, evidence: `window.Vaadin.registrations (${registrations.length} components)` };
        }
        if (ctx.get('Vaadin.Flow')) {
            return { evidence: 'window.Vaadin.Flow' };
        }
        if (typeof ctx.get('vaadin.initApplication') === 'function') {
            let version;
            try {
                const clients = ctx.get('vaadin.clients') || {};
                version = Object.values(clients).map(client => ctx.version(client?.getVersionInfo?.()?.vaadinVersion)).find(Boolean);
            } catch (e) { }
            return { version: version || '≤8', evidence: 'window.vaadin.initApplication' };
        }
        const tag = [...ctx.tags].find(name => name.startsWith('vaadin-') && ctx.win.customElements?.get(name));
        if (tag) {
            return { version: ctx.version(ctx.win.customElements.get(tag).version), evidence: `<${tag}> element` };
        }
        return null;
    }
});


==============================================================================
detect/js/velocity.js  (16 lines)
==============================================================================

// Velocity.js: window.Velocity (or jQuery.Velocity) with version { major, minor, patch } in 1.x, a string in 2.x
window[Symbol.for('dosson')].frameworks.add({
    id: 'velocity', name: 'Velocity.js', kind: 'js', href: 'https://velocityjs.org', npm: 'velocity-animate', github: 'julianshapiro/velocity',
    detect(ctx) {
        for (const path of ['Velocity', 'jQuery.Velocity']) {
            const velocity = ctx.get(path);
            if (typeof velocity !== 'function' || !velocity.version) {
                continue;
            }
            const { version } = velocity;
            const exact = typeof version === 'object' ? [version.major, version.minor, version.patch].join('.') : ctx.version(version);
            return { version: ctx.version(exact) || ctx.fromUrl('velocity-animate')?.version, evidence: `window.${path}.version` };
        }
        return ctx.fromUrl('velocity-animate') || null;
    }
});


==============================================================================
detect/js/videojs.js  (17 lines)
==============================================================================

// Video.js: window.videojs.VERSION, else the player it keeps on its .video-js element (el.player), set even when
// bundled
window[Symbol.for('dosson')].frameworks.add({
    id: 'videojs', name: 'Video.js', kind: 'js', href: 'https://videojs.com', npm: 'video.js', github: 'videojs/video.js',
    detect(ctx) {
        const videojs = ctx.get('videojs');
        // getPlayers() came with 5: Video.js 4 has the videojs.players object
        if (typeof videojs === 'function' && (typeof videojs.getPlayers === 'function' || (videojs.players && typeof videojs.players === 'object' && 'VERSION' in videojs))) {
            return ctx.globalVersion('videojs.VERSION') || ctx.fromUrl('video.js') || { evidence: 'window.videojs' };
        }
        const player = ctx.query('.video-js')?.player;
        if (player && typeof player.techName_ === 'string' && typeof player.paused === 'function') {
            return { version: ctx.fromUrl('video.js')?.version, evidence: 'player on .video-js' };
        }
        return null;
    }
});


==============================================================================
detect/js/vite.js  (16 lines)
==============================================================================

// Vite's dev server loads /@vite/client and tags its styles data-vite-dev-id. A build's index.html loads its entry as
// <script type="module" crossorigin src="…/assets/<name>-<hash>.js">, the way Vite writes it
window[Symbol.for('dosson')].frameworks.add({
    id: 'vite', name: 'Vite (runtime)', kind: 'js', href: 'https://vite.dev', npm: 'vite', github: 'vitejs/vite',
    detect(ctx) {
        if (ctx.url(/\/@vite\/client(?:[?#]|$)/)) {
            return { evidence: '/@vite/client (dev server)' };
        }
        if (ctx.query('style[data-vite-dev-id]')) {
            return { evidence: '<style data-vite-dev-id> (dev server)' };
        }
        const entry = Array.from(ctx.doc.querySelectorAll('script[type="module"][crossorigin][src]'))
            .find(script => /\/assets\/[\w.-]+-[\w-]{8}\.js(?:[?#]|$)/.test(script.src));
        return entry ? { evidence: `<script type="module" crossorigin> ${new URL(entry.src).pathname}` } : null;
    }
});


==============================================================================
detect/js/vitepress.js  (17 lines)
==============================================================================

// VitePress: <meta name="generator" content="VitePress v1.6.3">, window.__VP_HASH_MAP__ / __VP_SITE_DATA__, its VPApp root
window[Symbol.for('dosson')].frameworks.add({
    id: 'vitepress', name: 'VitePress', kind: 'js', href: 'https://vitepress.dev', npm: 'vitepress', github: 'vuejs/vitepress',
    detect(ctx) {
        const generator = ctx.generator(/VitePress\s+v?(\d[\w.-]*)/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        for (const name of ['__VP_HASH_MAP__', '__VP_SITE_DATA__']) {
            const value = ctx.get(name);
            if (value && typeof value === 'object') {
                return { evidence: `window.${name}` };
            }
        }
        return ctx.query('#app > .Layout, #app > .VPApp') && ctx.hasClass('VPContent') ? { evidence: 'VPContent class' } : null;
    }
});


==============================================================================
detect/js/vue.js  (24 lines)
==============================================================================

// Vue. 3 puts the app on its container (__vue_app__, with the version) and the component on nodes
// (__vueParentComponent); 2 puts the instance on its root node (__vue__)
window[Symbol.for('dosson')].frameworks.add({
    id: 'vue', name: 'Vue', kind: 'js', href: 'https://vuejs.org', npm: 'vue', github: 'vuejs/core',
    detect(ctx) {
        const global = ctx.globalVersion('Vue.version');
        if (global) {
            return global;
        }
        const app = ctx.expando(/^__vue_app__$/);
        if (app) {
            return { version: ctx.version(app.value?.version) || '3.x', evidence: `__vue_app__ on <${app.element.localName}>` };
        }
        const component = ctx.expando(/^__vueParentComponent$/);
        if (component) {
            return { version: ctx.version(component.value?.appContext?.app?.version) || '3.x', evidence: `__vueParentComponent on <${component.element.localName}>` };
        }
        const instance = ctx.expando(/^__vue__$/);
        if (instance) {
            return { version: ctx.version(instance.value?.$root?.constructor?.version) || '2.x', evidence: `__vue__ on <${instance.element.localName}>` };
        }
        return ctx.fromUrl('vue') || null;
    }
});


==============================================================================
detect/js/vue-router.js  (19 lines)
==============================================================================

// Vue Router: $router on the Vue 3 app (__vue_app__.config.globalProperties, 4+) or on the Vue 2 root (__vue__,
// whose VueRouter class has the version)
window[Symbol.for('dosson')].frameworks.add({
    id: 'vue-router', name: 'Vue Router', kind: 'js', href: 'https://router.vuejs.org', npm: 'vue-router', github: 'vuejs/router',
    detect(ctx) {
        const isRouter = (router) => router && typeof router.push === 'function' && typeof router.beforeEach === 'function';
        const app = ctx.expando(/^__vue_app__$/)?.value;
        const router3 = app?.config?.globalProperties?.$router;
        if (isRouter(router3)) {
            return { version: ctx.fromUrl('vue-router')?.version || '≥4', evidence: '$router on the Vue app' };
        }
        const instance = ctx.expando(/^__vue__$/)?.value;
        const router2 = instance?.$root?.$router;
        if (isRouter(router2)) {
            return { version: ctx.version(router2.constructor?.version) || ctx.fromUrl('vue-router')?.version || '≤3', evidence: '$router on the Vue root' };
        }
        return ctx.globalVersion('VueRouter.version') || ctx.fromUrl('vue-router') || null;
    }
});


==============================================================================
detect/js/vuepress.js  (15 lines)
==============================================================================

// VuePress: <meta name="generator" content="VuePress 2.0.0-rc.19">, else its theme root (vp-theme-container in 2.x,
// theme-container in 1.x) inside #app
window[Symbol.for('dosson')].frameworks.add({
    id: 'vuepress', name: 'VuePress', kind: 'js', href: 'https://vuepress.vuejs.org', npm: 'vuepress', github: 'vuejs/vuepress',
    detect(ctx) {
        const generator = ctx.generator(/VuePress\s+v?(\d[\w.-]*)/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        if (ctx.query('#app > .vp-theme-container')) {
            return { version: '2.x', evidence: '#app > .vp-theme-container' };
        }
        return ctx.query('#app > .theme-container') && ctx.query('#app')?.__vue__ ? { version: '1.x', evidence: '#app > .theme-container' } : null;
    }
});


==============================================================================
detect/js/vuex.js  (22 lines)
==============================================================================

// Vuex: a store ($store with _mutations and _actions) on the Vue 3 app (Vuex 4) or on the Vue 2 root (Vuex 3 and
// before: _makeLocalGettersCache since 3.1.3), window.Vuex.version
window[Symbol.for('dosson')].frameworks.add({
    id: 'vuex', name: 'Vuex', kind: 'js', href: 'https://vuex.vuejs.org', npm: 'vuex', github: 'vuejs/vuex',
    detect(ctx) {
        const global = ctx.globalVersion('Vuex.version');
        if (global) {
            return global;
        }
        const isStore = (store) => store && typeof store.commit === 'function' && typeof store.dispatch === 'function' && store._mutations && store._actions;
        const fromUrl = ctx.fromUrl('vuex')?.version;
        const app = ctx.expando(/^__vue_app__$/)?.value;
        if (isStore(app?.config?.globalProperties?.$store)) {
            return { version: fromUrl || '4.x', evidence: '$store on the Vue app' };
        }
        const rootStore = ctx.expando(/^__vue__$/)?.value?.$root?.$store;
        if (isStore(rootStore)) {
            return { version: fromUrl || ('_makeLocalGettersCache' in rootStore ? '3.x' : '≤3'), evidence: '$store on the Vue root' };
        }
        return null;
    }
});


==============================================================================
detect/js/webix.js  (11 lines)
==============================================================================

// Webix lives on window.webix
window[Symbol.for('dosson')].frameworks.add({
    id: 'webix', name: 'Webix', kind: 'js', href: 'https://webix.com', npm: 'webix',
    detect(ctx) {
        const webix = ctx.get('webix');
        if (!webix || typeof webix !== 'object' || typeof webix.ui !== 'function') {
            return null;
        }
        return ctx.globalVersion('webix.version') || ctx.fromUrl('webix') || { evidence: 'window.webix' };
    }
});


==============================================================================
detect/js/webpack.js  (19 lines)
==============================================================================

// webpack's chunk-loading runtime keeps its chunks in self.webpackChunk<name> (5) or window.webpackJsonp (≤4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'webpack', name: 'Webpack (runtime)', kind: 'js', href: 'https://webpack.js.org', npm: 'webpack', github: 'webpack/webpack',
    detect(ctx) {
        // the runtime replaces push on the array it owns, so a page's own array with that name doesn't count
        const isChunkArray = (value) => Array.isArray(value) && typeof value.push === 'function' && value.push !== Array.prototype.push;
        const names = Object.keys(ctx.win).filter(name => name.startsWith('webpackChunk'));
        const chunks = names.find(name => isChunkArray(ctx.get(name)));
        if (chunks) {
            return { version: '5.x', evidence: `window.${chunks}` };
        }
        const jsonp = ctx.get('webpackJsonp');
        if (isChunkArray(jsonp)) {
            return { version: '4.x', evidence: 'window.webpackJsonp' };
        }
        // webpack 1 to 3: webpackJsonp(chunkIds, moreModules) is a function
        return typeof jsonp === 'function' && jsonp.length >= 2 ? { version: '≤3', evidence: 'window.webpackJsonp()' } : null;
    }
});


==============================================================================
detect/js/wicket.js  (14 lines)
==============================================================================

// Wicket: window.Wicket from wicket-ajax-jquery.js (6+: Wicket.Ajax.Call), wicketAjaxGet from wicket-ajax.js (1.5 and
// before). The JavaScript has no version
window[Symbol.for('dosson')].frameworks.add({
    id: 'wicket', name: 'Wicket', kind: 'js', href: 'https://wicket.apache.org', github: 'apache/wicket',
    detect(ctx) {
        if (typeof ctx.get('Wicket.Ajax.Call') === 'function' && ctx.get('Wicket.Event')) {
            return { version: '≥6', evidence: 'window.Wicket.Ajax.Call' };
        }
        if (typeof ctx.get('wicketAjaxGet') === 'function' && ctx.get('Wicket')) {
            return { version: '≤1.5', evidence: 'window.wicketAjaxGet' };
        }
        return null;
    }
});


==============================================================================
detect/js/yui.js  (5 lines)
==============================================================================

// YUI
window[Symbol.for('dosson')].frameworks.add({
    id: 'yui', name: 'YUI', kind: 'js', href: 'https://clarle.github.io/yui3/', npm: 'yui', github: 'yui/yui3',
    detect: (ctx) => ctx.globalVersion('YUI.version')
});


==============================================================================
detect/js/zepto.js  (10 lines)
==============================================================================

// Zepto always sets window.Zepto, a function with Zepto.zepto.qsa. It has no version property: that comes from the URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'zepto', name: 'Zepto', kind: 'js', href: 'https://zeptojs.com', npm: 'zepto', github: 'madrobby/zepto',
    detect(ctx) {
        if (typeof ctx.get('Zepto') !== 'function' || typeof ctx.get('Zepto.zepto.qsa') !== 'function') {
            return null;
        }
        return ctx.fromUrl('zepto') || { evidence: 'window.Zepto' };
    }
});


==============================================================================
detect/css/7css.js  (19 lines)
==============================================================================

// 7.css, Windows 7 styles. It sets --w7-* custom properties on :root (on .win7 in its scoped build)
window[Symbol.for('dosson')].frameworks.add({
    id: '7css', name: '7.css', kind: 'css', href: 'https://khang-nd.github.io/7.css/', npm: '7.css', github: 'khang-nd/7.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('7.css');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/7\.css v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        if (ctx.cssVar('--w7-surface')) {
            return { evidence: '--w7-* custom properties on :root' };
        }
        const scoped = ctx.query('.win7');
        return scoped && ctx.cssVar('--w7-surface', scoped) ? { evidence: '--w7-* custom properties on .win7' } : null;
    }
});


==============================================================================
detect/css/98css.js  (19 lines)
==============================================================================

// 98.css, Windows 98 styles. It declares the "Pixelated MS Sans Serif" font; XP.css does too, but adds "Perfect DOS VGA 437 Win"
window[Symbol.for('dosson')].frameworks.add({
    id: '98css', name: '98.css', kind: 'css', href: 'https://jdan.github.io/98.css/', npm: '98.css', github: 'jdan/98.css',
    detect(ctx) {
        if (ctx.fromUrl('xp.css') || ctx.font(/^Perfect DOS VGA 437/i)) {
            return null;
        }
        const fromUrl = ctx.fromUrl('98.css');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/98\.css v(\d+\.\d+\.\d+) - https:\/\/github\.com\/jdan/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const font = ctx.font(/^Pixelated MS Sans Serif$/i);
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/adminlte.js  (19 lines)
==============================================================================

// AdminLTE (Bootstrap admin template): its URL, else its layout classes: app-wrapper + app-sidebar (4),
// main-sidebar + content-wrapper (2, 3)
window[Symbol.for('dosson')].frameworks.add({
    id: 'adminlte', name: 'AdminLTE', kind: 'css', href: 'https://adminlte.io', npm: 'admin-lte', github: 'ColorlibHQ/AdminLTE',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('admin-lte') || ctx.fromUrl('adminlte');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/adminlte(?:\.min)?\.(?:css|js)(?:[?#]|$)/i);
        if (ctx.hasClass('app-wrapper') && ctx.hasClass('app-sidebar') && (url || ctx.hasClass('sidebar-wrapper'))) {
            return { version: '4.x', evidence: url ? `loaded ${url.split(/[?#]/)[0]}` : 'AdminLTE 4 classes (app-wrapper, app-sidebar, sidebar-wrapper)' };
        }
        if (ctx.hasClass('main-sidebar') && ctx.hasClass('content-wrapper') && (url || ctx.hasClass('brand-link') || ctx.hasClass('main-header'))) {
            return { version: '≤3', evidence: url ? `loaded ${url.split(/[?#]/)[0]}` : 'AdminLTE classes (main-sidebar, content-wrapper)' };
        }
        return url ? { evidence: `loaded ${url.split(/[?#]/)[0]}` } : null;
    }
});


==============================================================================
detect/css/angular-material.js  (12 lines)
==============================================================================

// Angular Material: mat-* classes. 15+ builds on MDC (mat-mdc-*)
window[Symbol.for('dosson')].frameworks.add({
    id: 'angular-material', name: 'Angular Material', kind: 'css', href: 'https://material.angular.dev', npm: '@angular/material', github: 'angular/components',
    detect(ctx) {
        const mdc = ctx.classesMatching(/^mat-mdc-/);
        if (mdc.length) {
            return { version: '≥15', evidence: `mat-mdc-* classes (${mdc.slice(0, 2).join(', ')}…)` };
        }
        const classes = ctx.classesMatching(/^mat-(button|toolbar|card|form-field|icon|sidenav|table|tab-group|drawer|ripple|focus-indicator)/);
        return classes.length >= 2 ? { evidence: `mat-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/animate-css.js  (18 lines)
==============================================================================

// Animate.css. 4 prefixes its classes (animate__animated) and sets --animate-duration on :root. Quasar's CSS adapts
// Animate.css's base (--animate-duration: .3s, .animated) without being it, so that alone doesn't count there
window[Symbol.for('dosson')].frameworks.add({
    id: 'animate-css', name: 'Animate.css', kind: 'css', href: 'https://animate.style', npm: 'animate.css', github: 'animate-css/animate.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('animate.css');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.hasClass('animate__animated')) {
            return { version: '4.x', evidence: 'animate__animated class' };
        }
        if (ctx.cssVar('--animate-duration') && !ctx.cssVar('--q-primary')) {
            return { version: '4.x', evidence: '--animate-duration on :root' };
        }
        return null;
    }
});


==============================================================================
detect/css/antd.js  (32 lines)
==============================================================================

// Ant Design: ant-* classes. Its CSS-in-JS cache (@ant-design/cssinjs, the StyleContext components read) keys the
// design token by a salt that starts with antd's version: "token%6.6.5-true%…", in production builds too. Before 5.0
// there was no CSS-in-JS
window[Symbol.for('dosson')].frameworks.add({
    id: 'antd', name: 'Ant Design', kind: 'css', href: 'https://ant.design', npm: 'antd', github: 'ant-design/ant-design',
    detect(ctx) {
        const version = ctx.globalVersion('antd.version');
        if (version) {
            return version;
        }
        const classes = ctx.classesMatching(/^ant-(btn|layout|menu|row|col|input|table|card|select|form|modal|typography|space|flex|app)\b/);
        if (classes.length < 2) {
            return null;
        }
        for (const context of ctx.reactComponents().contexts) {
            const cache = context._currentValue?.cache?.cache;
            if (cache instanceof ctx.win.Map) {
                for (const key of cache.keys()) {
                    const match = typeof key === 'string' && key.match(/^token%v?(\d+\.\d+\.\d+[\w.+-]*?)-(?:true|false)?%/);
                    if (match) {
                        return { version: match[1], evidence: `its CSS-in-JS token cache ("${match[0]}…")` };
                    }
                }
            }
        }
        // before 5.0, antd's styles were a stylesheet (antd/dist/antd.css), with no CSS-in-JS <style data-css-hash>
        if (!ctx.query('style[data-css-hash], style[data-token-hash]')) {
            return { version: '≤4', evidence: `ant-* classes (${classes.slice(0, 3).join(', ')}…), without CSS-in-JS styles` };
        }
        return { evidence: `ant-* classes (${classes.slice(0, 3).join(', ')}…)` };
    }
});


==============================================================================
detect/css/aphrodite.js  (5 lines)
==============================================================================

// Aphrodite: the <style data-aphrodite> it injects its rules in
window[Symbol.for('dosson')].frameworks.add({
    id: 'aphrodite', name: 'Aphrodite', kind: 'css', href: 'https://github.com/Khan/aphrodite', npm: 'aphrodite', github: 'Khan/aphrodite',
    detect: (ctx) => ctx.query('style[data-aphrodite]') ? { evidence: '<style data-aphrodite>' } : null
});


==============================================================================
detect/css/arco.js  (16 lines)
==============================================================================

// Arco Design (ByteDance, React and Vue): arco-* classes, its --arcoblue-* palette on <body>
window[Symbol.for('dosson')].frameworks.add({
    id: 'arco', name: 'Arco Design', kind: 'css', href: 'https://arco.design', npm: '@arco-design/web-react', github: 'arco-design/arco-design',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@arco-design/web-react') || ctx.fromUrl('@arco-design/web-vue');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^arco-(btn|input|input-wrapper|card|form|form-item|checkbox|select|table|menu|layout|space|tag|alert|modal|tabs)$/);
        const palette = ctx.doc.body && ctx.cssVar('--arcoblue-6', ctx.doc.body);
        if (classes.length >= 2 || (classes.length && palette)) {
            return { evidence: `arco-* classes (${classes.slice(0, 3).join(', ')}…)${palette ? ' and --arcoblue-* on <body>' : ''}` };
        }
        return null;
    }
});


==============================================================================
detect/css/atlaskit.js  (15 lines)
==============================================================================

// Atlassian Design System (Atlaskit): setGlobalTheme's data-theme="light:light …" on <html>, data-ds--* attributes on
// its components, its --ds-* tokens on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'atlaskit', name: 'Atlassian Design System', kind: 'css', href: 'https://atlassian.design', npm: '@atlaskit/tokens',
    detect(ctx) {
        const theme = ctx.doc.documentElement.getAttribute('data-theme') || '';
        if (/(?:^|\s)(?:light|dark):[\w-]+/.test(theme)) {
            return { evidence: `data-theme="${theme.split(' ')[0]} …" on <html>` };
        }
        if (ctx.hasAttribute(/^data-ds--/)) {
            return { evidence: 'data-ds--* attributes' };
        }
        return ctx.cssVar('--ds-surface') && ctx.cssVar('--ds-text') && ctx.cssVar('--ds-border') ? { evidence: '--ds-* custom properties on :root' } : null;
    }
});


==============================================================================
detect/css/atomizer.js  (10 lines)
==============================================================================

// Atomizer (Atomic CSS, acss.io). It writes CSS for classes named like functions: D(f), P(10px), C(#fff)…
window[Symbol.for('dosson')].frameworks.add({
    id: 'atomizer', name: 'Atomizer', kind: 'css', href: 'https://acss.io', npm: 'atomizer', github: 'acss-io/atomizer',
    detect(ctx) {
        // an optional parent (foo:h>), the property (Bgc), its value in parentheses, then pseudo-class, breakpoint, !
        const classes = ctx.classesMatching(/^(?:[\w-]+(?::[a-z]+)?[>_+])?[A-Z][A-Za-z]{0,5}\([^()\s]*\)(?::[a-z]+)*(?:--[a-z]+)?!?$/);
        const properties = new Set(classes.map(name => name.replace(/^.*?[>_+]?([A-Z][A-Za-z]*)\(.*$/, '$1')));
        return classes.length >= 3 && properties.size >= 2 ? { evidence: `Atomic CSS classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/balloon-css.js  (17 lines)
==============================================================================

// Balloon.css, tooltips from aria-label + data-balloon-pos. 1.x sets --balloon-* on :root, 0.x used data-balloon
window[Symbol.for('dosson')].frameworks.add({
    id: 'balloon-css', name: 'Balloon.css', kind: 'css', href: 'https://kazzkiq.github.io/balloon.css/', npm: 'balloon-css', github: 'kazzkiq/balloon.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('balloon-css') || ctx.fromUrl('balloon.css');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--balloon-color')) {
            return { version: '1.x', evidence: '--balloon-* custom properties on :root' };
        }
        if (ctx.query('[aria-label][data-balloon-pos]')) {
            return { version: '1.x', evidence: 'data-balloon-pos attribute' };
        }
        return ctx.query('[data-balloon][data-balloon-pos]') ? { version: '0.x', evidence: 'data-balloon attribute' } : null;
    }
});


==============================================================================
detect/css/baseweb.js  (8 lines)
==============================================================================

// Base Web (Uber, styled with Styletron): data-baseweb="button"… on its components
window[Symbol.for('dosson')].frameworks.add({
    id: 'baseweb', name: 'Base Web', kind: 'css', href: 'https://baseweb.design', npm: 'baseui', github: 'uber/baseweb',
    detect(ctx) {
        const components = [...new Set(Array.from(ctx.doc.querySelectorAll('[data-baseweb]'), element => element.getAttribute('data-baseweb')))];
        return components.length ? { evidence: `data-baseweb (${components.slice(0, 3).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/basscss.js  (15 lines)
==============================================================================

// Basscss, low-level utility classes. Its CSS sets --h00…--h6 and --caps-letter-spacing on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'basscss', name: 'Basscss', kind: 'css', href: 'https://basscss.com', npm: 'basscss', github: 'basscss/basscss',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('basscss');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--h00') && ctx.cssVar('--caps-letter-spacing')) {
            return { evidence: '--h00 and --caps-letter-spacing on :root' };
        }
        const classes = ['mxn1', 'mxn2', 'mxn3', 'mxn4', 'sm-col', 'md-col', 'lg-col', 'col-right', 'xs-hide', 'sm-hide', 'md-hide', 'lg-hide'].filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `Basscss classes (${classes.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/blueprint.js  (14 lines)
==============================================================================

// Blueprint (Palantir) puts its major version in its class prefix: bp5-button. Before 3.0 the prefix was pt-
// (pt-button), which alone could be a padding utility: only Blueprint's own component classes count
window[Symbol.for('dosson')].frameworks.add({
    id: 'blueprint', name: 'Blueprint', kind: 'css', href: 'https://blueprintjs.com', npm: '@blueprintjs/core', github: 'palantir/blueprint',
    detect(ctx) {
        const classes = ctx.classesMatching(/^bp\d+-/);
        if (!classes.length) {
            const old = ctx.classesMatching(/^pt-(?:button|card|input-group|callout|form-group|control-indicator|navbar|menu-item|popover|tag|intent-(?:primary|success|warning|danger))$/);
            return old.length >= 2 ? { version: '≤2', evidence: `pt-* classes (${old.slice(0, 2).join(', ')}…)` } : null;
        }
        const majors = [...new Set(classes.map(name => name.match(/^bp(\d+)-/)[1]))];
        return { version: majors.map(major => `${major}.x`).join(', '), evidence: `bp*-* classes (${classes.slice(0, 2).join(', ')}…)` };
    }
});


==============================================================================
detect/css/bootstrap.js  (31 lines)
==============================================================================

// Bootstrap. 5 sets --bs-* custom properties on :root, 4 sets --breakpoint-*; its JavaScript knows the exact version
window[Symbol.for('dosson')].frameworks.add({
    id: 'bootstrap', name: 'Bootstrap', kind: 'css', href: 'https://getbootstrap.com', npm: 'bootstrap', github: 'twbs/bootstrap',
    detect(ctx) {
        const exact = ctx.globalVersion('bootstrap.Tooltip.VERSION')
            || ctx.globalVersion('jQuery.fn.tooltip.Constructor.VERSION')
            || ctx.globalVersion('jQuery.fn.modal.Constructor.VERSION');
        if (exact) {
            return exact;
        }
        const banner = ctx.styleBanner(/Bootstrap\s+v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('bootstrap');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--bs-blue') || ctx.cssVar('--bs-body-bg')) {
            return { version: '5.x', evidence: '--bs-* custom properties on :root' };
        }
        // in px: Tailwind 4 also sets --breakpoint-md, in rem
        if (/px$/.test(ctx.cssVar('--breakpoint-md'))) {
            return { version: '4.x', evidence: '--breakpoint-* custom properties on :root' };
        }
        if (ctx.hasClass('glyphicon') || (ctx.hasClass('btn-default') && ctx.classesMatching(/^col-(xs|sm|md|lg)-\d+$/).length)) {
            return { version: '3.x', evidence: 'Bootstrap 3 classes (glyphicon, btn-default, col-*)' };
        }
        return null;
    }
});


==============================================================================
detect/css/bootstrap-icons.js  (11 lines)
==============================================================================

// Bootstrap Icons
window[Symbol.for('dosson')].frameworks.add({
    id: 'bootstrap-icons', name: 'Bootstrap Icons', kind: 'css', href: 'https://icons.getbootstrap.com', npm: 'bootstrap-icons', github: 'twbs/icons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('bootstrap-icons');
        if (fromUrl) {
            return fromUrl;
        }
        return ctx.font(/^bootstrap-icons$/i) ? { evidence: 'font "bootstrap-icons"' } : null;
    }
});


==============================================================================
detect/css/bootstrap-reboot.js  (16 lines)
==============================================================================

// Bootstrap Reboot loaded on its own: bootstrap-reboot.css (its URL has Bootstrap's version) or its banner
window[Symbol.for('dosson')].frameworks.add({
    id: 'bootstrap-reboot', name: 'Bootstrap Reboot', kind: 'css', href: 'https://getbootstrap.com/docs/5.3/content/reboot/', npm: 'bootstrap', github: 'twbs/bootstrap',
    detect(ctx) {
        const banner = ctx.styleBanner(/Bootstrap Reboot\s+v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const url = ctx.url(/\/bootstrap-reboot(?:\.min)?\.css(?:[?#]|$)/);
        if (url) {
            const version = new ctx.win.URL(url, ctx.doc.baseURI).pathname.match(/(?:bootstrap|twitter-bootstrap)[@/]v?(\d+\.\d+(?:\.\d+)?)\//);
            return { version: version ? version[1] : undefined, evidence: `loaded ${url.split(/[?#]/)[0]}` };
        }
        return null;
    }
});


==============================================================================
detect/css/bootstrap-vue.js  (19 lines)
==============================================================================

// BootstrapVue (Vue 2 + Bootstrap 4): window.BootstrapVue, its __BVID__ element ids, b-*/bv-* classes of its own CSS
window[Symbol.for('dosson')].frameworks.add({
    id: 'bootstrap-vue', name: 'BootstrapVue', kind: 'css', href: 'https://bootstrap-vue.org', npm: 'bootstrap-vue', github: 'bootstrap-vue/bootstrap-vue',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('bootstrap-vue');
        const global = ctx.get('BootstrapVue');
        if (global && typeof global.install === 'function') {
            return fromUrl || { evidence: 'window.BootstrapVue' };
        }
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.query('[id^="__BVID__"]')) {
            return { evidence: '__BVID__ element ids' };
        }
        const classes = ctx.classesMatching(/^(bv-no-focus-ring|b-(avatar|calendar|form-tags|form-spinbutton|form-btn-label-control|rating|toaster|table-sticky-header|table-stacked|dropdown-form|custom-control-(sm|lg)|pagination-pills|iconstack))$/);
        return classes.length && ctx.hasClass('custom-control', 'form-group', 'btn') ? { evidence: `BootstrapVue classes (${classes.slice(0, 3).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/bootswatch.js  (28 lines)
==============================================================================

// Bootswatch (themes for Bootstrap): its URL (bootswatch@5.3.8/dist/flatly/bootstrap.min.css) or its banner. Bundled
// into the site's CSS, a Bootswatch 5 theme still shows in its --bs-primary, --bs-success and --bs-info on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'bootswatch', name: 'Bootswatch', kind: 'css', href: 'https://bootswatch.com', npm: 'bootswatch', github: 'thomaspark/bootswatch',
    detect(ctx) {
        const banner = ctx.styleBanner(/Bootswatch\s+v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const found = ctx.urlVersion('bootswatch');
        if (found) {
            const theme = new ctx.win.URL(found.url, ctx.doc.baseURI).pathname.match(/\/(\w+)\/bootstrap(?:\.min)?\.css$/);
            return { version: found.version, evidence: `loaded ${found.url.split(/[?#]/)[0]}${theme ? ` (theme ${theme[1]})` : ''}` };
        }
        const themes = {
            brite: '#a2e436 #68d391 #22d2ed', cerulean: '#2fa4e7 #73a839 #033c73', cosmo: '#2780e3 #3fb618 #9954bb', cyborg: '#2a9fd6 #77b300 #93c',
            darkly: '#375a7f #00bc8c #3498db', flatly: '#2c3e50 #18bc9c #3498db', journal: '#eb6864 #22b24c #369', litera: '#4582ec #02b875 #17a2b8',
            lumen: '#158cba #28b62c #75caeb', lux: '#1a1a1a #4bbf73 #1f9bcf', materia: '#2196f3 #4caf50 #9c27b0', minty: '#78c2ad #56cc9d #6cc3d5',
            morph: '#378dfc #43cc29 #5b62f4', pulse: '#593196 #13b955 #009cdc', quartz: '#e83283 #41d7a7 #39cbfb', sandstone: '#325d88 #93c54b #29abe0',
            simplex: '#d9230f #469408 #029acf', sketchy: '#333 #28a745 #17a2b8', slate: '#3a3f44 #62c462 #5bc0de', solar: '#b58900 #2aa198 #268bd2',
            spacelab: '#446e9b #3cb521 #3399f3', superhero: '#df6919 #5cb85c #5bc0de', united: '#e95420 #38b44a #17a2b8', vapor: '#6f42c1 #3cf281 #1ba2f6',
            yeti: '#008cba #43ac6a #5bc0de', zephyr: '#3459e6 #2fb380 #287bb5'
        };
        const colors = ['--bs-primary', '--bs-success', '--bs-info'].map(name => ctx.cssVar(name).toLowerCase()).join(' ');
        const theme = Object.keys(themes).find(name => themes[name] === colors);
        return theme ? { version: '5.x', evidence: `theme ${theme}: its --bs-primary, --bs-success and --bs-info on :root (${colors})` } : null;
    }
});


==============================================================================
detect/css/bourbon.js  (14 lines)
==============================================================================

// Bourbon, a Sass mixin library: nothing of it survives in the CSS but what its mixins and variables output.
// The most telling is its $font-stack-system ("Avenir Next"… "Franklin Gothic Medium", "Century Gothic", "Liberation Sans")
window[Symbol.for('dosson')].frameworks.add({
    id: 'bourbon', name: 'Bourbon', kind: 'css', href: 'https://www.bourbon.io', npm: 'bourbon', github: 'thoughtbot/bourbon',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('bourbon');
        if (fromUrl) {
            return fromUrl;
        }
        const stack = /Avenir Next"?,\s*"?Avenir"?,\s*"?Segoe UI"?,\s*"?Lucida Grande[^]*Franklin Gothic Medium"?,\s*"?Century Gothic"?,\s*"?Liberation Sans/i;
        const rule = ctx.styleRules().find(rule => stack.test(rule.style.fontFamily));
        return rule ? { evidence: `Bourbon's system font stack (${rule.selectorText})` } : null;
    }
});


==============================================================================
detect/css/boxicons.js  (14 lines)
==============================================================================

// Boxicons: its "boxicons" font, its <box-icon> web component, its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'boxicons', name: 'Boxicons', kind: 'css', href: 'https://boxicons.com', npm: 'boxicons', github: 'atisawd/boxicons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('boxicons');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.font(/^boxicons$/i)) {
            return { evidence: 'font "boxicons"' };
        }
        return ctx.tags.has('box-icon') ? { evidence: '<box-icon> elements' } : null;
    }
});


==============================================================================
detect/css/buefy.js  (19 lines)
==============================================================================

// Buefy (Bulma components for Vue): its own b-* classes (b-checkbox, b-tabs…) next to Bulma's, in a Vue app
window[Symbol.for('dosson')].frameworks.add({
    id: 'buefy', name: 'Buefy', kind: 'css', href: 'https://buefy.org', npm: 'buefy', github: 'buefy/buefy',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('buefy');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/Buefy v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        // b-table, b-tooltip, b-sidebar and b-skeleton are BootstrapVue's too
        const classes = ctx.classesMatching(/^b-(checkbox|radio|tabs|numberinput|steps|slider|clockpicker|colorpicker-\w+|image-wrapper|tree)$/);
        const bulma = ctx.cssVar('--bulma-scheme-h') || ctx.hasClass('is-primary', 'is-info', 'is-success', 'is-clearfix', 'control-label');
        const vue = ctx.get('__VUE__') || ctx.get('Vue') || ctx.query('[data-v-app]');
        return classes.length && bulma && vue && !ctx.query('[id^="__BVID__"]') ? { evidence: `Buefy classes (${classes.slice(0, 3).join(', ')}) with Bulma, in a Vue app` } : null;
    }
});


==============================================================================
detect/css/bulma.js  (19 lines)
==============================================================================

// Bulma. 1.0 sets --bulma-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'bulma', name: 'Bulma', kind: 'css', href: 'https://bulma.io', npm: 'bulma', github: 'jgthms/bulma',
    detect(ctx) {
        const banner = ctx.styleBanner(/bulma\.io\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('bulma');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--bulma-primary-h') || ctx.cssVar('--bulma-scheme-h')) {
            return { version: '1.x', evidence: '--bulma-* custom properties on :root' };
        }
        const classes = ['navbar-burger', 'is-primary', 'columns', 'hero-body', 'is-size-1', 'is-fullwidth'].filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `Bulma classes (${classes.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/carbon.js  (12 lines)
==============================================================================

// Carbon (IBM): cds--* classes in 11, bx--* before
window[Symbol.for('dosson')].frameworks.add({
    id: 'carbon', name: 'Carbon', kind: 'css', href: 'https://carbondesignsystem.com', npm: '@carbon/styles', github: 'carbon-design-system/carbon',
    detect(ctx) {
        const v11 = ctx.classesMatching(/^cds--/);
        if (v11.length) {
            return { version: '11.x', evidence: `cds--* classes (${v11.slice(0, 2).join(', ')}…)` };
        }
        const older = ctx.classesMatching(/^bx--/);
        return older.length ? { version: '≤10', evidence: `bx--* classes (${older.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/chakra.js  (20 lines)
==============================================================================

// Chakra UI: chakra-* classes and --chakra-* custom properties. 3 names its slot classes chakra-card__root and has
// semantic color tokens (--chakra-colors-fg-*); 2 has chakra-body-* tokens. Neither keeps its exact version
window[Symbol.for('dosson')].frameworks.add({
    id: 'chakra', name: 'Chakra UI', kind: 'css', href: 'https://chakra-ui.com', npm: '@chakra-ui/react', github: 'chakra-ui/chakra-ui',
    detect(ctx) {
        const classes = ctx.classesMatching(/^chakra-/);
        const tokens = ctx.cssVar('--chakra-ring-color') || ctx.cssVar('--chakra-colors-white') || ctx.cssVar('--chakra-colors-fg');
        if (!classes.length && !tokens) {
            return null;
        }
        const evidence = classes.length ? `chakra-* classes (${classes.slice(0, 2).join(', ')}…)` : '--chakra-* custom properties';
        if (ctx.cssVar('--chakra-colors-fg-muted') || classes.some(name => /^chakra-[a-z-]+__[a-z-]+$/.test(name))) {
            return { version: '3.x', evidence: `${evidence}, v3 slot classes or semantic tokens (--chakra-colors-fg-muted)` };
        }
        if (ctx.cssVar('--chakra-colors-chakra-body-bg')) {
            return { version: '2.x', evidence: `${evidence}, --chakra-colors-chakra-body-bg (v2)` };
        }
        return { evidence };
    }
});


==============================================================================
detect/css/chota.js  (16 lines)
==============================================================================

// Chota: its banner ("chota.css v0.9.2") or URL, else its camelCase custom properties on :root (--color-lightGrey…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'chota', name: 'Chota', kind: 'css', href: 'https://jenil.github.io/chota/', npm: 'chota', github: 'jenil/chota',
    detect(ctx) {
        const banner = ctx.styleBanner(/chota(?:\.css)?\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('chota');
        if (fromUrl) {
            return fromUrl;
        }
        const names = ['--color-lightGrey', '--color-darkGrey', '--bg-secondary-color', '--grid-maxWidth'];
        return names.every(name => ctx.cssVar(name)) ? { evidence: `custom properties on :root (${names.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/cirrus.js  (15 lines)
==============================================================================

// Cirrus: its banner ("Cirrus 0.8.0") or URL, else its --cirrus-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'cirrus', name: 'Cirrus', kind: 'css', href: 'https://cirrus-ui.com', npm: 'cirrus-ui', github: 'Spiderpig86/Cirrus',
    detect(ctx) {
        const banner = ctx.styleBanner(/\bCirrus\s+v?(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('cirrus-ui') || ctx.fromUrl('cirrus');
        if (fromUrl) {
            return fromUrl;
        }
        return ctx.cssVar('--cirrus-fg') && ctx.cssVar('--cirrus-bg') ? { evidence: '--cirrus-* custom properties on :root' } : null;
    }
});


==============================================================================
detect/css/clarity.js  (19 lines)
==============================================================================

// VMware Clarity: @clr/ui's URL, its --clr-* custom properties on :root, clr-* classes, Clarity Core's cds-* attributes
window[Symbol.for('dosson')].frameworks.add({
    id: 'clarity', name: 'Clarity', kind: 'css', href: 'https://clarity.design', npm: '@clr/ui', github: 'vmware-clarity/ng-clarity',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@clr/ui') || ctx.fromUrl('@cds/core');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--clr-basefont-size') || ctx.cssVar('--clr-global-font-color')) {
            return { evidence: '--clr-* custom properties on :root' };
        }
        const classes = ctx.classesMatching(/^clr-(form|control|input|checkbox|radio|select|textarea|password|toggle|datagrid|vertical-nav|wizard|stepper|tree|timeline|signpost|tooltip|dropdown|combobox)/);
        if (classes.length >= 2) {
            return { evidence: `clr-* classes (${classes.slice(0, 2).join(', ')}…)` };
        }
        // Clarity Core: cds-text="body", cds-layout="horizontal gap:md" on the page's elements
        return ctx.query('[cds-text], [cds-layout]') ? { evidence: 'cds-text / cds-layout attributes (Clarity Core)' } : null;
    }
});


==============================================================================
detect/css/coreui.js  (14 lines)
==============================================================================

// CoreUI (Bootstrap-based admin UI kit): its plugins' VERSION, its URL, --cui-* custom properties on :root (4+)
window[Symbol.for('dosson')].frameworks.add({
    id: 'coreui', name: 'CoreUI', kind: 'css', href: 'https://coreui.io', npm: '@coreui/coreui', github: 'coreui/coreui',
    detect(ctx) {
        const exact = ctx.globalVersion('coreui.Tooltip.VERSION') || ctx.fromUrl('@coreui/coreui');
        if (exact) {
            return exact;
        }
        if (ctx.cssVar('--cui-blue') || ctx.cssVar('--cui-body-bg')) {
            return { version: '≥4', evidence: '--cui-* custom properties on :root' };
        }
        return null;
    }
});


==============================================================================
detect/css/css-modules.js  (28 lines)
==============================================================================

// CSS Modules, from the class names bundlers give them: Next.js, Create React App and css-loader setups name them
// <File>_<class>__<hash>, Vite _<class>_<hash of the file>_<line>. Several classes must share a file to count
window[Symbol.for('dosson')].frameworks.add({
    id: 'css-modules', name: 'CSS Modules', kind: 'css', href: 'https://github.com/css-modules/css-modules', github: 'css-modules/css-modules',
    detect(ctx) {
        // the classes matching regex, grouped by their file (the regex's group named file); the largest group
        const largestFile = (regex) => {
            const files = new Map();
            for (const name of ctx.classes) {
                const match = name.match(regex);
                if (match) {
                    files.set(match.groups.file, [...(files.get(match.groups.file) || []), name]);
                }
            }
            return { count: [...files.values()].reduce((sum, names) => sum + names.length, 0), names: [...files.values()].sort((a, b) => b.length - a.length)[0] || [] };
        };
        // the hash is 5 base64 characters, with at least an uppercase letter or a digit (BEM's block_mod__elem has none)
        const webpack = largestFile(/^(?<file>[A-Za-z][A-Za-z0-9-]*)_[A-Za-z][\w-]*__(?=[\w-]*[A-Z0-9])[\w-]{5}$/);
        if (webpack.count >= 3 && webpack.names.length >= 2) {
            return { evidence: `<File>_<class>__<hash> classes (${webpack.names.slice(0, 2).join(', ')}…)` };
        }
        const vite = largestFile(/^_[A-Za-z][\w-]*_(?<file>[a-z0-9]{5})_\d+$/);
        if (vite.count >= 3 && vite.names.length >= 2) {
            return { evidence: `_<class>_<hash>_<line> classes (${vite.names.slice(0, 2).join(', ')}…)` };
        }
        return null;
    }
});


==============================================================================
detect/css/daisyui.js  (17 lines)
==============================================================================

// daisyUI (a Tailwind plugin). Its CDN URL has the exact version; else 5 names its theme colors --color-base-100, 4 --b1
window[Symbol.for('dosson')].frameworks.add({
    id: 'daisyui', name: 'daisyUI', kind: 'css', href: 'https://daisyui.com', npm: 'daisyui', github: 'saadeghi/daisyui',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('daisyui');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--color-base-100') && ctx.cssVar('--radius-box')) {
            return { version: '5.x', evidence: '--color-base-100 and --radius-box on :root' };
        }
        if (ctx.cssVar('--b1') && ctx.cssVar('--rounded-btn')) {
            return { version: '4.x', evidence: '--b1 and --rounded-btn on :root' };
        }
        return null;
    }
});


==============================================================================
detect/css/devextreme-themes.js  (29 lines)
==============================================================================

// DevExtreme themes without DevExtreme's script: the theme's URL, --dx-* custom properties on :root, its DXIcons font,
// dx-* classes. Nothing when the DevExtreme row would show it (DevExpress.ui, a dx-widget with dxRemoveEvent…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'devextreme-themes', name: 'DevExtreme themes', kind: 'css', href: 'https://js.devexpress.com/jQuery/Documentation/Guide/Themes_and_Styles/Predefined_Themes/', npm: 'devextreme-dist', github: 'DevExpress/DevExtreme',
    detect(ctx) {
        const widget = ctx.query('.dx-widget');
        if ((ctx.get('DevExpress.VERSION') && ctx.get('DevExpress.ui'))
            || (widget && (Object.prototype.hasOwnProperty.call(widget, 'dxRemoveEvent') || ctx.classesMatching(/^dx-device-/).length))) {
            return null;
        }
        const fromUrl = ctx.fromUrl('devextreme-dist') || ctx.fromUrl('devextreme');
        if (fromUrl) {
            return fromUrl;
        }
        // https://cdn3.devexpress.com/jslib/24.2.6/css/dx.light.css
        const cdn = ctx.url(/devexpress\.com\/jslib\/\d+\.\d+\.\d+\//);
        if (cdn) {
            return { version: cdn.match(/\/jslib\/(\d+\.\d+\.\d+)\//)[1], evidence: `loaded from ${cdn.split(/[?#]/)[0]}` };
        }
        if (ctx.cssVar('--dx-color-primary')) {
            return { evidence: '--dx-* custom properties on :root' };
        }
        if (ctx.font(/^DXIcons$/)) {
            return { evidence: 'DXIcons font' };
        }
        const classes = ['dx-widget', 'dx-button-content', 'dx-texteditor-input', 'dx-datagrid', 'dx-texteditor-container'].filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `dx-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/divi.js  (18 lines)
==============================================================================

// Divi (Elegant Themes' WordPress theme and builder): <meta name="generator" content="Divi v.4.27.1">, et_pb_* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'divi', name: 'Divi', kind: 'css', href: 'https://www.elegantthemes.com/gallery/divi/',
    detect(ctx) {
        const generator = ctx.query('meta[name="generator" i][content^="Divi" i]')?.content.match(/^Divi\s+v?\.?(\d+\.\d+(?:\.\d+)?)/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        const stylesheet = ctx.url(/\/themes\/Divi\/style[\w.-]*\.css/);
        if (stylesheet) {
            const version = stylesheet.match(/[?&]ver=(\d+\.\d+(?:\.\d+)?)/);
            return { version: version ? version[1] : undefined, evidence: 'loaded the Divi theme stylesheet' };
        }
        const classes = ['et_pb_section', 'et_pb_row', 'et_pb_column', 'et_pb_module', 'et_divi_theme', 'et-db', 'et_pb_button']
            .filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `Divi classes (${classes.slice(0, 3).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/element.js  (12 lines)
==============================================================================

// Element UI (Vue 2) and Element Plus (Vue 3, which sets --el-* custom properties)
window[Symbol.for('dosson')].frameworks.add({
    id: 'element', name: 'Element UI/Plus', kind: 'css', href: 'https://element-plus.org', npm: 'element-plus', github: 'element-plus/element-plus',
    detect(ctx) {
        const classes = ctx.classesMatching(/^el-(button|input|form|table|menu|dialog|select|row|col|card|container)\b/);
        if (classes.length < 2) {
            return null;
        }
        const isPlus = !!ctx.cssVar('--el-color-primary');
        return { version: isPlus ? 'Plus' : undefined, evidence: `el-* classes (${classes.slice(0, 3).join(', ')}…)${isPlus ? ' and --el-* custom properties' : ''}` };
    }
});


==============================================================================
detect/css/elementor.js  (23 lines)
==============================================================================

// Elementor (WordPress page builder): elementorFrontendConfig.version, its <meta name="generator">, elementor-* classes,
// --e-global-* custom properties of its kit
window[Symbol.for('dosson')].frameworks.add({
    id: 'elementor', name: 'Elementor', kind: 'css', href: 'https://elementor.com', github: 'elementor/elementor',
    detect(ctx) {
        const exact = ctx.globalVersion('elementorFrontendConfig.version');
        if (exact) {
            return exact;
        }
        const generator = ctx.query('meta[name="generator" i][content^="Elementor" i]')?.content.match(/^Elementor\s+v?(\d+\.\d+(?:\.\d+)?)/i);
        if (generator) {
            return { version: generator[1], evidence: '<meta name="generator">' };
        }
        const stylesheet = ctx.url(/\/plugins\/elementor\/assets\/css\/frontend[\w.-]*\.css/);
        if (stylesheet) {
            const version = stylesheet.match(/[?&]ver=(\d+\.\d+(?:\.\d+)?)/);
            return { version: version ? version[1] : undefined, evidence: 'loaded the Elementor frontend stylesheet' };
        }
        const classes = ['elementor', 'elementor-section', 'elementor-element', 'elementor-widget', 'elementor-widget-container', 'e-con', 'elementor-kit']
            .filter(name => ctx.hasClass(name)).concat(ctx.classesMatching(/^elementor-kit-\d+$/));
        return classes.length >= 2 ? { evidence: `Elementor classes (${classes.slice(0, 3).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/emotion.js  (5 lines)
==============================================================================

// Emotion (CSS-in-JS, used by MUI 5+, Chakra 2…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'emotion', name: 'Emotion', kind: 'css', href: 'https://emotion.sh', npm: '@emotion/react', github: 'emotion-js/emotion',
    detect: (ctx) => ctx.query('style[data-emotion]') ? { evidence: '<style data-emotion>' } : null
});


==============================================================================
detect/css/eui.js  (8 lines)
==============================================================================

// Elastic UI (React): its eui<Component> classes, set next to Emotion's css-<hash>-eui<Component> ones
window[Symbol.for('dosson')].frameworks.add({
    id: 'eui', name: 'Elastic UI', kind: 'css', href: 'https://eui.elastic.co', npm: '@elastic/eui', github: 'elastic/eui',
    detect(ctx) {
        const classes = ctx.classesMatching(/^eui[A-Z][A-Za-z]+(?:__|--|$)/);
        return classes.length >= 2 ? { evidence: `eui* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/evergreen.js  (18 lines)
==============================================================================

// Evergreen (Segment): styled by ui-box, which writes ub-<property>_<value> classes into a <style data-ui-box>.
// Evergreen 6+ theme colors (#101840, #474d66…) show in those classes. Before Evergreen 5, ui-box's classes started
// with 📦 instead of ub- (📦color_234361)
window[Symbol.for('dosson')].frameworks.add({
    id: 'evergreen', name: 'Evergreen', kind: 'css', href: 'https://evergreen.segment.com', npm: 'evergreen-ui', github: 'segmentio/evergreen',
    detect(ctx) {
        const classes = ctx.classesMatching(/^ub-[a-z-]+_/);
        if (classes.length < 5) {
            const old = ctx.classesMatching(/^\u{1F4E6}[a-z-]+_/u);
            return old.length < 5 ? null : { version: '≤4', evidence: `ui-box's 📦 classes (${old.slice(0, 2).join(', ')}…)` };
        }
        const theme = classes.filter(name => /^ub-(?:color|bg-clr|b-[a-z]+-clr)_(?:101840|474d66|696f8c|8f95b2|d8dae5|3366FF|F9FAFC)$/i.test(name));
        if (theme.length) {
            return { version: '≥6', evidence: `ui-box classes with its theme colors (${theme.slice(0, 2).join(', ')})` };
        }
        return { evidence: `ui-box classes (${classes.slice(0, 2).join(', ')}…)${ctx.query('style[data-ui-box]') ? ', <style data-ui-box>' : ''}` };
    }
});


==============================================================================
detect/css/feather.js  (15 lines)
==============================================================================

// Feather: the <svg class="feather feather-x"> icons feather.replace() makes, window.feather, its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'feather', name: 'Feather', kind: 'css', href: 'https://feathericons.com', npm: 'feather-icons', github: 'feathericons/feather',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('feather-icons');
        if (fromUrl) {
            return fromUrl;
        }
        if (typeof ctx.get('feather.replace') === 'function' && ctx.get('feather.icons')) {
            return { evidence: 'window.feather.replace' };
        }
        const icon = ctx.query('svg.feather[class*="feather-"]');
        return icon ? { evidence: `<svg class="${icon.getAttribute('class')}">` } : null;
    }
});


==============================================================================
detect/css/flowbite.js  (17 lines)
==============================================================================

// Flowbite: its script sets window.FlowbiteInstances and initFlowbite, its components use data-modal-toggle,
// data-dropdown-toggle…
window[Symbol.for('dosson')].frameworks.add({
    id: 'flowbite', name: 'Flowbite', kind: 'css', href: 'https://flowbite.com', npm: 'flowbite', github: 'themesberg/flowbite',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('flowbite');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.get('FlowbiteInstances') && typeof ctx.get('initFlowbite') === 'function') {
            return { evidence: 'window.FlowbiteInstances, window.initFlowbite' };
        }
        const attributes = ['data-modal-toggle', 'data-dropdown-toggle', 'data-collapse-toggle', 'data-drawer-target', 'data-tooltip-target', 'data-popover-target', 'data-dial-toggle', 'data-carousel-item'];
        const found = attributes.filter(name => ctx.attributes.has(name));
        return found.length >= 2 ? { evidence: `Flowbite attributes (${found.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/fluent-ui.js  (11 lines)
==============================================================================

// Fluent UI (Microsoft): fui-* classes in 9, ms-Fabric and ms-* before
window[Symbol.for('dosson')].frameworks.add({
    id: 'fluent-ui', name: 'Fluent UI', kind: 'css', href: 'https://fluent2.microsoft.design', npm: '@fluentui/react-components', github: 'microsoft/fluentui',
    detect(ctx) {
        const v9 = ctx.classesMatching(/^fui-[A-Z]/);
        if (v9.length) {
            return { version: '9.x', evidence: `fui-* classes (${v9.slice(0, 2).join(', ')}…)` };
        }
        return ctx.hasClass('ms-Fabric') ? { version: '≤8', evidence: 'ms-Fabric class' } : null;
    }
});


==============================================================================
detect/css/font-awesome.js  (19 lines)
==============================================================================

// Font Awesome. The major version is in its font's name: "Font Awesome 6 Free", "FontAwesome" (4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'font-awesome', name: 'Font Awesome', kind: 'css', href: 'https://fontawesome.com', npm: '@fortawesome/fontawesome-free', github: 'FortAwesome/Font-Awesome',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('font-awesome') || ctx.fromUrl('fontawesome') || ctx.fromUrl('@fortawesome/fontawesome-free');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^Font ?Awesome/i);
        if (font) {
            const major = font.match(/Awesome (\d+)/i);
            return { version: major ? `${major[1]}.x` : '4.x', evidence: `font "${font}"` };
        }
        if (ctx.hasClass('svg-inline--fa')) {
            return { evidence: 'svg-inline--fa class (SVG icons)' };
        }
        return null;
    }
});


==============================================================================
detect/css/foundation.js  (14 lines)
==============================================================================

// Foundation. Its JavaScript adds <meta class="foundation-mq">
window[Symbol.for('dosson')].frameworks.add({
    id: 'foundation', name: 'Foundation', kind: 'css', href: 'https://get.foundation', npm: 'foundation-sites', github: 'foundation/foundation-sites',
    detect(ctx) {
        const version = ctx.globalVersion('Foundation.version');
        if (version) {
            return version;
        }
        if (ctx.query('meta.foundation-mq')) {
            return { evidence: '<meta class="foundation-mq">' };
        }
        return ctx.hasClass('grid-x') && ctx.hasClass('cell') ? { version: '6.x', evidence: 'grid-x and cell classes' } : null;
    }
});


==============================================================================
detect/css/framework7-css.js  (20 lines)
==============================================================================

// Framework7's CSS without its app (no window.Framework7 or f7 app, else the framework7 detector reports it): --f7-*
// custom properties on :root (4.0+), or before that a framework7*.css stylesheet with Framework7 markup
window[Symbol.for('dosson')].frameworks.add({
    id: 'framework7-css', name: 'Framework7 CSS', kind: 'css', href: 'https://framework7.io', npm: 'framework7', github: 'framework7io/framework7',
    detect(ctx) {
        const global = ctx.get('Framework7');
        if ((typeof global === 'function' && typeof global.Dom7 === 'function') || ctx.query('.framework7-root')?.f7) {
            return null;
        }
        if (ctx.cssVar('--f7-safe-area-top') || ctx.cssVar('--f7-theme-color')) {
            return ctx.fromUrl('framework7') || { evidence: '--f7-* custom properties on :root' };
        }
        // before 4.0 there were no custom properties: a stylesheet named framework7 and its markup
        const sheet = ctx.url(/framework7[^/]*\.css(?:$|[?#])/i);
        if (sheet && ctx.hasClass('page-content', 'navbar', 'list-block', 'list')) {
            return ctx.fromUrl('framework7') || { evidence: `${sheet.split(/[?#]/)[0].split('/').pop()} and Framework7 markup` };
        }
        return null;
    }
});


==============================================================================
detect/css/geist.js  (18 lines)
==============================================================================

// Geist, Vercel's typeface and design system: the Geist / Geist Mono fonts (next/font: --font-geist-sans), the
// --geist-* custom properties of Vercel's sites
window[Symbol.for('dosson')].frameworks.add({
    id: 'geist', name: 'Geist', kind: 'css', href: 'https://vercel.com/geist', npm: 'geist', github: 'vercel/geist-font',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('geist');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^(?:__)?Geist(?!.*Fallback)/);
        if (font) {
            return { evidence: `${font} font` };
        }
        const body = ctx.doc.body || ctx.doc.documentElement;
        const property = ['--font-geist-sans', '--font-geist-mono', '--geist-foreground', '--geist-background'].find(name => ctx.cssVar(name) || ctx.cssVar(name, body));
        return property ? { evidence: `${property} custom property` } : null;
    }
});


==============================================================================
detect/css/glyphicons.js  (15 lines)
==============================================================================

// Glyphicons: the "Glyphicons Halflings" font Bootstrap 3 declares, only when the page uses .glyphicon icons (every
// Bootstrap 3 page declares it), or the fonts of the standalone GLYPHICONS sets ("Glyphicons Regular"…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'glyphicons', name: 'Glyphicons', kind: 'css', href: 'https://glyphicons.com',
    detect(ctx) {
        const font = ctx.font(/^glyphicons/i);
        if (!font) {
            return null;
        }
        if (/halflings/i.test(font)) {
            return ctx.hasClass('glyphicon') ? { evidence: `font "${font}" and .glyphicon icons` } : null;
        }
        return { evidence: `font "${font}"` };
    }
});


==============================================================================
detect/css/goober.js  (11 lines)
==============================================================================

// goober: the <style id="_goober"> it writes its rules in (go<hash> classes)
window[Symbol.for('dosson')].frameworks.add({
    id: 'goober', name: 'goober', kind: 'css', href: 'https://goober.js.org', npm: 'goober', github: 'cristianbote/goober',
    detect(ctx) {
        if (!ctx.query('style#_goober')) {
            return null;
        }
        const classes = ctx.classesMatching(/^go\d{6,}$/);
        return { evidence: `<style id="_goober">${classes.length ? `, go<hash> classes (${classes.slice(0, 2).join(', ')}…)` : ''}` };
    }
});


==============================================================================
detect/css/google-fonts.js  (17 lines)
==============================================================================

// Google Fonts: a stylesheet from fonts.googleapis.com, or font files from fonts.gstatic.com
window[Symbol.for('dosson')].frameworks.add({
    id: 'google-fonts', name: 'Google Fonts', kind: 'css', href: 'https://fonts.google.com',
    detect(ctx) {
        const css = ctx.url(/^https?:\/\/fonts\.googleapis\.com\/(css2?|icon)\b/);
        if (css) {
            let families = [];
            try {
                families = new ctx.win.URL(css).searchParams.getAll('family')
                    .flatMap(family => family.split('|')).map(family => family.split(':')[0]).filter(Boolean);
            } catch (e) { }
            const api = css.match(/\/css2\b/) ? 'CSS API v2' : 'CSS API v1';
            return { evidence: `${api} from fonts.googleapis.com${families.length ? ` (${families.slice(0, 3).join(', ')}${families.length > 3 ? '…' : ''})` : ''}` };
        }
        return ctx.url(/^https?:\/\/fonts\.gstatic\.com\/s\//) ? { evidence: 'font files from fonts.gstatic.com' } : null;
    }
});


==============================================================================
detect/css/grommet.js  (12 lines)
==============================================================================

// Grommet 2: built with babel-plugin-styled-components, so its root keeps a StyledGrommet-sc-<id> class
window[Symbol.for('dosson')].frameworks.add({
    id: 'grommet', name: 'Grommet', kind: 'css', href: 'https://v2.grommet.io', npm: 'grommet', github: 'grommet/grommet',
    detect(ctx) {
        const root = ctx.classesMatching(/^StyledGrommet-sc-/);
        if (root.length) {
            return { version: '2.x', evidence: `${root[0]} class` };
        }
        // Grommet 1: grommetux-* classes
        return ctx.classesMatching(/^grommetux-/).length >= 2 ? { version: '1.x', evidence: 'grommetux-* classes' } : null;
    }
});


==============================================================================
detect/css/gutenberg.js  (26 lines)
==============================================================================

// Gutenberg (the WordPress block editor) styles: wp-block-* classes, --wp--preset--* custom properties (theme.json),
// the block-library stylesheet. The Gutenberg plugin's URL holds its version, WordPress core's holds WordPress's
window[Symbol.for('dosson')].frameworks.add({
    id: 'gutenberg', name: 'Gutenberg block styles', kind: 'css', href: 'https://wordpress.org/gutenberg/', github: 'WordPress/gutenberg',
    detect(ctx) {
        const plugin = ctx.url(/\/wp-content\/plugins\/gutenberg\/build(?:-style)?\/block-library\//);
        if (plugin) {
            const version = plugin.match(/[?&]ver=(\d+\.\d+(?:\.\d+)?)/);
            return { version: version ? version[1] : undefined, evidence: 'block-library stylesheet of the Gutenberg plugin' };
        }
        const core = ctx.url(/\/wp-includes\/css\/dist\/block-library\//) || ctx.query('link#wp-block-library-css')?.href;
        const blocks = ctx.classesMatching(/^wp-block-[a-z]/);
        const preset = ctx.cssVar('--wp--preset--font-size--small') || ctx.cssVar('--wp--preset--color--black')
            || ctx.cssVar('--wp--preset--font-size--small', ctx.doc.body) || ctx.cssVar('--wp--preset--color--black', ctx.doc.body);
        if (!core && !preset && blocks.length < 2) {
            return null;
        }
        const evidence = [
            core && 'WordPress block-library stylesheet',
            preset && '--wp--preset--* custom properties',
            blocks.length && `wp-block-* classes (${blocks.slice(0, 2).join(', ')}${blocks.length > 2 ? '…' : ''})`
        ].filter(Boolean).join(', ');
        const wordpress = core && core.match(/[?&]ver=(\d+\.\d+(?:\.\d+)?)/);
        return { evidence: wordpress ? `${evidence}, WordPress ${wordpress[1]}` : evidence };
    }
});


==============================================================================
detect/css/halfmoon.js  (22 lines)
==============================================================================

// Halfmoon. 2 is a Bootstrap 5 theme with its own --bs-* custom properties (--bs-checkbox-svg-light, --bs-*-hue),
// 1 sets --lm-*/--dm-* ones
window[Symbol.for('dosson')].frameworks.add({
    id: 'halfmoon', name: 'Halfmoon', kind: 'css', href: 'https://www.gethalfmoon.com', npm: 'halfmoon', github: 'halfmoonui/halfmoon',
    detect(ctx) {
        const banner = ctx.styleBanner(/Halfmoon CSS[\s*]+Version:?\s*(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('halfmoon');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--bs-checkbox-svg-light') && ctx.cssVar('--bs-mistyrose-hue')) {
            return { version: '2.x', evidence: 'Halfmoon 2 custom properties on :root (--bs-checkbox-svg-light, --bs-mistyrose-hue)' };
        }
        if (ctx.cssVar('--lm-base-body-bg-color') || ctx.cssVar('--dm-base-body-bg-color')) {
            return { version: '1.x', evidence: 'Halfmoon 1 custom properties on :root (--lm-*, --dm-*)' };
        }
        return null;
    }
});


==============================================================================
detect/css/headlessui.js  (18 lines)
==============================================================================

// Headless UI (React and Vue): data-headlessui-state on its components, headlessui-* ids, #headlessui-portal-root.
// 2.x also sets data-<state> (data-checked…) next to data-headlessui-state
window[Symbol.for('dosson')].frameworks.add({
    id: 'headlessui', name: 'Headless UI', kind: 'css', href: 'https://headlessui.com', npm: '@headlessui/react', github: 'tailwindlabs/headlessui',
    detect(ctx) {
        const stated = Array.from(ctx.doc.querySelectorAll('[data-headlessui-state]'));
        const withState = stated.filter(element => element.getAttribute('data-headlessui-state').trim());
        if (withState.length) {
            const v2 = withState.some(element => element.getAttribute('data-headlessui-state').trim().split(/\s+/).every(state => element.hasAttribute(`data-${state}`)));
            return { version: v2 ? '2.x' : '1.x', evidence: `data-headlessui-state${v2 ? ' with data-<state> attributes' : ' without data-<state> attributes'}` };
        }
        if (stated.length) {
            return { evidence: 'data-headlessui-state attributes' };
        }
        const element = ctx.query('[id^="headlessui-"]');
        return element ? { evidence: `id="${element.id}"` } : null;
    }
});


==============================================================================
detect/css/heroicons.js  (17 lines)
==============================================================================

// Heroicons: since 2.1 every icon (the SVG files and @heroicons/react, vue) is <svg data-slot="icon" aria-hidden="true">
// with a 24, 20 or 16 px viewBox
window[Symbol.for('dosson')].frameworks.add({
    id: 'heroicons', name: 'Heroicons', kind: 'css', href: 'https://heroicons.com', npm: 'heroicons', github: 'tailwindlabs/heroicons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('heroicons');
        if (fromUrl) {
            return fromUrl;
        }
        if (!ctx.attributes.has('data-slot')) {
            return null;
        }
        const icon = Array.from(ctx.doc.querySelectorAll('svg[data-slot="icon"][aria-hidden="true"]'))
            .find(svg => /^0 0 (24 24|20 20|16 16)$/.test(svg.getAttribute('viewBox') || '') && !svg.classList.contains('lucide'));
        return icon ? { version: '≥2.1', evidence: `<svg data-slot="icon" viewBox="${icon.getAttribute('viewBox')}">` } : null;
    }
});


==============================================================================
detect/css/heroui.js  (18 lines)
==============================================================================

// HeroUI (formerly NextUI): 3 sets --field-*, --surface-*, --segment… on :root (no prefix), 2 sets --heroui-*,
// NextUI --nextui-*. Their components keep a data-slot
window[Symbol.for('dosson')].frameworks.add({
    id: 'heroui', name: 'HeroUI (NextUI)', kind: 'css', href: 'https://www.heroui.com', npm: '@heroui/react', github: 'heroui-inc/heroui',
    detect(ctx) {
        if (ctx.cssVar('--field-placeholder') && ctx.cssVar('--surface-secondary') && ctx.cssVar('--segment')) {
            return { version: '3.x', evidence: '--field-*, --surface-*, --segment on :root' };
        }
        const body = ctx.doc.body || ctx.doc.documentElement;
        if (ctx.cssVar('--heroui-background') || ctx.cssVar('--heroui-background', body)) {
            return { version: '2.x', evidence: '--heroui-* custom properties' };
        }
        if (ctx.cssVar('--nextui-background') || ctx.cssVar('--nextui-background', body)) {
            return { version: 'NextUI', evidence: '--nextui-* custom properties' };
        }
        return null;
    }
});


==============================================================================
detect/css/hint-css.js  (16 lines)
==============================================================================

// Hint.css, tooltips from hint--* classes and aria-label
window[Symbol.for('dosson')].frameworks.add({
    id: 'hint-css', name: 'Hint.css', kind: 'css', href: 'https://kushagra.dev/lab/hint/', npm: 'hint.css', github: 'chinchang/hint.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('hint.css');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/Hint\.css - v(\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const classes = ctx.classesMatching(/^hint--[a-z]+(?:-[a-z]+)*$/);
        return classes.length ? { evidence: `hint--* classes (${classes.slice(0, 2).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/hover-css.js  (16 lines)
==============================================================================

// Hover.css, hover effects as hvr-* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'hover-css', name: 'Hover.css', kind: 'css', href: 'https://ianlunn.github.io/Hover/', npm: 'hover.css', github: 'IanLunn/Hover',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('hover.css');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/Hover\.css[^]{0,100}?Version: (\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const classes = ctx.classesMatching(/^hvr-[a-z]+(?:-[a-z]+)*$/);
        return classes.length ? { evidence: `hvr-* classes (${classes.slice(0, 2).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/ionic-css.js  (23 lines)
==============================================================================

// Ionic's CSS without Ionic itself (no window.Ionic, no <ion-app>, else the ionic detector reports it): --ion-* custom
// properties on :root (8+), or its .ion-color-* rules. Ionic 8 changed the default primary color to #0054e9
window[Symbol.for('dosson')].frameworks.add({
    id: 'ionic-css', name: 'Ionic CSS', kind: 'css', href: 'https://ionicframework.com/docs/layout/css-utilities', npm: '@ionic/core', github: 'ionic-team/ionic-framework',
    detect(ctx) {
        if (ctx.get('Ionic') || ctx.tags.has('ion-app') || ctx.fromUrl('@ionic/core')) {
            return null;
        }
        const primary = ctx.cssVar('--ion-color-primary');
        if (primary && ctx.cssVar('--ion-color-primary-contrast')) {
            return { version: primary.toLowerCase() === '#0054e9' ? '≥8' : undefined, evidence: '--ion-color-* custom properties on :root' };
        }
        // before 8 the colors were only fallbacks in its .ion-color-* rules (var(--ion-color-primary, #3880ff)), which
        // set --ion-color-base on the elements that have them
        const rule = ctx.styleRule('.ion-color-primary', { '--ion-color-base': /^var\(--ion-color-primary,/ });
        const element = ctx.query('[class*="ion-color-"]');
        if (rule || (element && ctx.cssVar('--ion-color-base', element) && ctx.cssVar('--ion-color-contrast', element))) {
            const old = rule && /#3880ff/i.test(rule.style.getPropertyValue('--ion-color-base'));
            return { version: old ? '≤7' : undefined, evidence: rule ? '.ion-color-primary { --ion-color-base: var(--ion-color-primary, …) }' : '--ion-color-base on .ion-color-* elements' };
        }
        return null;
    }
});


==============================================================================
detect/css/ionicons.js  (22 lines)
==============================================================================

// Ionicons: <ion-icon> elements, the ionicons script's URL, or the "Ionicons" font of versions 4 and older when the
// page uses it (ion-* classes, or the font loaded): Onsen UI's CSS declares it for every page
window[Symbol.for('dosson')].frameworks.add({
    id: 'ionicons', name: 'Ionicons', kind: 'css', href: 'https://ionic.io/ionicons', npm: 'ionicons', github: 'ionic-team/ionicons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('ionicons');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.tags.has('ion-icon')) {
            return { evidence: '<ion-icon> elements' };
        }
        if (!ctx.font(/^Ionicons$/i)) {
            return null;
        }
        let loaded = false;
        try {
            ctx.doc.fonts.forEach(face => loaded = loaded || (/^["']?Ionicons["']?$/i.test(face.family) && face.status === 'loaded'));
        } catch (e) { }
        return loaded || ctx.classesMatching(/^ion-/).length ? { version: '≤4', evidence: 'font "Ionicons", used' } : null;
    }
});


==============================================================================
detect/css/jss.js  (10 lines)
==============================================================================

// JSS (also react-jss and MUI 4's styles): the <style data-jss> each style sheet attaches
window[Symbol.for('dosson')].frameworks.add({
    id: 'jss', name: 'JSS', kind: 'css', href: 'https://cssinjs.org', npm: 'jss', github: 'cssinjs/jss',
    detect(ctx) {
        if (ctx.query('style[data-jss]')) {
            return { evidence: '<style data-jss>' };
        }
        return ctx.query('style#jss-server-side') ? { evidence: '<style id="jss-server-side">' } : null;
    }
});


==============================================================================
detect/css/kendo-themes.js  (27 lines)
==============================================================================

// Kendo UI themes without Kendo UI for jQuery (KendoReact, Kendo UI for Angular, Vue, Blazor): the theme's URL, its
// --kendo-* custom properties on :root, k-* classes. Nothing when window.kendo is there: the Kendo UI row shows it
window[Symbol.for('dosson')].frameworks.add({
    id: 'kendo-themes', name: 'Kendo UI themes', kind: 'css', href: 'https://www.telerik.com/design-system/docs/themes/', npm: '@progress/kendo-theme-default', github: 'telerik/kendo-themes',
    detect(ctx) {
        const kendo = ctx.get('kendo');
        if (kendo && typeof kendo === 'object' && typeof kendo.widgetInstance === 'function') {
            return null;
        }
        for (const theme of ['default', 'bootstrap', 'material', 'fluent', 'classic', 'utils']) {
            const fromUrl = ctx.fromUrl(`@progress/kendo-theme-${theme}`);
            if (fromUrl) {
                return fromUrl;
            }
        }
        // https://kendo.cdn.telerik.com/themes/10.0.1/default/default-main.css
        const cdn = ctx.url(/kendo\.cdn\.telerik\.com\/themes\/\d+\.\d+\.\d+\//);
        if (cdn) {
            return { version: cdn.match(/\/themes\/(\d+\.\d+\.\d+)\//)[1], evidence: `loaded from ${cdn.split(/[?#]/)[0]}` };
        }
        if (ctx.cssVar('--kendo-color-primary')) {
            return { evidence: '--kendo-* custom properties on :root' };
        }
        const classes = ['k-button-solid', 'k-input-inner', 'k-button-text', 'k-card-body', 'k-grid-header', 'k-picker-solid', 'k-checkbox-md'].filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `k-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/kube.js  (25 lines)
==============================================================================

// Kube (Imperavi): its banner ("Kube. CSS & JS Framework Version 6.5.2") or URL, its JavaScript (window.Kube.Plugin),
// else two of its own classes (form-item, req, push-right…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'kube', name: 'Kube', kind: 'css', href: 'https://imperavi.com/kube/',
    detect(ctx) {
        const banner = ctx.styleBanner(/Kube\. CSS & JS Framework\s+Version\s+(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('imperavi-kube') || ctx.fromUrl('kube');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/kube(\.min)?\.(css|js)(?:[?#]|$)/i);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        if (typeof ctx.get('Kube') === 'function' && ctx.get('Kube.Plugin')) {
            return { version: '6.x', evidence: 'window.Kube.Plugin' };
        }
        const classes = ['form-item', 'req', 'form-checkboxes', 'form-buttons', 'push-right', 'push-center', 'offcanvas-push-body', 'kube-caret-down']
            .filter(name => ctx.hasClass(name));
        return classes.length >= 2 && ctx.hasClass('form-item', 'push-right', 'offcanvas-push-body') ? { evidence: `Kube classes (${classes.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/linaria.js  (25 lines)
==============================================================================

// Linaria (zero-runtime, compiled by wyw-in-js): a styled component passes its interpolated props as custom properties
// named after its class (class="b1lt7dbb" style="--b1lt7dbb-0: …"), which its rule reads. With displayName on, classes
// are <name>_<slug>, the slug starting with the name's first letter (card_c3uzy1u)
window[Symbol.for('dosson')].frameworks.add({
    id: 'linaria', name: 'Linaria', kind: 'css', href: 'https://linaria.dev', npm: '@linaria/core', github: 'callstack/linaria',
    detect(ctx) {
        const elements = Array.from(ctx.doc.querySelectorAll('[class][style*="--"]')).slice(0, 1000);
        for (const element of elements) {
            const match = element.getAttribute('style').match(/--([a-z][0-9a-z]{5,9})-\d+\s*:/);
            if (match && element.classList.contains(match[1])) {
                return { evidence: `styled component with class ${match[1]} and --${match[1]}-<n> custom properties` };
            }
        }
        const rule = ctx.styleRules().find(rule => {
            const match = rule.selectorText.match(/^\.([a-z][0-9a-z]{5,9})$/);
            return match && rule.style.cssText.includes(`var(--${match[1]}-0)`);
        });
        if (rule) {
            return { evidence: `rule ${rule.selectorText} reading var(--${rule.selectorText.slice(1)}-0)` };
        }
        const named = ctx.classesMatching(/^([A-Za-z][A-Za-z0-9]*)_([a-z](?=[0-9a-z]*\d)[0-9a-z]{5,9})$/)
            .filter(name => name[0].toLowerCase() === name.split('_')[1][0]);
        return named.length >= 3 ? { evidence: `<name>_<slug> classes (${named.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/line-awesome.js  (12 lines)
==============================================================================

// Line Awesome (Icons8): its "Line Awesome Free" / "Line Awesome Brands" fonts ("LineAwesome" before 1.1), its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'line-awesome', name: 'Line Awesome', kind: 'css', href: 'https://icons8.com/line-awesome', npm: 'line-awesome', github: 'icons8/line-awesome',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('line-awesome');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^Line ?Awesome/i);
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/lucide.js  (15 lines)
==============================================================================

// Lucide: its <svg class="lucide lucide-house"> icons (lucide, lucide-react…), window.lucide.createIcons, its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'lucide', name: 'Lucide', kind: 'css', href: 'https://lucide.dev', npm: 'lucide', github: 'lucide-icons/lucide',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('lucide');
        if (fromUrl) {
            return fromUrl;
        }
        if (typeof ctx.get('lucide.createIcons') === 'function') {
            return { evidence: 'window.lucide.createIcons' };
        }
        const icon = ctx.query('svg.lucide');
        return icon ? { evidence: `<svg class="${icon.getAttribute('class')}">` } : null;
    }
});


==============================================================================
detect/css/magic-css.js  (16 lines)
==============================================================================

// Magic.css, CSS3 animations: an element gets "magictime" plus the animation's name (puffIn, vanishOut…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'magic-css', name: 'Magic.css', kind: 'css', href: 'https://www.minimamente.com/project/magic/', npm: 'magic.css', github: 'miniMAC/magic',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('magic.css');
        if (fromUrl) {
            return fromUrl;
        }
        // cdnjs: /ajax/libs/magic/1.4.8/magic.min.css
        const cdnjs = ctx.urlVersion('magic');
        if (cdnjs && /\/magic(?:\.min)?\.css(?:[?#]|$)/.test(cdnjs.url)) {
            return { version: cdnjs.version, evidence: `loaded from ${cdnjs.url.split(/[?#]/)[0]}` };
        }
        return ctx.hasClass('magictime') ? { evidence: 'magictime class' } : null;
    }
});


==============================================================================
detect/css/mantine.js  (11 lines)
==============================================================================

// Mantine. 7 sets --mantine-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'mantine', name: 'Mantine', kind: 'css', href: 'https://mantine.dev', npm: '@mantine/core', github: 'mantinedev/mantine',
    detect(ctx) {
        if (ctx.cssVar('--mantine-scale') || ctx.cssVar('--mantine-color-body')) {
            return { version: '≥7', evidence: '--mantine-* custom properties on :root' };
        }
        const classes = ctx.classesMatching(/^mantine-/);
        return classes.length ? { evidence: `mantine-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/material-icons.js  (13 lines)
==============================================================================

// Google's Material Icons and Material Symbols fonts. Google Fonts URLs have no version; the self-hosted npm packages
// (material-icons, material-symbols) do on a CDN
window[Symbol.for('dosson')].frameworks.add({
    id: 'material-icons', name: 'Material Icons', kind: 'css', href: 'https://fonts.google.com/icons', github: 'google/material-design-icons',
    detect(ctx) {
        const font = ctx.font(/^Material (Icons|Symbols)/i);
        const fromUrl = ctx.fromUrl('material-icons') || ctx.fromUrl('material-symbols');
        if (fromUrl) {
            return font ? { version: fromUrl.version, evidence: `font "${font}", ${fromUrl.evidence}` } : fromUrl;
        }
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/material-tailwind.js  (25 lines)
==============================================================================

// Material Tailwind: the React components (1.x, 2.x) are named MaterialTailwind.Button…, the HTML version is the
// MaterialTailwind global (UMD build)
window[Symbol.for('dosson')].frameworks.add({
    id: 'material-tailwind', name: 'Material Tailwind', kind: 'css', href: 'https://www.material-tailwind.com', npm: '@material-tailwind/react', github: 'creativetimofficial/material-tailwind',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@material-tailwind/html') || ctx.fromUrl('@material-tailwind/react');
        if (fromUrl) {
            return fromUrl;
        }
        const { types, contexts } = ctx.reactComponents();
        const names = [...new Set(types.map(type => type.displayName).filter(name => /^MaterialTailwind\./.test(name)))];
        const themeContext = contexts.find(context => context.displayName === 'MaterialTailwindThemeProvider');
        if (names.length || themeContext) {
            // the theme they read: 2.0 added carousel, timeline, speedDial… to the 1.x one
            const theme = themeContext?._currentValue;
            const version = theme && typeof theme === 'object' && theme.button && !('carousel' in theme) && !('timeline' in theme) ? '1.x' : '2.x';
            return { version, evidence: `React components named ${names.slice(0, 2).join(', ') || 'MaterialTailwindThemeProvider'}${version === '1.x' ? ' (a theme without 2.0\'s carousel, timeline…)' : ''}` };
        }
        const global = ctx.get('MaterialTailwind');
        if (global && typeof global === 'object' && typeof global.initMaterialTailwind === 'function') {
            return { version: '3.x', evidence: 'window.MaterialTailwind' };
        }
        return null;
    }
});


==============================================================================
detect/css/material-web.js  (11 lines)
==============================================================================

// Material Web (Google's Material 3 web components): registered <md-*> elements built with Lit
window[Symbol.for('dosson')].frameworks.add({
    id: 'material-web', name: 'Material Web', kind: 'css', href: 'https://material-web.dev', npm: '@material/web', github: 'material-components/material-web',
    detect(ctx) {
        const tags = [...ctx.tags].filter(tag => /^md-/.test(tag) && ctx.win.customElements?.get(tag)?.elementStyles);
        if (!tags.length) {
            return null;
        }
        return ctx.fromUrl('@material/web') || { evidence: `<${tags.slice(0, 2).join('>, <')}> elements` };
    }
});


==============================================================================
detect/css/materialize.js  (14 lines)
==============================================================================

// Materialize: its JavaScript is window.M. The URL comes first: M.version can lag (2.4.0's build says 2.3.3)
window[Symbol.for('dosson')].frameworks.add({
    id: 'materialize', name: 'Materialize', kind: 'css', href: 'https://materializecss.com', npm: '@materializecss/materialize', github: 'materializecss/materialize',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('materialize-css') || ctx.fromUrl('materialize');
        if (fromUrl) {
            return fromUrl;
        }
        if (typeof ctx.get('M.AutoInit') === 'function') {
            return ctx.globalVersion('M.version') || { evidence: 'window.M' };
        }
        return ctx.hasClass('materialize-textarea', 'sidenav-trigger') ? { evidence: 'Materialize classes' } : null;
    }
});


==============================================================================
detect/css/mdbootstrap.js  (18 lines)
==============================================================================

// MDBootstrap (Material Design for Bootstrap). MDB5 (mdb-ui-kit, versions 1 to 9) sets --mdb-* custom properties on :root, MDB 4 uses
// md-form and waves-effect
window[Symbol.for('dosson')].frameworks.add({
    id: 'mdbootstrap', name: 'MDBootstrap', kind: 'css', href: 'https://mdbootstrap.com', npm: 'mdb-ui-kit', github: 'mdbootstrap/mdb-ui-kit',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('mdb-ui-kit') || ctx.fromUrl('mdbootstrap');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--mdb-red') || ctx.cssVar('--mdb-body-bg')) {
            return { evidence: '--mdb-* custom properties on :root (MDB5)' };
        }
        if (ctx.hasClass('md-form') && ctx.hasClass('waves-effect')) {
            return { version: '4.x', evidence: 'MDB 4 classes (md-form, waves-effect)' };
        }
        return null;
    }
});


==============================================================================
detect/css/mdc.js  (20 lines)
==============================================================================

// Material Components Web (MDC): its URL, window.mdc, mdc-* classes. Nothing with mat-mdc-* classes: that's Angular
// Material 15+, which is built on MDC
window[Symbol.for('dosson')].frameworks.add({
    id: 'mdc', name: 'Material Components Web', kind: 'css', href: 'https://github.com/material-components/material-components-web', npm: 'material-components-web', github: 'material-components/material-components-web',
    detect(ctx) {
        if (ctx.classesMatching(/^mat-mdc-/).length) {
            return null;
        }
        const classes = ctx.classesMatching(/^mdc-(button|text-field|card|checkbox|form-field|top-app-bar|list|drawer|dialog|select|switch|tab|data-table|snackbar|chip|radio|menu|icon-button|fab|layout-grid|floating-label|line-ripple|notched-outline|typography)(?:$|--|__)/);
        if (classes.length < 2) {
            return null;
        }
        const fromUrl = ctx.fromUrl('material-components-web');
        if (fromUrl) {
            return fromUrl;
        }
        const evidence = `mdc-* classes (${classes.slice(0, 2).join(', ')}…)`;
        return { evidence: ctx.get('mdc.autoInit') ? `window.mdc, ${evidence}` : evidence };
    }
});


==============================================================================
detect/css/mdi.js  (11 lines)
==============================================================================

// Material Design Icons (Pictogrammers' @mdi/font): its "Material Design Icons" font, its npm or cdnjs URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'mdi', name: 'Material Design Icons', kind: 'css', href: 'https://pictogrammers.com/library/mdi/', npm: '@mdi/font', github: 'Templarian/MaterialDesign-Webfont',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@mdi/font') || ctx.fromUrl('MaterialDesign-Webfont');
        if (fromUrl) {
            return fromUrl;
        }
        return ctx.font(/^Material ?Design ?Icons$/i) ? { evidence: 'font "Material Design Icons"' } : null;
    }
});


==============================================================================
detect/css/mdl.js  (8 lines)
==============================================================================

// Material Design Lite
window[Symbol.for('dosson')].frameworks.add({
    id: 'mdl', name: 'Material Design Lite', kind: 'css', href: 'https://getmdl.io', npm: 'material-design-lite', github: 'google/material-design-lite',
    detect(ctx) {
        const classes = ctx.classesMatching(/^mdl-/);
        return classes.length >= 2 ? ctx.fromUrl('material-design-lite') || { evidence: `mdl-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/milligram.js  (21 lines)
==============================================================================

// Milligram: its URL or banner ("Milligram v1.4.1"), else its button-clear/button-outline next to its column-<percent>
window[Symbol.for('dosson')].frameworks.add({
    id: 'milligram', name: 'Milligram', kind: 'css', href: 'https://milligram.io', npm: 'milligram', github: 'milligram/milligram',
    detect(ctx) {
        const banner = ctx.styleBanner(/Milligram\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('milligram');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/milligram(\.min)?\.css(?:[?#]|$)/i);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        const buttons = ['button-clear', 'button-outline'].filter(name => ctx.hasClass(name));
        const columns = ctx.classesMatching(/^column-(offset-)?(10|20|25|33|34|40|50|60|66|67|75|80|90)$/);
        return buttons.length && columns.length ? { evidence: `Milligram classes (${[...buttons, ...columns.slice(0, 3)].join(', ')})` } : null;
    }
});


==============================================================================
detect/css/mini-css.js  (12 lines)
==============================================================================

// mini.css: its URL, else the custom properties version 3 sets on :root (--fore-color, --universal-margin…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'mini-css', name: 'mini.css', kind: 'css', href: 'https://minicss.us', npm: 'mini.css', github: 'Chalarangelo/mini.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('mini.css');
        if (fromUrl) {
            return fromUrl;
        }
        const names = ['--fore-color', '--secondary-back-color', '--universal-margin', '--universal-padding', '--heading-ratio'];
        return names.every(name => ctx.cssVar(name)) ? { version: '3.x', evidence: `custom properties on :root (${names.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/modern-normalize.js  (19 lines)
==============================================================================

// modern-normalize: its banner or its URL give the version. Bundled into the site's CSS, where neither shows, its font
// stacks do: html (2+) or body (1) and code, kbd, samp, pre, as same-origin style rules
window[Symbol.for('dosson')].frameworks.add({
    id: 'modern-normalize', name: 'modern-normalize', kind: 'css', href: 'https://github.com/sindresorhus/modern-normalize', npm: 'modern-normalize', github: 'sindresorhus/modern-normalize',
    detect(ctx) {
        const banner = ctx.styleBanner(/modern-normalize\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('modern-normalize');
        if (fromUrl) {
            return fromUrl;
        }
        const sans = { 'font-family': /^system-ui, (-apple-system, )?"Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"$/ };
        const mono = ctx.styleRule('code, kbd, samp, pre', { 'font-family': 'ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace' });
        const root = mono && (ctx.styleRule('html', sans) ? 'html' : ctx.styleRule('body', sans) ? 'body' : null);
        return root ? { version: root === 'html' ? '≥2' : '1.x', evidence: `its font stacks on ${root} and on code, kbd, samp, pre (bundled)` } : null;
    }
});


==============================================================================
detect/css/mui.js  (12 lines)
==============================================================================

// MUI (Material UI) names its components' classes MuiButton-root…; 4 styled them with JSS, 5+ with Emotion
window[Symbol.for('dosson')].frameworks.add({
    id: 'mui', name: 'MUI', kind: 'css', href: 'https://mui.com', npm: '@mui/material', github: 'mui/material-ui',
    detect(ctx) {
        const classes = ctx.classesMatching(/^Mui[A-Z]\w*-/);
        if (!classes.length) {
            return null;
        }
        const version = ctx.query('style[data-jss]') ? '4.x' : ctx.query('style[data-emotion]') ? '≥5' : undefined;
        return { version, evidence: `Mui* classes (${classes.slice(0, 2).join(', ')}…)` };
    }
});


==============================================================================
detect/css/mvp-css.js  (16 lines)
==============================================================================

// MVP.css (classless): its URL or banner ("MVP.css v1.18"), else its custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'mvp-css', name: 'MVP.css', kind: 'css', href: 'https://andybrewer.github.io/mvp/', npm: 'mvp.css', github: 'andybrewer/mvp',
    detect(ctx) {
        const banner = ctx.styleBanner(/MVP\.css\s+v(\d+\.\d+(?:\.\d+)?)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('mvp.css');
        if (fromUrl) {
            return fromUrl;
        }
        const names = ['--color-bg-secondary', '--color-secondary-accent', '--width-card-wide', '--justify-important'];
        return names.every(name => ctx.cssVar(name)) ? { evidence: `custom properties on :root (${names.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/naive-ui.js  (16 lines)
==============================================================================

// Naive UI (Vue components): its CSS is injected at runtime as <style cssr-id="n-button">…, components have n-* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'naive-ui', name: 'Naive UI', kind: 'css', href: 'https://www.naiveui.com', npm: 'naive-ui', github: 'tusen-ai/naive-ui',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('naive-ui');
        if (fromUrl) {
            return fromUrl;
        }
        const style = ctx.query('style[cssr-id^="n-"]');
        if (style) {
            return { evidence: `<style cssr-id="${style.getAttribute('cssr-id')}">` };
        }
        const classes = ctx.classesMatching(/^n-(button|input|card|form-item|checkbox|select|data-table|layout|menu|config-provider)$/);
        return classes.length >= 2 && ctx.hasClass(`${classes[0]}__border`, 'n-button__content', 'n-input__input', 'n-card-header', 'n-base-icon') ? { evidence: `n-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/neat.js  (30 lines)
==============================================================================

// Bourbon Neat, a Sass grid: its columns survive in the CSS. 2+ (float: left; margin-left: G; width: calc(P% - Q) with
// Q = G × (1 + P/100)), 1.x (margin-right: 2.35765%, its default gutter)
window[Symbol.for('dosson')].frameworks.add({
    id: 'neat', name: 'Bourbon Neat', kind: 'css', href: 'https://neat.bourbon.io', npm: 'bourbon-neat', github: 'thoughtbot/neat',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('bourbon-neat');
        if (fromUrl) {
            return fromUrl;
        }
        const columns = [];
        let neat1;
        for (const rule of ctx.styleRules()) {
            const { style } = rule;
            if (style.float !== 'left') {
                continue;
            }
            const width = style.width.match(/^calc\(([\d.]+)% - ([\d.]+)px\)$/);
            const gutter = parseFloat(style.marginLeft);
            if (width && /px$/.test(style.marginLeft) && Math.abs(width[2] - gutter * (1 + width[1] / 100)) < 0.01) {
                columns.includes(rule.selectorText) || columns.push(rule.selectorText);
            } else if (/^2\.3576\d*%$/.test(style.marginRight)) {
                neat1 = neat1 || rule.selectorText;
            }
        }
        if (columns.length) {
            return { version: '≥2', evidence: `Neat grid columns (${columns.slice(0, 2).join(', ')})` };
        }
        return neat1 ? { version: '1.x', evidence: `Neat 1 gutter, margin-right: 2.35765% (${neat1})` } : null;
    }
});


==============================================================================
detect/css/nes-css.js  (8 lines)
==============================================================================

// NES.css, 8-bit styles
window[Symbol.for('dosson')].frameworks.add({
    id: 'nes-css', name: 'NES.css', kind: 'css', href: 'https://nostalgic-css.github.io/NES.css/', npm: 'nes.css', github: 'nostalgic-css/NES.css',
    detect(ctx) {
        const classes = ctx.classesMatching(/^nes-/);
        return classes.length ? ctx.fromUrl('nes.css') || { evidence: `nes-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/new-css.js  (12 lines)
==============================================================================

// new.css (classless): its URL, else its --nc-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'new-css', name: 'new.css', kind: 'css', href: 'https://newcss.net', npm: '@exampledev/new.css', github: 'xz/new.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('new.css');
        if (fromUrl) {
            return fromUrl;
        }
        const names = ['--nc-tx-1', '--nc-bg-1', '--nc-lk-1'];
        return names.every(name => ctx.cssVar(name)) ? { evidence: `custom properties on :root (${names.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/normalize.js  (8 lines)
==============================================================================

// normalize.css only shows in its banner or its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'normalize', name: 'normalize.css', kind: 'css', href: 'https://necolas.github.io/normalize.css/', npm: 'normalize.css', github: 'necolas/normalize.css',
    detect(ctx) {
        const banner = ctx.styleBanner(/normalize\.css\s+v(\d+\.\d+\.\d+)/i);
        return banner ? { version: banner, evidence: 'banner in a <style>' } : ctx.fromUrl('normalize.css') || ctx.fromUrl('normalize');
    }
});


==============================================================================
detect/css/octicons.js  (12 lines)
==============================================================================

// Octicons (GitHub's icons): <svg class="octicon octicon-x">, from @primer/octicons' toSVG() or Primer React
window[Symbol.for('dosson')].frameworks.add({
    id: 'octicons', name: 'Octicons', kind: 'css', href: 'https://primer.style/octicons', npm: '@primer/octicons', github: 'primer/octicons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@primer/octicons');
        if (fromUrl) {
            return fromUrl;
        }
        const icon = ctx.query('svg.octicon[class*="octicon-"]');
        return icon ? { evidence: `<svg class="${icon.getAttribute('class')}">` } : null;
    }
});


==============================================================================
detect/css/onsen-css.js  (17 lines)
==============================================================================

// Onsen CSS Components without Onsen UI (no window.ons or <ons-*> elements, else the onsen detector reports it): its
// --alert-dialog-* / --action-sheet-* custom properties on :root, BEM classes (toolbar__center, list-item__center…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'onsen-css', name: 'Onsen CSS Components', kind: 'css', href: 'https://onsen.io/v2/api/css.html', npm: 'onsenui', github: 'OnsenUI/OnsenUI',
    detect(ctx) {
        const ons = ctx.get('ons');
        if ((ons && typeof ons.ready === 'function') || [...ctx.tags].some(tag => tag.startsWith('ons-'))) {
            return null;
        }
        const fromUrl = ctx.fromUrl('onsenui') || ctx.fromUrl('onsen-css-components');
        if (ctx.cssVar('--alert-dialog-separator-color') && ctx.cssVar('--action-sheet-mask-color')) {
            return fromUrl || { evidence: '--alert-dialog-* and --action-sheet-* custom properties on :root' };
        }
        const classes = ctx.classesMatching(/^(toolbar__(left|center|right|title)|list-item__(left|center|right)|page__content|button--(material|outline|cta|large|quiet)|checkbox__checkmark|tabbar__item)$/);
        return fromUrl && classes.length ? fromUrl : null;
    }
});


==============================================================================
detect/css/open-props.js  (6 lines)
==============================================================================

// Open Props: design tokens as custom properties on :root (--ease-elastic-1 before 1.5, --ease-elastic-out-1 since)
window[Symbol.for('dosson')].frameworks.add({
    id: 'open-props', name: 'Open Props', kind: 'css', href: 'https://open-props.style', npm: 'open-props', github: 'argyleink/open-props',
    detect: (ctx) => ctx.cssVar('--ease-elastic-out-1') || ctx.cssVar('--ease-elastic-1') || ctx.cssVar('--size-fluid-1') && ctx.cssVar('--gray-12')
        ? ctx.fromUrl('open-props') || { evidence: 'Open Props custom properties on :root' } : null
});


==============================================================================
detect/css/oruga.js  (18 lines)
==============================================================================

// Oruga (Vue components): data-oruga attributes on its components, o-* classes, --oruga-* custom properties (its themes)
window[Symbol.for('dosson')].frameworks.add({
    id: 'oruga', name: 'Oruga', kind: 'css', href: 'https://oruga-ui.com', npm: '@oruga-ui/oruga-next', github: 'oruga-ui/oruga',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@oruga-ui/oruga-next') || ctx.fromUrl('@oruga-ui/oruga');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.query('[data-oruga]')) {
            return { evidence: 'data-oruga attributes' };
        }
        const classes = ctx.classesMatching(/^o-(btn|button|field|input|chk|checkbox|radio|switch|select|notification|dropdown|table|tabs|steps|taginput|autocomplete|datepicker)$/);
        if (classes.length >= 2) {
            return { evidence: `o-* classes (${classes.slice(0, 3).join(', ')}…)` };
        }
        return classes.length && ctx.cssVar('--oruga-primary') ? { evidence: `${classes[0]} class and --oruga-* custom properties` } : null;
    }
});


==============================================================================
detect/css/panda.js  (12 lines)
==============================================================================

// Panda CSS: its tokens layer sets --made-with-panda: '🐼' on :root. Without it, its atomic classes named
// <property>_<token>, with a dot in color tokens (bg_teal.500)
window[Symbol.for('dosson')].frameworks.add({
    id: 'panda', name: 'Panda CSS', kind: 'css', href: 'https://panda-css.com', npm: '@pandacss/dev', github: 'chakra-ui/panda',
    detect(ctx) {
        if (ctx.cssVar('--made-with-panda')) {
            return { evidence: "--made-with-panda: '🐼' on :root" };
        }
        const classes = ctx.classesMatching(/^(?:[a-z]+:)*[a-z][a-z-]*_[a-z]+\.\d{2,3}$/);
        return classes.length >= 3 ? { evidence: `<property>_<color token> classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/papercss.js  (15 lines)
==============================================================================

// PaperCSS, hand-drawn styles. 1.x sets --main-background and --primary-light-10… on <html>
window[Symbol.for('dosson')].frameworks.add({
    id: 'papercss', name: 'PaperCSS', kind: 'css', href: 'https://www.getpapercss.com', npm: 'papercss', github: 'papercss/papercss',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('papercss');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--main-background') && ctx.cssVar('--primary-light-10')) {
            return { evidence: '--main-background and --primary-light-10 on <html>' };
        }
        const classes = ['paper-btn', 'paper-switch', 'paper-switch-slider', 'child-borders', 'shadow-hover', 'border-dashed', 'border-dotted'].filter(name => ctx.hasClass(name));
        return ctx.hasClass('paper-btn', 'paper-switch') && classes.length >= 2 ? { evidence: `PaperCSS classes (${classes.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/patternfly.js  (27 lines)
==============================================================================

// PatternFly (Red Hat): its URL, then the version prefix of its custom properties on :root and classes:
// --pf-t--global--* and pf-v6-* (6), --pf-v5-global--* and pf-v5-* (5), --pf-global--* and pf-c-* (4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'patternfly', name: 'PatternFly', kind: 'css', href: 'https://www.patternfly.org', npm: '@patternfly/patternfly', github: 'patternfly/patternfly',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@patternfly/patternfly');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--pf-t--global--spacer--md')) {
            return { version: '6.x', evidence: '--pf-t--global--* custom properties on :root' };
        }
        if (ctx.cssVar('--pf-v5-global--spacer--md')) {
            return { version: '5.x', evidence: '--pf-v5-global--* custom properties on :root' };
        }
        if (ctx.cssVar('--pf-global--spacer--md')) {
            return { version: '4.x', evidence: '--pf-global--* custom properties on :root' };
        }
        for (const [regex, version] of [[/^pf-v6-[cl]-/, '6.x'], [/^pf-v5-[cl]-/, '5.x'], [/^pf-[cl]-/, '4.x']]) {
            const classes = ctx.classesMatching(regex);
            if (classes.length) {
                return { version, evidence: `${classes[0].split('-').slice(0, -1).join('-')}-* classes (${classes.slice(0, 2).join(', ')}…)` };
            }
        }
        return null;
    }
});


==============================================================================
detect/css/phosphor.js  (12 lines)
==============================================================================

// Phosphor Icons web font (@phosphor-icons/web): its "Phosphor", "Phosphor-Bold"… fonts, its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'phosphor', name: 'Phosphor Icons', kind: 'css', href: 'https://phosphoricons.com', npm: '@phosphor-icons/web', github: 'phosphor-icons/web',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@phosphor-icons/web');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^Phosphor(-(Thin|Light|Bold|Fill|Duotone))?$/i);
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/picnic.js  (16 lines)
==============================================================================

// Picnic CSS: its URL, else its pseudo buttons next to its flex grid (flex two, flex one three-500…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'picnic', name: 'Picnic CSS', kind: 'css', href: 'https://picnicss.com', npm: 'picnic', github: 'franciscop/picnic',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('picnic');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/picnic(\.min)?\.css(?:[?#]|$)/i);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        const grid = ctx.query('.flex.one, .flex.two, .flex.three, .flex.four, .flex.five, .flex.six, .flex[class*="-500"], .flex[class*="-800"]');
        return grid && ctx.hasClass('pseudo') ? { evidence: 'Picnic CSS classes (pseudo, flex grid: flex two…)' } : null;
    }
});


==============================================================================
detect/css/pico.js  (14 lines)
==============================================================================

// Pico CSS. 2 prefixes its custom properties with --pico-
window[Symbol.for('dosson')].frameworks.add({
    id: 'pico', name: 'Pico CSS', kind: 'css', href: 'https://picocss.com', npm: '@picocss/pico', github: 'picocss/pico',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@picocss/pico') || ctx.fromUrl('pico');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--pico-font-family') || ctx.cssVar('--pico-background-color')) {
            return { version: '2.x', evidence: '--pico-* custom properties on :root' };
        }
        return ctx.cssVar('--form-element-background-color') && ctx.cssVar('--primary-focus') ? { version: '1.x', evidence: 'Pico 1 custom properties on :root' } : null;
    }
});


==============================================================================
detect/css/polaris.js  (23 lines)
==============================================================================

// Shopify Polaris. Polaris React's CSS sets --polaris-version-number and --p-* tokens on :root, its components use
// Polaris-* classes. Polaris web components load polaris.js from Shopify's CDN
window[Symbol.for('dosson')].frameworks.add({
    id: 'polaris', name: 'Shopify Polaris', kind: 'css', href: 'https://polaris-react.shopify.com', npm: '@shopify/polaris', github: 'Shopify/polaris-react',
    detect(ctx) {
        const version = ctx.cssVar('--polaris-version-number').replace(/^["']|["']$/g, '');
        if (ctx.version(version)) {
            return { version, evidence: '--polaris-version-number on :root' };
        }
        const fromUrl = ctx.fromUrl('@shopify/polaris');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^Polaris-[A-Z]/);
        if (classes.length) {
            return { evidence: `Polaris-* classes (${classes.slice(0, 2).join(', ')}…)` };
        }
        if (ctx.url(/^https:\/\/cdn\.shopify\.com\/shopifycloud\/polaris\.js/)) {
            return { version: 'web components', evidence: 'loaded cdn.shopify.com/shopifycloud/polaris.js' };
        }
        return null;
    }
});


==============================================================================
detect/css/preline.js  (15 lines)
==============================================================================

// Preline UI: its script sets window.HSStaticMethods (and HSOverlay, HSDropdown…), its components use hs-* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'preline', name: 'Preline UI', kind: 'css', href: 'https://preline.co', npm: 'preline', github: 'htmlstreamofficial/preline',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('preline');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.get('HSStaticMethods') && typeof ctx.get('HSStaticMethods.autoInit') === 'function') {
            return { evidence: 'window.HSStaticMethods' };
        }
        const classes = ctx.classesMatching(/^hs-(?:dropdown|accordion|overlay|collapse|tooltip|select|carousel|tab|stepper|tree-view|combobox|pin-input|file-upload|datepicker|scrollspy|removing|theme-switch)(?:-[a-z-]+)?(?::|$)/);
        return classes.length >= 2 ? { evidence: `Preline classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/prime.js  (10 lines)
==============================================================================

// PrimeFaces, PrimeReact, PrimeVue and PrimeNG share the p-component class
window[Symbol.for('dosson')].frameworks.add({
    id: 'prime', name: 'PrimeFaces/React/Vue/NG', kind: 'css', href: 'https://primefaces.org', github: 'primefaces/primefaces',
    detect(ctx) {
        if (ctx.get('PrimeFaces')) {
            return { evidence: 'window.PrimeFaces' };
        }
        return ctx.hasClass('p-component') ? { evidence: 'p-component class' } : null;
    }
});


==============================================================================
detect/css/primer.js  (12 lines)
==============================================================================

// Primer, GitHub's design system
window[Symbol.for('dosson')].frameworks.add({
    id: 'primer', name: 'Primer', kind: 'css', href: 'https://primer.style', npm: '@primer/css', github: 'primer/css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@primer/css');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^(color-(fg|bg|border)-|Box-row|Layout-|flex-items-|BtnGroup|Subhead|UnderlineNav)/);
        return classes.length >= 3 ? { evidence: `Primer classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/pure.js  (12 lines)
==============================================================================

// Pure.css
window[Symbol.for('dosson')].frameworks.add({
    id: 'pure', name: 'Pure.css', kind: 'css', href: 'https://purecss.io', npm: 'purecss', github: 'pure-css/pure',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('purecss') || ctx.fromUrl('pure');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^pure-(g|u-|menu|button|form|table|img)/);
        return classes.length >= 2 ? { evidence: `pure-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/quasar.js  (17 lines)
==============================================================================

// Quasar: window.Quasar (UMD), else $q, which its Vue plugin adds to the app (globalProperties.$q.version)
window[Symbol.for('dosson')].frameworks.add({
    id: 'quasar', name: 'Quasar', kind: 'css', href: 'https://quasar.dev', npm: 'quasar', github: 'quasarframework/quasar',
    detect(ctx) {
        const version = ctx.globalVersion('Quasar.version');
        if (version) {
            return version;
        }
        const classes = ctx.classesMatching(/^q-(layout|page|btn|drawer|header|toolbar|card|field|item)$/);
        if (classes.length < 2) {
            return null;
        }
        const app = ctx.expando(/^__vue_app__$/)?.value;
        const fromApp = ctx.version(app?.config?.globalProperties?.$q?.version);
        return fromApp ? { version: fromApp, evidence: 'the Vue app\'s $q.version' } : { evidence: `q-* classes (${classes.slice(0, 3).join(', ')}…)` };
    }
});


==============================================================================
detect/css/radix.js  (16 lines)
==============================================================================

// Radix: Radix Themes wraps the app in .radix-themes with rt-* classes and sets --accent-9…; Radix Primitives leave
// data-radix-* attributes and radix-<useId> ids (aria-controls…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'radix', name: 'Radix UI', kind: 'css', href: 'https://www.radix-ui.com', npm: '@radix-ui/themes', github: 'radix-ui/themes',
    detect(ctx) {
        const theme = ctx.query('.radix-themes');
        if (theme && (ctx.classesMatching(/^rt-/).length || ctx.cssVar('--accent-9', theme))) {
            return { evidence: 'Radix Themes (.radix-themes, rt-* classes)' };
        }
        if (ctx.hasAttribute(/^data-radix-/)) {
            return { evidence: 'Radix Primitives (data-radix-* attributes)' };
        }
        const element = ctx.query('[id^="radix-"], [aria-controls^="radix-"]');
        return element ? { evidence: `Radix Primitives (${element.id ? `id="${element.id}"` : `aria-controls="${element.getAttribute('aria-controls')}"`})` } : null;
    }
});


==============================================================================
detect/css/react-bootstrap.js  (19 lines)
==============================================================================

// React Bootstrap: its components read a ThemeContext holding { prefixes, breakpoints, minBreakpoint } (2.x), and keep
// their displayName (FormControl, CardBody…) in production builds
window[Symbol.for('dosson')].frameworks.add({
    id: 'react-bootstrap', name: 'React Bootstrap', kind: 'css', href: 'https://react-bootstrap.netlify.app', npm: 'react-bootstrap', github: 'react-bootstrap/react-bootstrap',
    detect(ctx) {
        const { types, contexts } = ctx.reactComponents();
        const theme = contexts.find(context => {
            const value = context._currentValue;
            return value && typeof value === 'object' && value.prefixes && Array.isArray(value.breakpoints) && 'minBreakpoint' in value;
        });
        if (theme) {
            return { version: '2.x', evidence: 'React components reading its ThemeContext ({ prefixes, breakpoints, minBreakpoint })' };
        }
        const names = ['FormControl', 'FormGroup', 'FormLabel', 'FormCheck', 'FormSelect', 'CardBody', 'CardHeader', 'NavbarBrand', 'NavLink', 'ListGroupItem', 'DropdownToggle', 'ModalHeader'];
        const found = [...new Set(types.map(type => type.displayName).filter(name => names.includes(name)))];
        // 2.x components always read the ThemeContext above (its default value too): without it, 1.x or before
        return found.length >= 2 ? { version: '≤1', evidence: `React components named ${found.slice(0, 3).join(', ')}, without 2.x's ThemeContext` } : null;
    }
});


==============================================================================
detect/css/reactstrap.js  (11 lines)
==============================================================================

// Reactstrap: every component declares a cssModule and a tag prop in its propTypes, which production builds keep
window[Symbol.for('dosson')].frameworks.add({
    id: 'reactstrap', name: 'Reactstrap', kind: 'css', href: 'https://reactstrap.github.io', npm: 'reactstrap', github: 'reactstrap/reactstrap',
    detect(ctx) {
        const components = ctx.reactComponents().types.filter(type => {
            const propTypes = type.propTypes;
            return propTypes && typeof propTypes === 'object' && 'cssModule' in propTypes && ('tag' in propTypes || 'innerRef' in propTypes);
        });
        return components.length ? { evidence: `React components with cssModule propTypes (${components.length})` } : null;
    }
});


==============================================================================
detect/css/rebass.js  (14 lines)
==============================================================================

// Rebass: every component is a reflexbox Box, whose Emotion rule starts with box-sizing: border-box; margin: 0;
// min-width: 0. Theme UI's Box starts the same way, so pages with Theme UI's custom properties are left to it
window[Symbol.for('dosson')].frameworks.add({
    id: 'rebass', name: 'Rebass', kind: 'css', href: 'https://rebassjs.org', npm: 'rebass', github: 'rebassjs/rebass',
    detect(ctx) {
        const boxes = ctx.styleRules().filter(rule => /^\.css-[a-z0-9]+$/.test(rule.selectorText)
            && rule.style[0] === 'box-sizing' && rule.style.boxSizing === 'border-box'
            && rule.style.minWidth === '0px' && /^margin/.test(rule.style[1] || ''));
        if (boxes.length < 3 || ctx.styleRules().some(rule => rule.style.cssText.includes('--theme-ui-'))) {
            return null;
        }
        return { evidence: `${boxes.length} Emotion rules starting like a Rebass Box (box-sizing, margin, min-width: 0)` };
    }
});


==============================================================================
detect/css/remixicon.js  (11 lines)
==============================================================================

// Remix Icon: its "remixicon" font, its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'remixicon', name: 'Remix Icon', kind: 'css', href: 'https://remixicon.com', npm: 'remixicon', github: 'Remix-Design/RemixIcon',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('remixicon');
        if (fromUrl) {
            return fromUrl;
        }
        return ctx.font(/^remixicon$/i) ? { evidence: 'font "remixicon"' } : null;
    }
});


==============================================================================
detect/css/sakura.js  (21 lines)
==============================================================================

// Sakura (classless, no custom properties): its banner ("Sakura.css v1.5.1") or its URL (sakura.css, sakura-dark.css…).
// Bundled into the site's CSS, its html and body rules show in the same-origin style rules
window[Symbol.for('dosson')].frameworks.add({
    id: 'sakura', name: 'Sakura', kind: 'css', href: 'https://oxal.org/projects/sakura/', npm: 'sakura.css', github: 'oxalorg/sakura',
    detect(ctx) {
        const banner = ctx.styleBanner(/Sakura\.css\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('sakura.css');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/sakura(-[a-z-]+)?(\.min)?\.css(?:[?#]|$)/i);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        const bundled = ctx.styleRule('html', { 'font-size': '62.5%' }) && ctx.styleRule('body', { 'max-width': '38em', 'line-height': '1.618', padding: '13px' });
        return bundled ? { evidence: 'its html { font-size: 62.5% } and body { max-width: 38em; line-height: 1.618; padding: 13px } rules (bundled)' } : null;
    }
});


==============================================================================
detect/css/sanitize-css.js  (19 lines)
==============================================================================

// sanitize.css: its URL (sanitize.css@13.0.0/sanitize.css, cdnjs /sanitize.css/13.0.0/). Bundled into the site's CSS,
// its zero-width space before nav items shows in the same-origin style rules, :where(nav li)::before (13+), else
// nav li::before, with its root rule (cursor: default, tab-size: 4). Pico copies the first, not the second
window[Symbol.for('dosson')].frameworks.add({
    id: 'sanitize-css', name: 'sanitize.css', kind: 'css', href: 'https://csstools.github.io/sanitize.css/', npm: 'sanitize.css', github: 'csstools/sanitize.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('sanitize.css');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/sanitize(?:\.min)?\.css(?:[?#]|$)/);
        if (url) {
            return { evidence: `loaded ${url.split(/[?#]/)[0]}` };
        }
        const rule = ctx.styleRule(/^(?::where\(nav li\)|nav li)::before$/, { content: '"\u200b"' });
        const root = rule && ctx.styleRule(/^(?::where\(:root\)|html)$/, { cursor: 'default', 'tab-size': '4' });
        return root ? { version: rule.selectorText.startsWith(':where') ? '≥13' : '≤12', evidence: `${root.selectorText} { cursor: default; tab-size: 4 } and ${rule.selectorText} { content: "\\200B" } rules (bundled)` } : null;
    }
});


==============================================================================
detect/css/semantic-ui.js  (13 lines)
==============================================================================

// Semantic UI and its fork Fomantic UI: class="ui button", "ui menu"… The version is only in the URL (and the banner of
// stylesheets and scripts, which can't be read)
window[Symbol.for('dosson')].frameworks.add({
    id: 'semantic-ui', name: 'Semantic/Fomantic UI', kind: 'css', href: 'https://fomantic-ui.com', npm: 'fomantic-ui', github: 'fomantic/Fomantic-UI',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('fomantic-ui-css') || ctx.fromUrl('fomantic-ui') || ctx.fromUrl('semantic-ui-css') || ctx.fromUrl('semantic-ui');
        if (fromUrl) {
            return fromUrl;
        }
        const components = ['.ui.button', '.ui.menu', '.ui.segment', '.ui.grid', '.ui.container', '.ui.dropdown'].filter(selector => ctx.query(selector));
        return components.length >= 2 ? { evidence: `${components.join(', ')} elements` } : null;
    }
});


==============================================================================
detect/css/shadcn.js  (18 lines)
==============================================================================

// shadcn/ui: its theme sets --radius, --background, --foreground, --card-foreground, --popover-foreground and
// --muted-foreground on :root (HSL triplets with Tailwind 3, oklch() with Tailwind 4); its newer components set data-slot
window[Symbol.for('dosson')].frameworks.add({
    id: 'shadcn', name: 'shadcn/ui', kind: 'css', href: 'https://ui.shadcn.com', npm: 'shadcn', github: 'shadcn-ui/ui',
    detect(ctx) {
        const tokens = ['--radius', '--background', '--foreground', '--card-foreground', '--popover-foreground', '--muted-foreground', '--primary-foreground', '--destructive'];
        if (!tokens.every(name => ctx.cssVar(name))) {
            return null;
        }
        // HeroUI 3 has --background, --foreground… too
        if (ctx.cssVar('--field-placeholder') || ctx.cssVar('--heroui-background')) {
            return null;
        }
        const slots = ctx.attributes.has('data-slot') ? ', data-slot on its components' : '';
        const format = /^oklch\(/.test(ctx.cssVar('--background')) ? 'oklch' : /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(ctx.cssVar('--background')) ? 'HSL' : '';
        return { evidence: `--background, --card-foreground, --muted-foreground… on :root${format ? ` (${format})` : ''}${slots}` };
    }
});


==============================================================================
detect/css/shoelace.js  (14 lines)
==============================================================================

// Shoelace and its successor Web Awesome: web components named sl-* and wa-*. Their base class has a static version,
// so the element's class in customElements gives it (bundled or from a CDN), from Shoelace 2.6
window[Symbol.for('dosson')].frameworks.add({
    id: 'shoelace', name: 'Shoelace/Web Awesome', kind: 'css', href: 'https://shoelace.style', npm: '@shoelace-style/shoelace', github: 'shoelace-style/shoelace',
    detect(ctx) {
        const tag = [...ctx.tags].find(name => /^(sl|wa)-/.test(name) && ctx.win.customElements?.get(name));
        if (!tag) {
            return null;
        }
        const version = ctx.version(ctx.win.customElements.get(tag).version);
        // before 2.6 the classes have no version: the CDN URL may name it
        return version ? { version, evidence: `customElements.get('${tag}').version` } : ctx.fromUrl('shoelace') || ctx.fromUrl('webawesome') || { evidence: `<${tag}> element` };
    }
});


==============================================================================
detect/css/shopify-dawn.js  (20 lines)
==============================================================================

// Shopify's Dawn theme: Shopify.theme on the storefront names it (schema_name, schema_version). Without it, the custom
// properties Dawn sets on :root (Shopify's other free themes are built from Dawn and share them)
window[Symbol.for('dosson')].frameworks.add({
    id: 'shopify-dawn', name: 'Shopify Dawn theme', kind: 'css', href: 'https://themes.shopify.com/themes/dawn', github: 'Shopify/dawn',
    detect(ctx) {
        const theme = ctx.get('Shopify.theme');
        if (theme && (theme.schema_name === 'Dawn' || theme.theme_store_id === 887)) {
            return { version: ctx.version(theme.schema_version), evidence: `Shopify.theme (${theme.schema_name || theme.name})` };
        }
        if (theme && theme.schema_name) {
            return null;
        }
        const vars = ['--font-body-family', '--font-heading-family', '--page-width', '--buttons-radius', '--inputs-radius', '--media-radius']
            .filter(name => ctx.cssVar(name));
        if (vars.length >= 4 && ctx.hasClass('shopify-section')) {
            return { evidence: `Dawn custom properties on :root (${vars.slice(0, 3).join(', ')}…) and shopify-section` };
        }
        return null;
    }
});


==============================================================================
detect/css/simple-css.js  (23 lines)
==============================================================================

// Simple.css (classless): its URL, else its custom properties on :root (2: --accent-hover, --standard-border-radius;
// 1: --accent-light, --base-fontsize)
window[Symbol.for('dosson')].frameworks.add({
    id: 'simple-css', name: 'Simple.css', kind: 'css', href: 'https://simplecss.org', npm: 'simpledotcss', github: 'kevquirk/simple.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('simpledotcss') || ctx.fromUrl('simple.css');
        if (fromUrl) {
            return fromUrl;
        }
        const common = ['--accent-bg', '--marked', '--preformatted', '--sans-font'];
        if (!common.every(name => ctx.cssVar(name))) {
            return null;
        }
        if (ctx.cssVar('--accent-hover') && ctx.cssVar('--standard-border-radius')) {
            return { version: '2.x', evidence: `custom properties on :root (${common.join(', ')}, --accent-hover)` };
        }
        if (ctx.cssVar('--accent-light') && ctx.cssVar('--base-fontsize')) {
            return { version: '1.x', evidence: `custom properties on :root (${common.join(', ')}, --accent-light)` };
        }
        const url = ctx.url(/simplecss\.org\//i);
        return url ? { evidence: `loaded from ${url.split(/[?#]/)[0]}` } : null;
    }
});


==============================================================================
detect/css/simple-line-icons.js  (12 lines)
==============================================================================

// Simple Line Icons: its "simple-line-icons" font ("Simple-Line-Icons" in old builds), its URL
window[Symbol.for('dosson')].frameworks.add({
    id: 'simple-line-icons', name: 'Simple Line Icons', kind: 'css', href: 'https://simplelineicons.github.io', npm: 'simple-line-icons', github: 'thesabbir/simple-line-icons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('simple-line-icons');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^simple-line-icons$/i);
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/skeleton.js  (26 lines)
==============================================================================

// Skeleton: its URL or banner ("Skeleton V2.0.4"), else its u-* utilities next to its number-word columns
window[Symbol.for('dosson')].frameworks.add({
    id: 'skeleton', name: 'Skeleton', kind: 'css', href: 'http://getskeleton.com', npm: 'skeleton-css', github: 'dhg/Skeleton',
    detect(ctx) {
        const banner = ctx.styleBanner(/Skeleton\s+V(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('skeleton-css');
        if (fromUrl) {
            return fromUrl;
        }
        const utilities = ctx.classesMatching(/^u-(full-width|max-full-width|pull-left|pull-right|cf)$/);
        // skeleton.css alone is too common a name (loading placeholders), so it needs one of Skeleton's classes too
        const url = ctx.url(/\/skeleton(\.min)?\.css(?:[?#]|$)/i);
        if (url && (utilities.length || ctx.hasClass('button-primary'))) {
            return ctx.fromUrl('skeleton') || { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        const columns = ['one-half', 'one-third', 'two-thirds'].filter(name => ctx.hasClass(name));
        if (ctx.query('.columns.six, .columns.four, .columns.eight, .column.one-half')) {
            columns.push('six/four/eight columns');
        }
        return utilities.length && columns.length && ctx.hasClass('button-primary')
            ? { evidence: `Skeleton classes (${[...utilities, ...columns, 'button-primary'].join(', ')})` } : null;
    }
});


==============================================================================
detect/css/slds.js  (19 lines)
==============================================================================

// Salesforce Lightning Design System: its banner or URL, --slds-g-* styling hooks on :root, slds-* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'slds', name: 'Lightning Design System', kind: 'css', href: 'https://www.lightningdesignsystem.com', npm: '@salesforce-ux/design-system', github: 'salesforce-ux/design-system',
    detect(ctx) {
        const banner = ctx.styleBanner(/Lightning Design System (\d+\.\d+\.\d+)/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('@salesforce-ux/design-system');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--slds-g-color-neutral-base-100')) {
            return { evidence: '--slds-g-* custom properties on :root' };
        }
        const classes = ctx.classesMatching(/^slds-/);
        return classes.length >= 2 ? { evidence: `slds-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/spectre.js  (21 lines)
==============================================================================

// Spectre.css: its URL or banner ("Spectre.css v0.5.9"), else two of its own classes (s-rounded, c-hand, tile-content…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'spectre', name: 'Spectre.css', kind: 'css', href: 'https://picturepan2.github.io/spectre/', npm: 'spectre.css', github: 'picturepan2/spectre',
    detect(ctx) {
        const banner = ctx.styleBanner(/Spectre\.css\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('spectre.css');
        if (fromUrl) {
            return fromUrl;
        }
        const url = ctx.url(/\/spectre(-exp|-icons)?(\.min)?\.css(?:[?#]|$)/i);
        if (url) {
            return { evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        const classes = ['s-rounded', 's-circle', 'c-hand', 'navbar-section', 'tile-content', 'tile-icon', 'empty-title', 'divider-vert', 'off-canvas-toggle', 'form-icon', 'label-rounded', 'text-gray']
            .filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `Spectre.css classes (${classes.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/spectrum.js  (17 lines)
==============================================================================

// Adobe Spectrum: Spectrum CSS and React Spectrum's spectrum-<Component> classes, the --spectrum-* tokens on the
// .spectrum element, Spectrum Web Components' <sp-*> elements
window[Symbol.for('dosson')].frameworks.add({
    id: 'spectrum', name: 'Spectrum', kind: 'css', href: 'https://spectrum.adobe.com', github: 'adobe/spectrum-css',
    detect(ctx) {
        const element = ctx.query('.spectrum');
        if (element && (ctx.cssVar('--spectrum-gray-50', element) || ctx.cssVar('--spectrum-global-color-gray-50', element))) {
            return { evidence: '--spectrum-* custom properties on .spectrum' };
        }
        const tags = [...ctx.tags].filter(tag => /^sp-/.test(tag) && ctx.win.customElements?.get(tag));
        if (tags.length) {
            return { evidence: `Spectrum Web Components (<${tags.slice(0, 2).join('>, <')}>)` };
        }
        const classes = ctx.classesMatching(/^spectrum-[A-Z][A-Za-z]+(?:[-_]|$)/);
        return classes.length >= 2 ? { evidence: `spectrum-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/stitches.js  (12 lines)
==============================================================================

// Stitches: the --sxs{--sxs:…} marker rules between its groups of rules, in a <style> it fills with insertRule (or
// rendered on the server), plus c-<hash> classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'stitches', name: 'Stitches', kind: 'css', href: 'https://stitches.dev', npm: '@stitches/react', github: 'stitchesjs/stitches',
    detect(ctx) {
        if (!ctx.styleRules().some(rule => rule.selectorText === '--sxs')) {
            return null;
        }
        const classes = ctx.classesMatching(/^c-[A-Za-z]{4,8}$/);
        return { evidence: `--sxs marker rules${classes.length ? `, c-<hash> classes (${classes.slice(0, 2).join(', ')}…)` : ''}` };
    }
});


==============================================================================
detect/css/styled-components.js  (11 lines)
==============================================================================

// styled-components: its <style> tags carry data-styled, and data-styled-version up to 5
window[Symbol.for('dosson')].frameworks.add({
    id: 'styled-components', name: 'styled-components', kind: 'css', href: 'https://styled-components.com', npm: 'styled-components', github: 'styled-components/styled-components',
    detect(ctx) {
        const style = ctx.query('style[data-styled], style[data-styled-components]');
        if (!style) {
            return null;
        }
        return { version: style.getAttribute('data-styled-version') || undefined, evidence: '<style data-styled>' };
    }
});


==============================================================================
detect/css/stylex.js  (14 lines)
==============================================================================

// StyleX: atomic classes hashed from the property and value, so the same everywhere (x78zum5 is display: flex), and
// the :not(#\#) its compiler adds to rules to order them without @layer
window[Symbol.for('dosson')].frameworks.add({
    id: 'stylex', name: 'StyleX', kind: 'css', href: 'https://stylexjs.com', npm: '@stylexjs/stylex', github: 'facebook/stylex',
    detect(ctx) {
        const known = ['x78zum5', 'xdt5ytf', 'x1lliihq', 'x9f619', 'xh8yej3', 'x1ypdohk', 'x6s0dn4', 'x1n2onr6', 'xl56j7k', 'x1q0g3np',
            'x3nfvp2', 'x2lah0s', 'x1iyjqo2', 'xb3r6kr', 'x10l6tqk', 'x1s85apg', 'x2b8uid', 'xeuugli', 'x1a02dak'].filter(name => ctx.hasClass(name));
        if (known.length >= 2) {
            return { evidence: `StyleX atomic classes (${known.slice(0, 3).join(', ')}…)` };
        }
        const rule = ctx.styleRules().find(rule => /^\.x[0-9a-z]{4,9}(?::[\w-]+)*:not\(#\\#\)/.test(rule.selectorText));
        return rule ? { evidence: `rule ${rule.selectorText}` } : null;
    }
});


==============================================================================
detect/css/susy.js  (32 lines)
==============================================================================

// Susy, a Sass grid: only its math survives in the CSS. A rule whose width spans n of c columns and whose margin is one
// gutter, with Susy's default gutters (1/4 of a column): width (n + (n-1)/4) / (c + (c-1)/4), gutter 1/4 / (c + (c-1)/4)
window[Symbol.for('dosson')].frameworks.add({
    id: 'susy', name: 'Susy', kind: 'css', href: 'https://www.oddbird.net/susy/', npm: 'susy', github: 'oddbird/susy',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('susy');
        if (fromUrl) {
            return fromUrl;
        }
        const close = (a, b) => Math.abs(a - b) < 0.001;
        const matches = [];
        for (const rule of ctx.styleRules()) {
            const { style } = rule;
            const width = style.width.match(/^([\d.]+)%$/);
            const margin = (style.marginRight || style.marginLeft).match(/^([\d.]+)%$/);
            if (!width || !margin) {
                continue;
            }
            for (let c = 2; c <= 24; c++) {
                const total = c + (c - 1) / 4;
                if (close(margin[1], 25 / total)) {
                    const n = (width[1] / 100 * total + 0.25) / 1.25;
                    if (n < c && close(n, Math.round(n))) {
                        matches.push(rule.selectorText);
                    }
                    break;
                }
            }
        }
        return matches.length >= 2 ? { evidence: `Susy grid spans with 1/4 gutters (${matches.slice(0, 2).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/syncfusion-themes.js  (21 lines)
==============================================================================

// Syncfusion themes without Syncfusion's scripts (its pure-CSS components): the theme's URL, its e-icons font, e-*
// classes. Nothing when Syncfusion's script is there (ej.base, ej2_instances): the Syncfusion row shows it
window[Symbol.for('dosson')].frameworks.add({
    id: 'syncfusion-themes', name: 'Syncfusion themes', kind: 'css', href: 'https://ej2.syncfusion.com/documentation/appearance/theme', npm: '@syncfusion/ej2-material-theme',
    detect(ctx) {
        const base = ctx.get('ej.base');
        if ((base && typeof base.Component === 'function') || Array.isArray(ctx.expando(/^ej2_instances$/)?.value)) {
            return null;
        }
        // https://cdn.syncfusion.com/ej2/30.1.37/material.css, @syncfusion/ej2-material-theme@30.1.37/styles/material.css
        const url = ctx.url(/cdn\.syncfusion\.com\/ej2\/\d+\.\d+\.\d+\/|@syncfusion\/ej2-[\w-]+@\d+\.\d+\.\d+\/.*\.css/);
        if (url) {
            return { version: url.match(/(?:\/ej2\/|@)(\d+\.\d+\.\d+)\//)[1], evidence: `loaded from ${url.split(/[?#]/)[0]}` };
        }
        if (ctx.font(/^e-icons$/)) {
            return { evidence: 'e-icons font' };
        }
        const classes = ['e-btn', 'e-input-group', 'e-float-input', 'e-card-header', 'e-checkbox-wrapper', 'e-control-wrapper'].filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `e-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/tabler.js  (14 lines)
==============================================================================

// Tabler (Bootstrap-based admin template): its URL, --tblr-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'tabler', name: 'Tabler', kind: 'css', href: 'https://tabler.io', npm: '@tabler/core', github: 'tabler/tabler',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@tabler/core');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--tblr-blue') || ctx.cssVar('--tblr-body-bg')) {
            return { evidence: '--tblr-* custom properties on :root' };
        }
        return null;
    }
});


==============================================================================
detect/css/tabler-icons.js  (17 lines)
==============================================================================

// Tabler Icons: the "tabler-icons" web font, <svg class="icon icon-tabler"> (the SVG files) or "tabler-icon" (React,
// Vue…), their URLs
window[Symbol.for('dosson')].frameworks.add({
    id: 'tabler-icons', name: 'Tabler Icons', kind: 'css', href: 'https://tabler.io/icons', npm: '@tabler/icons-webfont', github: 'tabler/tabler-icons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('@tabler/icons-webfont') || ctx.fromUrl('@tabler/icons');
        if (fromUrl) {
            return fromUrl;
        }
        const font = ctx.font(/^tabler-icons/i);
        if (font) {
            return { evidence: `font "${font}"` };
        }
        const icon = ctx.query('svg.icon-tabler, svg.tabler-icon');
        return icon ? { evidence: `<svg class="${icon.getAttribute('class')}">` } : null;
    }
});


==============================================================================
detect/css/tachyons.js  (12 lines)
==============================================================================

// Tachyons: short atomic classes (pa3, f4, lh-copy, dib…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'tachyons', name: 'Tachyons', kind: 'css', href: 'https://tachyons.io', npm: 'tachyons', github: 'tachyons-css/tachyons',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('tachyons');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ['lh-copy', 'lh-title', 'dib', 'measure', 'near-black', 'mid-gray', 'sans-serif', 'link', 'dim', 'grow', 'ba', 'bb', 'br2', 'mw7', 'mw8', 'pa3', 'pa4', 'ph3', 'pv2', 'f4', 'f5', 'f6', 'tc'].filter(name => ctx.hasClass(name));
        return classes.length >= 6 ? { evidence: `Tachyons classes (${classes.slice(0, 4).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/tailwind.js  (29 lines)
==============================================================================

// Tailwind CSS. 4 puts its theme on :root (--default-font-family…); 3 sets --tw-* on every element. Utility classes
// alone (px-4, text-sm…) only suggest it
window[Symbol.for('dosson')].frameworks.add({
    id: 'tailwind', name: 'Tailwind CSS', kind: 'css', href: 'https://tailwindcss.com', npm: 'tailwindcss', github: 'tailwindlabs/tailwindcss',
    detect(ctx) {
        const banner = ctx.styleBanner(/tailwindcss\s+v(\d+\.\d+\.\d+)/i);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const fromUrl = ctx.fromUrl('tailwindcss') || ctx.fromUrl('@tailwindcss/browser');
        if (fromUrl) {
            return fromUrl;
        }
        if (ctx.cssVar('--default-font-family') && ctx.cssVar('--spacing')) {
            return { version: '4.x', evidence: '--default-font-family and --spacing on :root' };
        }
        // UnoCSS and Windi CSS write Tailwind's utility classes (Windi even its --tw-*): their own detectors report them
        if (ctx.get('__unocss_runtime') || ctx.query('style[data-unocss-runtime-layer]') || ctx.cssVar('--un-rotate')
            || ctx.get('__windicssRuntimeInitialized') || ctx.url(/(^|[/_-])windi([.-][\w.-]*)?\.css([?#]|$)/i)) {
            return null;
        }
        const body = ctx.doc.body || ctx.doc.documentElement;
        if (ctx.cssVar('--tw-ring-offset-width', body) || ctx.cssVar('--tw-border-spacing-x', body) || ctx.cssVar('--tw-translate-x', body)) {
            return { version: '3.x', evidence: '--tw-* custom properties on every element' };
        }
        const utilities = ctx.classesMatching(/^(?:[a-z0-9-]+:)*-?(?:p[xytrbl]?|m[xytrbl]?|gap|space-[xy]|w|h)-(?:\d+(?:\.5)?|px)$|^(?:[a-z0-9-]+:)*(?:bg|text|border)-[a-z]+-\d{2,3}$/);
        return utilities.length >= 10 ? { evidence: `utility classes (${utilities.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/tdesign.js  (20 lines)
==============================================================================

// TDesign (Tencent, Vue and React): --td-* custom properties on :root, t-* BEM classes (t-button__text, t-input__inner…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'tdesign', name: 'TDesign', kind: 'css', href: 'https://tdesign.tencent.com', npm: 'tdesign-vue-next', github: 'Tencent/tdesign-vue-next',
    detect(ctx) {
        const version = ctx.globalVersion('TDesign.version');
        if (version) {
            return version;
        }
        const fromUrl = ctx.fromUrl('tdesign-vue-next') || ctx.fromUrl('tdesign-react') || ctx.fromUrl('tdesign-vue');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^t-(button|input|card|form|checkbox|select|table|menu|layout|alert|tag|dialog|tabs)(__|--)[\w-]+$/);
        const vars = Boolean(ctx.cssVar('--td-brand-color'));
        if (classes.length >= 2 || (classes.length && vars)) {
            return { evidence: `t-* classes (${classes.slice(0, 3).join(', ')}…)${vars ? ' and --td-* custom properties' : ''}` };
        }
        return null;
    }
});


==============================================================================
detect/css/theme-ui.js  (12 lines)
==============================================================================

// Theme UI: the --theme-ui-colors-* custom properties its provider sets on <html> (Emotion rules)
window[Symbol.for('dosson')].frameworks.add({
    id: 'theme-ui', name: 'Theme UI', kind: 'css', href: 'https://theme-ui.com', npm: 'theme-ui', github: 'system-ui/theme-ui',
    detect(ctx) {
        if (ctx.cssVar('--theme-ui-colors-text') || ctx.cssVar('--theme-ui-colors-background')) {
            return { evidence: '--theme-ui-colors-* custom properties on :root' };
        }
        return ctx.styleRules().some(rule => rule.style.cssText.includes('--theme-ui-colors-'))
            ? { evidence: '--theme-ui-colors-* custom properties in a rule' }
            : null;
    }
});


==============================================================================
detect/css/themify.js  (8 lines)
==============================================================================

// Themify Icons: its "themify" font (the official download), "themify-icons" in repackaged builds
window[Symbol.for('dosson')].frameworks.add({
    id: 'themify', name: 'Themify Icons', kind: 'css', href: 'https://themify.me/themify-icons',
    detect(ctx) {
        const font = ctx.font(/^themify(-icons)?$/i);
        return font ? { evidence: `font "${font}"` } : null;
    }
});


==============================================================================
detect/css/tuicss.js  (8 lines)
==============================================================================

// TuiCSS, text-mode styles (Dosson's own copy is in its shadow roots, which this doesn't look into)
window[Symbol.for('dosson')].frameworks.add({
    id: 'tuicss', name: 'TuiCSS', kind: 'css', href: 'https://github.com/vinibiavatti1/TuiCss', npm: 'tuicss', github: 'vinibiavatti1/TuiCss',
    detect(ctx) {
        const classes = ctx.classesMatching(/^tui-/);
        return classes.length >= 2 ? ctx.fromUrl('tuicss') || { evidence: `tui-* classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/twind.js  (10 lines)
==============================================================================

// Twind: Twind 1 writes into a <style data-twind> (its hashed classes start with #), 0.x into <style id="__twind">
window[Symbol.for('dosson')].frameworks.add({
    id: 'twind', name: 'Twind', kind: 'css', href: 'https://twind.style', npm: '@twind/core', github: 'tw-in-js/twind',
    detect(ctx) {
        if (ctx.query('style[data-twind]')) {
            return { version: '1.x', evidence: '<style data-twind>' };
        }
        return ctx.query('style#__twind') ? { version: '0.x', evidence: '<style id="__twind">' } : null;
    }
});


==============================================================================
detect/css/uikit.js  (12 lines)
==============================================================================

// UIkit
window[Symbol.for('dosson')].frameworks.add({
    id: 'uikit', name: 'UIkit', kind: 'css', href: 'https://getuikit.com', npm: 'uikit', github: 'uikit/uikit',
    detect(ctx) {
        const version = ctx.globalVersion('UIkit.version');
        if (version) {
            return version;
        }
        const classes = ctx.classesMatching(/^uk-/);
        return classes.length >= 3 ? ctx.fromUrl('uikit') || { evidence: `uk-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/unocss.js  (19 lines)
==============================================================================

// UnoCSS: its CDN runtime sets window.__unocss_runtime (with the version) and fills <style data-unocss-runtime-layer>;
// built sites keep the --un-* custom properties its utilities and preflights set
window[Symbol.for('dosson')].frameworks.add({
    id: 'unocss', name: 'UnoCSS', kind: 'css', href: 'https://unocss.dev', npm: 'unocss', github: 'unocss/unocss',
    detect(ctx) {
        const runtime = ctx.globalVersion('__unocss_runtime.version');
        if (runtime) {
            return runtime;
        }
        if (ctx.query('style[data-unocss-runtime-layer]')) {
            return { evidence: '<style data-unocss-runtime-layer>' };
        }
        if (ctx.cssVar('--un-rotate') || ctx.cssVar('--un-ring-offset-width')) {
            return { evidence: '--un-* custom properties on every element' };
        }
        const rule = ctx.styleRules().find(rule => /(^|;\s*)--un-[a-z]/.test(rule.style.cssText));
        return rule ? { evidence: `--un-* custom properties (${rule.selectorText})` } : null;
    }
});


==============================================================================
detect/css/vanilla-extract.js  (31 lines)
==============================================================================

// vanilla-extract: its class names are its file's hash plus a counter (_1l9c2wy0, _1l9c2wy1… in production,
// styles_card__1l9c2wy0 in debug), and so are its theme's custom properties (--_165y0ik0). Several of one file count
window[Symbol.for('dosson')].frameworks.add({
    id: 'vanilla-extract', name: 'vanilla-extract', kind: 'css', href: 'https://vanilla-extract.style', npm: '@vanilla-extract/css', github: 'vanilla-extract-css/vanilla-extract',
    detect(ctx) {
        // the names sharing the most common hash: names end with a counter after the hash, which has letters and digits
        const largestFile = (names, regex) => {
            const files = new Map();
            for (const name of names) {
                const match = name.match(regex);
                const hash = match && match[1].replace(/\d+$/, '');
                if (hash && hash.length >= 5 && /\d/.test(hash) && /[a-z]/.test(hash)) {
                    files.set(hash, [...(files.get(hash) || []), name]);
                }
            }
            return [...files.values()].sort((a, b) => b.length - a.length)[0] || [];
        };
        const classes = largestFile(ctx.classes, /^(?:[A-Za-z][\w-]*__)?(_?[0-9a-z]{6,10})$/);
        if (classes.length >= 3) {
            return { evidence: `<hash><counter> classes (${classes.slice(0, 3).join(', ')}…)` };
        }
        let properties = [];
        try {
            properties = largestFile(Array.from(ctx.win.getComputedStyle(ctx.doc.documentElement)).filter(name => name.startsWith('--')), /^--(?:[A-Za-z][\w-]*__)?(_?[0-9a-z]{6,10})$/);
        } catch (e) { }
        if (properties.length >= 3 && classes.length >= 1) {
            return { evidence: `--<hash><counter> custom properties on :root (${properties.slice(0, 2).join(', ')}…)` };
        }
        return null;
    }
});


==============================================================================
detect/css/vant.js  (20 lines)
==============================================================================

// Vant (mobile Vue components, by Youzan): van-* classes, --van-* custom properties on :root
window[Symbol.for('dosson')].frameworks.add({
    id: 'vant', name: 'Vant', kind: 'css', href: 'https://vant-ui.github.io/vant', npm: 'vant', github: 'youzan/vant',
    detect(ctx) {
        const version = ctx.globalVersion('vant.version');
        if (version) {
            return version;
        }
        const fromUrl = ctx.fromUrl('vant');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^van-(button|cell|cell-group|field|checkbox|radio|nav-bar|tabbar|tabs|popup|notice-bar|tag|icon|list|grid|search)$/);
        const vars = Boolean(ctx.cssVar('--van-primary-color'));
        if (classes.length >= 2 || (classes.length && vars)) {
            return { evidence: `van-* classes (${classes.slice(0, 3).join(', ')}…)${vars ? ' and --van-* custom properties' : ''}` };
        }
        return null;
    }
});


==============================================================================
detect/css/view-ui.js  (12 lines)
==============================================================================

// View UI (iView, Vue components): ivu-* classes. View UI Plus is the Vue 3 version
window[Symbol.for('dosson')].frameworks.add({
    id: 'view-ui', name: 'View UI (iView)', kind: 'css', href: 'https://www.iviewui.com', npm: 'view-ui-plus', github: 'view-design/ViewUIPlus',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('view-ui-plus') || ctx.fromUrl('view-design') || ctx.fromUrl('iview');
        if (fromUrl) {
            return fromUrl;
        }
        const classes = ctx.classesMatching(/^ivu-(btn|input|input-wrapper|card|form|form-item|checkbox|checkbox-wrapper|select|table|menu|layout|alert|tag|modal|tabs|row|col)$/);
        return classes.length >= 2 ? { evidence: `ivu-* classes (${classes.slice(0, 3).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/vuetify.js  (15 lines)
==============================================================================

// Vuetify: v-application on its root. 4 puts its theme <style> in @layer vuetify-utilities, 3 themes with
// v-theme--light, 2 with theme--light. The exact version isn't kept anywhere the page can reach
window[Symbol.for('dosson')].frameworks.add({
    id: 'vuetify', name: 'Vuetify', kind: 'css', href: 'https://vuetifyjs.com', npm: 'vuetify', github: 'vuetifyjs/vuetify',
    detect(ctx) {
        if (!ctx.hasClass('v-application')) {
            return null;
        }
        if (ctx.styleBanner(/^\s*(@layer vuetify-utilities)\b/)) {
            return { version: '4.x', evidence: 'v-application class, theme <style> in @layer vuetify-utilities' };
        }
        const version = ctx.classesMatching(/^v-theme--/).length ? '3.x' : ctx.hasClass('theme--light', 'theme--dark') ? '2.x' : undefined;
        return { version, evidence: 'v-application class' };
    }
});


==============================================================================
detect/css/water-css.js  (12 lines)
==============================================================================

// Water.css (classless): its URL, else its custom properties on :root (--background-body, --text-bright, --button-base…)
window[Symbol.for('dosson')].frameworks.add({
    id: 'water-css', name: 'Water.css', kind: 'css', href: 'https://watercss.kognise.dev', npm: 'water.css', github: 'kognise/water.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('water.css');
        if (fromUrl) {
            return fromUrl;
        }
        const names = ['--background-body', '--text-bright', '--button-base', '--form-placeholder', '--scrollbar-thumb'];
        return names.every(name => ctx.cssVar(name)) ? { version: '2.x', evidence: `custom properties on :root (${names.join(', ')})` } : null;
    }
});


==============================================================================
detect/css/windicss.js  (20 lines)
==============================================================================

// Windi CSS: a stylesheet named after it (windi.css from its CLI, Vite's virtual windi.css in development), its
// browser runtime (windicss-runtime-dom) or its compilation mode's windi-<hash> classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'windicss', name: 'Windi CSS', kind: 'css', href: 'https://windicss.org', npm: 'windicss', github: 'windicss/windicss',
    detect(ctx) {
        if (ctx.get('__windicssRuntimeInitialized') === true) {
            return { evidence: 'window.__windicssRuntimeInitialized (windicss-runtime-dom)' };
        }
        const link = Array.from(ctx.doc.querySelectorAll('link[rel~="stylesheet"][href]'))
            .find(link => /(^|[/_-])windi([.-][\w.-]*)?\.css$/i.test(new URL(link.href, ctx.doc.baseURI).pathname));
        if (link) {
            return { evidence: `loaded ${link.href.split(/[?#]/)[0]}` };
        }
        if (ctx.query('style[data-vite-dev-id*="windi.css"]')) {
            return { evidence: '<style data-vite-dev-id="…windi.css">' };
        }
        const classes = ctx.classesMatching(/^windi-[a-z0-9]{5,8}$/);
        return classes.length >= 2 ? { evidence: `windi-<hash> classes (${classes.slice(0, 2).join(', ')}…)` } : null;
    }
});


==============================================================================
detect/css/wpbakery.js  (18 lines)
==============================================================================

// WPBakery Page Builder (js_composer): the js-comp-ver-* class it adds to <body>, its stylesheet, vc_*/wpb_* classes
window[Symbol.for('dosson')].frameworks.add({
    id: 'wpbakery', name: 'WPBakery', kind: 'css', href: 'https://wpbakery.com',
    detect(ctx) {
        const bodyVersion = ctx.classesMatching(/^js-comp-ver-\d/)[0];
        if (bodyVersion) {
            return { version: bodyVersion.slice('js-comp-ver-'.length), evidence: `${bodyVersion} class` };
        }
        const stylesheet = ctx.url(/\/plugins\/js_composer\/assets\/css\/js_composer[\w.-]*\.css/);
        if (stylesheet) {
            const version = stylesheet.match(/[?&]ver=(\d+\.\d+(?:\.\d+)?)/);
            return { version: version ? version[1] : undefined, evidence: 'loaded js_composer.min.css' };
        }
        const classes = ['wpb-js-composer', 'vc_row', 'wpb_row', 'vc_column_container', 'wpb_column', 'wpb_wrapper', 'wpb_text_column']
            .filter(name => ctx.hasClass(name));
        return classes.length >= 2 ? { evidence: `WPBakery classes (${classes.slice(0, 3).join(', ')})` } : null;
    }
});


==============================================================================
detect/css/xp-css.js  (16 lines)
==============================================================================

// XP.css, Windows XP styles (built on 98.css). It declares the "Perfect DOS VGA 437 Win" font next to 98.css's
window[Symbol.for('dosson')].frameworks.add({
    id: 'xp-css', name: 'XP.css', kind: 'css', href: 'https://botoxparty.github.io/XP.css/', npm: 'xp.css', github: 'botoxparty/XP.css',
    detect(ctx) {
        const fromUrl = ctx.fromUrl('xp.css');
        if (fromUrl) {
            return fromUrl;
        }
        const banner = ctx.styleBanner(/(?:XP|98)\.css v(\d+\.\d+\.\d+) - https:\/\/botoxparty/);
        if (banner) {
            return { version: banner, evidence: 'banner in a <style>' };
        }
        const font = ctx.font(/^Perfect DOS VGA 437/i);
        return font && ctx.font(/^Pixelated MS Sans Serif$/i) ? { evidence: `fonts "${font}" and "Pixelated MS Sans Serif"` } : null;
    }
});