Number list generator 2.2

(function() {
    if (document.getElementById("numHUD")) return;
    const MAX_OUTPUT = 100000;

    const alphaToNum = s => {
        if (!isNaN(s) && s !== "") return parseInt(s);
        s = s.toLowerCase().replace(/[^a-z]/g, "");
        if (!s) return 0;
        let n = 0;
        for (let i = 0; i < s.length; i++) n = n * 26 + (s.charCodeAt(i) - 96);
        return n - 1;
    };

    const numToAlpha = n => {
        let r = "",
            num = Math.max(0, n);
        do {
            r = String.fromCharCode(97 + (num % 26)) + r;
            num = Math.floor(num / 26) - 1;
        } while (num >= 0);
        return r;
    };

    const isPrime = n => {
        if (n < 2) return false;
        for (let i = 2, s = Math.sqrt(n); i <= s; i++)
            if (n % i === 0) return false;
        return true;
    };

    const getPermutations = (str) => {
        if (str.length <= 1) return [str];
        let perms = new Set();
        for (let i = 0; i < str.length; i++) {
            let char = str[i];
            let remainingChars = str.slice(0, i) + str.slice(i + 1);
            for (let p of getPermutations(remainingChars)) {
                perms.add(char + p);
                if (perms.size >= MAX_OUTPUT) return Array.from(perms);
            }
        }
        return Array.from(perms);
    };

    const hud = document.createElement("div");
    hud.id = "numHUD";
    hud.style.cssText = `position:fixed; top:40px; left:40px; width:260px; background:rgba(20,20,20,0.98); color:#eee; font-family:sans-serif; padding:10px; border-radius:8px; z-index:2147483647; box-shadow:0 10px 30px rgba(0,0,0,0.5); border:1px solid #444; font-size:11px;`;

    const header = document.createElement("div");
    // Added a 'cnt' span for the word count
    header.innerHTML = `
        <b style="color:#0f0">Number List Generator 2.2</b>
        <span id="nh_count" style="margin-left:10px; color:#888; font-size:9px;">[0 items]</span>
        <span style="float:right; cursor:pointer; color:#888; margin-left:10px;">✕</span>`;
    header.style.cssText = "cursor:move; padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid #333;";
    header.querySelector('span:last-child').onclick = () => hud.remove();
    hud.appendChild(header);

    const countDisp = header.querySelector("#nh_count");

    const grid = document.createElement("div");
    grid.style.cssText = "display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin-bottom:8px;";
    hud.appendChild(grid);

    const inputs = {};
    const addField = (id, label, val) => {
        const w = document.createElement("div");
        w.innerHTML = `<label style="color:#888; display:block; font-size:9px;">${label}</label>`;
        const i = document.createElement("input");
        i.id = "nh_" + id;
        i.value = val;
        i.style.cssText = "width:100%; background:#000; border:1px solid #444; color:#fff; padding:3px; border-radius:3px; box-sizing:border-box;";
        w.appendChild(i);
        grid.appendChild(w);
        inputs[id] = i;
    };

    addField("start", "Start", "0");
    addField("end", "End", "10");
    addField("step", "Step", "1");
    addField("pad", "Pad", "0");
    addField("prefix", "Prefix", "");
    addField("suffix", "Suffix", "");
    addField("source", "Source Word", "abc");

    const modeRow = document.createElement("div");
    modeRow.style.cssText = "margin-bottom:8px;";
    const modeSelect = document.createElement("select");
    modeSelect.style.cssText = "width:100%; background:#000; color:#fff; border:1px solid #444; padding:2px; border-radius:3px;";
    ["Numeric", "Alphabetic", "Roman", "Hex", "Color", "Prime", "Word Scramble"].forEach(m => {
        const o = document.createElement("option");
        o.value = m;
        o.textContent = m;
        modeSelect.appendChild(o);
    });
    modeRow.appendChild(modeSelect);
    hud.appendChild(modeRow);

    const checkRow = document.createElement("div");
    checkRow.style.cssText = "margin-bottom:8px; padding:0 5px;";
    checkRow.innerHTML = `<label><input type="checkbox" id="nh_vert"> Vertical Output (Newline)</label>`;
    hud.appendChild(checkRow);
    const vertT = hud.querySelector("#nh_vert");

    const output = document.createElement("textarea");
    output.style.cssText = "width:100%; height:70px; background:#050505; color:#0f0; border:1px solid #333; border-radius:3px; font-family:monospace; font-size:10px; margin-bottom:8px; box-sizing:border-box; resize:vertical;";
    hud.appendChild(output);

    const btnGrid = document.createElement("div");
    btnGrid.style.cssText = "display:grid; grid-template-columns: 1fr 1fr; gap:4px;";
    const genBtn = document.createElement("button");
    genBtn.textContent = "GENERATE";
    genBtn.style.cssText = "grid-column: span 2; background:#007bff; color:#fff; border:none; padding:6px; border-radius:3px; cursor:pointer; font-weight:bold;";
    const copyBtn = document.createElement("button");
    copyBtn.textContent = "COPY";
    copyBtn.style.cssText = "background:#444; color:#fff; border:none; padding:4px; border-radius:3px; cursor:pointer;";
    const saveBtn = document.createElement("button");
    saveBtn.textContent = "SAVE";
    saveBtn.style.cssText = "background:#444; color:#fff; border:none; padding:4px; border-radius:3px; cursor:pointer;";

    btnGrid.append(genBtn, copyBtn, saveBtn);
    hud.appendChild(btnGrid);

    genBtn.onclick = () => {
        let res = [],
            m = modeSelect.value;
        const pre = inputs.prefix.value,
            suf = inputs.suffix.value;

        if (m === "Word Scramble") {
            const word = inputs.source.value;
            if (word.length > 8) {
                alert("Word too long for browser memory!");
                return;
            }
            res = getPermutations(word).map(w => pre + w + suf);
        } else {
            const p = parseInt(inputs.pad.value) || 0;
            const format = v => {
                let str = v.toString();
                if (p > str.length) str = str.padStart(p, "0");
                return pre + str + suf;
            };

            let s = isNaN(inputs.start.value) ? alphaToNum(inputs.start.value) : (parseInt(inputs.start.value) || 0);
            let e = isNaN(inputs.end.value) ? alphaToNum(inputs.end.value) : (parseInt(inputs.end.value) || 0);
            const st = Math.max(1, Math.abs(parseInt(inputs.step.value) || 1));

            const convert = v => {
                if (m === "Alphabetic") return numToAlpha(v);
                if (m === "Roman") {
                    let n = v;
                    const rom = [
                        ["M", 1000],
                        ["CM", 900],
                        ["D", 500],
                        ["CD", 400],
                        ["C", 100],
                        ["XC", 90],
                        ["L", 50],
                        ["XL", 40],
                        ["X", 10],
                        ["IX", 9],
                        ["V", 5],
                        ["IV", 4],
                        ["I", 1]
                    ];
                    let r = "";
                    for (let [rs, rv] of rom) {
                        while (n >= rv) {
                            r += rs;
                            n -= rv;
                        }
                    }
                    return r || "0";
                }
                if (m === "Color") return "#" + Math.abs(v).toString(16).padStart(6, '0').slice(-6);
                if (m === "Hex") return v.toString(16);
                return v;
            };

            const fwd = s <= e;
            for (let i = s; fwd ? i <= e : i >= e; fwd ? i += st : i -= st) {
                if (res.length >= MAX_OUTPUT) break;
                if (m === "Prime" && !isPrime(i)) continue;
                res.push(format(convert(i)));
            }
        }

        output.value = vertT.checked ? res.join("\n") : res.join(", ");

        // Update the Counter Display
        countDisp.textContent = `[${res.length.toLocaleString()} items]`;
        countDisp.style.color = res.length >= MAX_OUTPUT ? "#f80" : "#888";
    };

    copyBtn.onclick = () => {
        output.select();
        document.execCommand("copy");
        copyBtn.textContent = "DONE";
        setTimeout(() => copyBtn.textContent = "COPY", 800);
    };

    saveBtn.onclick = () => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(new Blob([output.value], {
            type: "text/plain"
        }));
        a.download = "sequence_list.txt";
        a.click();
    };

    let d = false,
        ox, oy;
    header.onmousedown = e => {
        d = true;
        ox = e.clientX - hud.offsetLeft;
        oy = e.clientY - hud.offsetTop;
    };
    document.onmousemove = e => {
        if (d) {
            hud.style.left = (e.clientX - ox) + "px";
            hud.style.top = (e.clientY - oy) + "px";
        }
    };
    document.onmouseup = () => d = false;
    document.body.appendChild(hud);
})();