jsbeeb 1.10.0 → 1.12.0

package/README.md

@@ -177,7 +177,7 @@ sudo rpm -i out/dist/jsbeeb-1.0.1.x86_64.rpm
   Doesn't support the sth: pseudo URL unlike `disc` and `tape`, but if given a ZIP file will attempt to use the `.rom`
   file assumed to be within.
 - (mostly internal use) `logFdcCommands`, `logFdcStateChanges` - turn on logging in the disc controller.
-- `audioDebug=true` turns on some audio debug graphs.
+- `audioDebug` - show audio queue stats chart.
 
 ## Patches
 

package/package.json

@@ -7,7 +7,7 @@
   "name": "jsbeeb",
   "description": "Emulate a BBC Micro",
   "repository": "git@github.com:mattgodbolt/jsbeeb.git",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "//": "If you change the version of Node, it must also be updated at the top of the Dockerfile.",
   "engines": {
     "node": ">=22.12.0"
@@ -30,13 +30,8 @@
     "argparse": "^2.0.1",
     "bootstrap": "^5.3.8",
     "bootswatch": "^5.3.8",
-    "event-emitter-es6": "^1.1.5",
-    "fflate": "^0.8.2",
-    "jquery": "^4.0.0",
-    "pako": "^2.1.0",
     "sharp": "^0.34.5",
-    "smoothie": "^1.36.1",
-    "underscore": "^1.13.7"
+    "smoothie": "^1.36.1"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

package/src/6502.js

@@ -1106,7 +1106,7 @@ export class Cpu6502 extends Base6502 {
         const ramRomOs = this.ramRomOs;
         let data = await utils.loadData(name);
         if (/\.zip/i.test(name)) {
-            data = utils.unzipRomImage(data).data;
+            data = (await utils.unzipRomImage(data)).data;
         }
         ramRomOs.set(data, offset);
     }
@@ -1208,6 +1208,13 @@ export class Cpu6502 extends Base6502 {
         if (state.roms) {
             this.ramRomOs.set(state.roms.slice(0, 16 * 16384), this.romOffset);
         }
+        // Selectively overwrite individual sideways RAM banks (e.g. from BeebEm UEF import)
+        // without touching ROM banks that jsbeeb has already loaded.
+        if (state.swRamBanks) {
+            for (const [bank, data] of Object.entries(state.swRamBanks)) {
+                this.ramRomOs.set(data.slice(0, 16384), this.romOffset + Number(bank) * 16384);
+            }
+        }
         this.videoDisplayPage = state.videoDisplayPage;
         this.music5000PageSel = state.music5000PageSel;
 

package/src/app/app.js

@@ -242,7 +242,7 @@ const template = [
                     const result = await dialog.showOpenDialog(browserWindow, {
                         title: "Load emulator state",
                         filters: [
-                            { name: "Snapshot files", extensions: ["gz", "json", "snp"] },
+                            { name: "Snapshot files", extensions: ["gz", "json", "snp", "uef"] },
                             { name: "All files", extensions: ["*"] },
                         ],
                         properties: ["openFile"],

package/src/app/electron.js

@@ -3,8 +3,6 @@
 // Electron integration for jsbeeb desktop application.
 // Handles IPC communication for loading disc/tape images and showing modals from Electron's main process.
 
-export let initialise = function () {};
-
 function init(args) {
     const { loadDiscImage, loadTapeImage, loadStateFile, processor, modals, actions, config } = args;
     const api = window.electronAPI;
@@ -57,15 +55,17 @@ function init(args) {
 
     // Save settings when they change
     if (config) {
-        config.on("settings-changed", (settings) => {
-            api.saveSettings(settings);
+        config.addEventListener("settings-changed", (e) => {
+            api.saveSettings(e.detail);
         });
-        config.on("media-changed", (media) => {
-            api.saveSettings(media);
+        config.addEventListener("media-changed", (e) => {
+            api.saveSettings(e.detail);
         });
     }
 }
 
-if (typeof window.electronAPI !== "undefined") {
-    initialise = init;
+export function initialise(args) {
+    if (typeof window.electronAPI !== "undefined") {
+        init(args);
+    }
 }

package/src/bem-snapshot.js

@@ -1,9 +1,12 @@
 "use strict";
+import { decompress } from "./utils.js";
 
 // B-em snapshot format parser (versions 1 and 3).
 // v1 (BEMSNAP1): Fixed-size 327,885 byte packed struct. Reference: beebjit state.c
 // v3 (BEMSNAP3): Section-based with key+size headers, zlib-compressed memory. Reference: b-em savestate.c
 
+import { volumeTable, buildVideoState, buildSnapshot } from "./snapshot-helpers.js";
+
 const BemV1Size = 327885;
 
 // v1 struct offsets
@@ -113,7 +116,7 @@ function convertViaState(bemVia, ic32) {
         t2l: bemVia.t2l,
         t1c: bemVia.t1c,
         t2c: bemVia.t2c,
-        t1hit: !!bemVia.t1hit,
+        t1hit: bemVia.acr & 0x40 ? false : !!bemVia.t1hit,
         t2hit: !!bemVia.t2hit,
         portapins: 0xff,
         portbpins: 0xff,
@@ -134,17 +137,6 @@ function convertViaState(bemVia, ic32) {
     return result;
 }
 
-// Volume lookup table matching soundchip.js
-const volumeTable = new Float32Array(16);
-(() => {
-    let f = 1.0;
-    for (let i = 0; i < 15; ++i) {
-        volumeTable[i] = f / 4;
-        f *= Math.pow(10, -0.1);
-    }
-    volumeTable[15] = 0;
-})();
-
 function convertSoundState(snLatch, snCount, snStat, snVol, snNoise, snShift) {
     const registers = new Uint16Array(4);
     const counter = new Float32Array(4);
@@ -180,178 +172,6 @@ function convertSoundState(snLatch, snCount, snStat, snVol, snNoise, snShift) {
     };
 }
 
-function buildVideoState(ulaControl, ulaPalette, crtcRegs, nulaCollook, crtcCounters) {
-    const regs = new Uint8Array(32);
-    regs.set(crtcRegs.slice(0, 18));
-    const actualPal = new Uint8Array(16);
-    for (let i = 0; i < 16; i++) actualPal[i] = ulaPalette[i] & 0x0f;
-
-    // Use NULA collook if provided, otherwise use default BBC palette
-    const collook =
-        nulaCollook ||
-        new Int32Array([
-            0xff000000, 0xff0000ff, 0xff00ff00, 0xff00ffff, 0xffff0000, 0xffff00ff, 0xffffff00, 0xffffffff, 0xff000000,
-            0xff0000ff, 0xff00ff00, 0xff00ffff, 0xffff0000, 0xffff00ff, 0xffffff00, 0xffffffff,
-        ]);
-
-    // Compute ulaPal from actualPal + collook, matching jsbeeb's Ula._recomputeUlaPal
-    const flashEnabled = !!(ulaControl & 1);
-    const defaultFlash = new Uint8Array([1, 1, 1, 1, 1, 1, 1, 1]);
-    const flash = defaultFlash;
-    const ulaPal = new Int32Array(16);
-    for (let i = 0; i < 16; i++) {
-        const palVal = actualPal[i];
-        let colour = collook[(palVal & 0xf) ^ 7];
-        if (palVal & 8 && flashEnabled && flash[(palVal & 7) ^ 7]) {
-            colour = collook[palVal & 0xf];
-        }
-        ulaPal[i] = colour;
-    }
-
-    return {
-        regs,
-        bitmapX: 0,
-        bitmapY: 0,
-        oddClock: false,
-        frameCount: 0,
-        doEvenFrameLogic: false,
-        isEvenRender: true,
-        lastRenderWasEven: false,
-        firstScanline: true,
-        inHSync: false,
-        inVSync: false,
-        hadVSyncThisRow: false,
-        checkVertAdjust: false,
-        endOfMainLatched: false,
-        endOfVertAdjustLatched: false,
-        endOfFrameLatched: false,
-        inVertAdjust: false,
-        inDummyRaster: false,
-        hpulseWidth: regs[3] & 0x0f,
-        vpulseWidth: (regs[3] & 0xf0) >>> 4,
-        hpulseCounter: 0,
-        vpulseCounter: 0,
-        dispEnabled: 0x3f,
-        horizCounter: crtcCounters ? crtcCounters.hc : 0,
-        vertCounter: crtcCounters ? crtcCounters.vc : 0,
-        scanlineCounter: crtcCounters ? crtcCounters.sc : 0,
-        vertAdjustCounter: 0,
-        addr: crtcCounters ? crtcCounters.ma : (regs[13] | (regs[12] << 8)) & 0x3fff,
-        lineStartAddr: crtcCounters ? crtcCounters.maback : (regs[13] | (regs[12] << 8)) & 0x3fff,
-        nextLineStartAddr: crtcCounters ? crtcCounters.maback : (regs[13] | (regs[12] << 8)) & 0x3fff,
-        ulactrl: ulaControl,
-        pixelsPerChar: ulaControl & 0x10 ? 8 : 16,
-        halfClock: !(ulaControl & 0x10),
-        ulaMode: (ulaControl >>> 2) & 3,
-        teletextMode: !!(ulaControl & 2),
-        displayEnableSkew: Math.min((regs[8] & 0x30) >>> 4, 2),
-        ulaPal,
-        actualPal,
-        cursorOn: false,
-        cursorOff: false,
-        cursorOnThisFrame: false,
-        cursorDrawIndex: 0,
-        cursorPos: (regs[15] | (regs[14] << 8)) & 0x3fff,
-        interlacedSyncAndVideo: (regs[8] & 3) === 3,
-        screenSubtract: 0,
-        ula: {
-            collook: collook.slice(),
-            flash: new Uint8Array([1, 1, 1, 1, 1, 1, 1, 1]),
-            paletteWriteFlag: false,
-            paletteFirstByte: 0,
-            paletteMode: 0,
-            horizontalOffset: 0,
-            leftBlank: 0,
-            disabled: false,
-            attributeMode: 0,
-            attributeText: 0,
-        },
-        crtc: { curReg: 0 },
-        teletext: {
-            prevCol: 0,
-            col: 7,
-            bg: 0,
-            sep: false,
-            dbl: false,
-            oldDbl: false,
-            secondHalfOfDouble: false,
-            wasDbl: false,
-            gfx: false,
-            flash: false,
-            flashOn: false,
-            flashTime: 0,
-            heldChar: 0,
-            holdChar: false,
-            dataQueue: [0, 0, 0, 0],
-            scanlineCounter: 0,
-            levelDEW: false,
-            levelDISPTMG: false,
-            levelRA0: false,
-            nextGlyphs: "normal",
-            curGlyphs: "normal",
-            heldGlyphs: "normal",
-        },
-    };
-}
-
-const DefaultAcia = {
-    sr: 0x02,
-    cr: 0x00,
-    dr: 0x00,
-    rs423Selected: false,
-    motorOn: false,
-    tapeCarrierCount: 0,
-    tapeDcdLineLevel: false,
-    hadDcdHigh: false,
-    serialReceiveRate: 19200,
-    serialReceiveCyclesPerByte: 0,
-    txCompleteTaskOffset: null,
-    runTapeTaskOffset: null,
-    runRs423TaskOffset: null,
-};
-
-const DefaultAdc = { status: 0x40, low: 0x00, high: 0x00, taskOffset: null };
-
-function buildSnapshot(modelName, cpuState, ram, roms, sysvia, uservia, video, soundChip) {
-    return {
-        format: "jsbeeb-snapshot",
-        version: 1,
-        model: modelName,
-        timestamp: new Date().toISOString(),
-        importedFrom: "b-em",
-        state: {
-            a: cpuState.a,
-            x: cpuState.x,
-            y: cpuState.y,
-            s: cpuState.s,
-            pc: cpuState.pc,
-            p: cpuState.flags | 0x30,
-            nmiLevel: !!cpuState.nmi,
-            nmiEdge: false,
-            halted: false,
-            takeInt: false,
-            romsel: cpuState.fe30 ?? 0,
-            acccon: cpuState.fe34 ?? 0,
-            videoDisplayPage: 0,
-            currentCycles: 0,
-            targetCycles: 0,
-            cycleSeconds: 0,
-            peripheralCycles: 0,
-            videoCycles: 0,
-            music5000PageSel: 0,
-            ram,
-            roms,
-            scheduler: { epoch: 0 },
-            sysvia,
-            uservia,
-            video,
-            soundChip,
-            acia: { ...DefaultAcia },
-            adc: { ...DefaultAdc },
-        },
-    };
-}
-
 // ── V1 parser (BEMSNAP1, fixed struct) ──────────────────────────────
 
 function parseBemV1(buffer) {
@@ -401,6 +221,7 @@ function parseBemV1(buffer) {
     const snShift = view.getUint16(soundOff + 53, true);
 
     return buildSnapshot(
+        "b-em",
         "B",
         cpuState,
         ram,
@@ -434,39 +255,6 @@ function readString(data, pos) {
     return str;
 }
 
-async function inflateRaw(compressedData) {
-    // Use DecompressionStream (available in modern browsers and Node 18+)
-    if (typeof DecompressionStream !== "undefined") {
-        const ds = new DecompressionStream("deflate");
-        const writer = ds.writable.getWriter();
-        const reader = ds.readable.getReader();
-        const chunks = [];
-
-        // Start reading before writing to avoid backpressure deadlock
-        const readPromise = (async () => {
-            for (;;) {
-                const { done, value } = await reader.read();
-                if (done) break;
-                chunks.push(value);
-            }
-        })();
-
-        await writer.write(compressedData);
-        await writer.close();
-        await readPromise;
-
-        const totalLength = chunks.reduce((sum, c) => sum + c.length, 0);
-        const result = new Uint8Array(totalLength);
-        let offset = 0;
-        for (const chunk of chunks) {
-            result.set(chunk, offset);
-            offset += chunk.length;
-        }
-        return result;
-    }
-    throw new Error("Zlib decompression not available (need DecompressionStream API)");
-}
-
 function parseBemV3(buffer) {
     const bytes = new Uint8Array(buffer);
     let offset = 8; // Skip "BEMSNAP3" signature
@@ -523,7 +311,7 @@ function parseBemV3(buffer) {
     if (memSection) {
         // Memory is zlib-compressed; decompression is async.
         // Decompressed layout: 2 bytes (fe30, fe34) + 64KB RAM + 256KB ROM
-        return inflateRaw(memSection.data).then((memData) => {
+        return decompress(memSection.data, "deflate").then((memData) => {
             cpuState.fe30 = memData[0];
             cpuState.fe34 = memData[1];
             const ramStart = 2;
@@ -669,6 +457,7 @@ function finishV3Parse(modelName, cpuState, ram, roms, sections) {
     }
 
     return buildSnapshot(
+        "b-em",
         modelName,
         cpuState,
         ram,

package/src/config.js

@@ -1,10 +1,8 @@
 "use strict";
-import $ from "jquery";
-import EventEmitter from "event-emitter-es6";
-import { findModel } from "./models.js";
+import { allModels, findModel } from "./models.js";
 import { getFilterForMode } from "./canvas.js";
 
-export class Config extends EventEmitter {
+export class Config extends EventTarget {
     constructor(onChange, onClose) {
         super();
         this.onChange = onChange;
@@ -12,8 +10,8 @@ export class Config extends EventEmitter {
         this.changed = {};
         this.model = null;
         this.coProcessor = null;
-        const $configuration = document.getElementById("configuration");
-        $configuration.addEventListener("show.bs.modal", () => {
+        const configuration = document.getElementById("configuration");
+        configuration.addEventListener("show.bs.modal", () => {
             this.changed = {};
             this.setDropdownText(this.model.name);
             this.set65c02(this.model.tube);
@@ -23,116 +21,134 @@ export class Config extends EventEmitter {
             this.setEconet(this.model.hasEconet);
         });
 
-        $configuration.addEventListener("hide.bs.modal", () => {
+        configuration.addEventListener("hide.bs.modal", () => {
             this.onClose(this.changed);
             if (Object.keys(this.changed).length > 0) {
-                this.emit("settings-changed", this.changed);
+                this.dispatchEvent(new CustomEvent("settings-changed", { detail: this.changed }));
             }
         });
 
-        $(".model-menu a").on("click", (e) => {
-            this.changed.model = $(e.target).attr("data-target");
-            this.setDropdownText($(e.target).text());
+        const modelMenu = document.querySelector(".model-menu");
+        for (const model of allModels) {
+            if (model.synonyms.length === 0) continue; // skip non-selectable models (e.g. Tube65C02)
+            const li = document.createElement("li");
+            const a = document.createElement("a");
+            a.href = "#";
+            a.className = "dropdown-item";
+            a.dataset.target = model.synonyms[0];
+            a.textContent = model.name;
+            li.appendChild(a);
+            modelMenu.appendChild(li);
+        }
+        modelMenu.addEventListener("click", (e) => {
+            const link = e.target.closest("a[data-target]");
+            if (!link) return;
+            this.changed.model = link.dataset.target;
+            this.setDropdownText(link.textContent);
         });
 
-        $("#65c02").on("click", () => {
-            this.changed.coProcessor = $("#65c02").prop("checked");
-            $("#tubeCpuMultiplier").prop("disabled", !$("#65c02").prop("checked"));
+        document.getElementById("65c02").addEventListener("click", () => {
+            this.changed.coProcessor = document.getElementById("65c02").checked;
+            document.getElementById("tubeCpuMultiplier").disabled = !document.getElementById("65c02").checked;
         });
 
-        $("#tubeCpuMultiplier").on("input", () => {
-            const val = parseInt($("#tubeCpuMultiplier").val(), 10);
-            $("#tubeCpuMultiplierValue").text(val);
+        document.getElementById("tubeCpuMultiplier").addEventListener("input", () => {
+            const val = parseInt(document.getElementById("tubeCpuMultiplier").value, 10);
+            document.getElementById("tubeCpuMultiplierValue").textContent = val;
             this.changed.tubeCpuMultiplier = val;
         });
 
-        $("#hasTeletextAdaptor").on("click", () => {
-            this.changed.hasTeletextAdaptor = $("#hasTeletextAdaptor").prop("checked");
+        document.getElementById("hasTeletextAdaptor").addEventListener("click", () => {
+            this.changed.hasTeletextAdaptor = document.getElementById("hasTeletextAdaptor").checked;
         });
 
-        $("#hasEconet").on("click", () => {
-            this.changed.hasEconet = $("#hasEconet").prop("checked");
+        document.getElementById("hasEconet").addEventListener("click", () => {
+            this.changed.hasEconet = document.getElementById("hasEconet").checked;
         });
 
-        $("#hasMusic5000").on("click", () => {
-            this.changed.hasMusic5000 = $("#hasMusic5000").prop("checked");
+        document.getElementById("hasMusic5000").addEventListener("click", () => {
+            this.changed.hasMusic5000 = document.getElementById("hasMusic5000").checked;
         });
 
-        $(".keyboard-menu a").on("click", (e) => {
-            const keyLayout = $(e.target).attr("data-target");
-            this.changed.keyLayout = keyLayout;
-            this.setKeyLayout(keyLayout);
-        });
+        for (const link of document.querySelectorAll(".keyboard-menu a")) {
+            link.addEventListener("click", (e) => {
+                const keyLayout = e.target.dataset.target;
+                this.changed.keyLayout = keyLayout;
+                this.setKeyLayout(keyLayout);
+            });
+        }
 
-        $(".mic-channel-option").on("click", (e) => {
-            const channelString = $(e.target).data("channel");
-            const channel = channelString === "" ? undefined : parseInt($(e.target).data("channel"), 10);
-            this.changed.microphoneChannel = channel;
-            this.setMicrophoneChannel(channel);
-        });
+        for (const option of document.querySelectorAll(".mic-channel-option")) {
+            option.addEventListener("click", (e) => {
+                const channelString = e.target.dataset.channel;
+                const channel = channelString === "" ? undefined : parseInt(channelString, 10);
+                this.changed.microphoneChannel = channel;
+                this.setMicrophoneChannel(channel);
+            });
+        }
 
-        $("#mouseJoystickEnabled").on("click", () => {
-            this.changed.mouseJoystickEnabled = $("#mouseJoystickEnabled").prop("checked");
+        document.getElementById("mouseJoystickEnabled").addEventListener("click", () => {
+            this.changed.mouseJoystickEnabled = document.getElementById("mouseJoystickEnabled").checked;
         });
 
-        $("#speechOutput").on("click", () => {
-            this.changed.speechOutput = $("#speechOutput").prop("checked");
+        document.getElementById("speechOutput").addEventListener("click", () => {
+            this.changed.speechOutput = document.getElementById("speechOutput").checked;
         });
 
-        $(".display-mode-option").on("click", (e) => {
-            const mode = $(e.target).data("mode");
-            this.changed.displayMode = mode;
-            this.setDisplayMode(mode);
-            this.onChange({ displayMode: mode });
-        });
+        for (const option of document.querySelectorAll(".display-mode-option")) {
+            option.addEventListener("click", (e) => {
+                const mode = e.target.dataset.mode;
+                this.changed.displayMode = mode;
+                this.setDisplayMode(mode);
+                this.onChange({ displayMode: mode });
+            });
+        }
     }
 
     setMicrophoneChannel(channel) {
-        if (channel !== undefined) {
-            $(".mic-channel-text").text(`Channel ${channel}`);
-        } else {
-            $(".mic-channel-text").text("Disabled");
-        }
+        const text = channel !== undefined ? `Channel ${channel}` : "Disabled";
+        for (const el of document.querySelectorAll(".mic-channel-text")) el.textContent = text;
     }
 
     setMouseJoystickEnabled(enabled) {
-        $("#mouseJoystickEnabled").prop("checked", !!enabled);
+        document.getElementById("mouseJoystickEnabled").checked = !!enabled;
     }
 
     setSpeechOutput(enabled) {
-        $("#speechOutput").prop("checked", !!enabled);
+        document.getElementById("speechOutput").checked = !!enabled;
     }
 
     setDisplayMode(mode) {
         const config = getFilterForMode(mode).getDisplayConfig();
-        $(".display-mode-text").text(config.name);
+        for (const el of document.querySelectorAll(".display-mode-text")) el.textContent = config.name;
     }
 
     setModel(modelName) {
         this.model = findModel(modelName);
-        $(".bbc-model").text(this.model.name);
+        for (const el of document.querySelectorAll(".bbc-model")) el.textContent = this.model.name;
     }
 
     setKeyLayout(keyLayout) {
-        $(".keyboard-layout").text(keyLayout[0].toUpperCase() + keyLayout.substring(1));
+        const text = keyLayout[0].toUpperCase() + keyLayout.substring(1);
+        for (const el of document.querySelectorAll(".keyboard-layout")) el.textContent = text;
     }
 
     set65c02(enabled) {
         enabled = !!enabled;
-        $("#65c02").prop("checked", enabled);
+        document.getElementById("65c02").checked = enabled;
         this.model.tube = enabled ? findModel("Tube65c02") : null;
-        $("#tubeCpuMultiplier").prop("disabled", !enabled);
+        document.getElementById("tubeCpuMultiplier").disabled = !enabled;
     }
 
     setTubeCpuMultiplier(value) {
         this.tubeCpuMultiplier = value;
-        $("#tubeCpuMultiplier").val(value);
-        $("#tubeCpuMultiplierValue").text(value);
+        document.getElementById("tubeCpuMultiplier").value = value;
+        document.getElementById("tubeCpuMultiplierValue").textContent = value;
     }
 
     setEconet(enabled) {
         enabled = !!enabled;
-        $("#hasEconet").prop("checked", enabled);
+        document.getElementById("hasEconet").checked = enabled;
         this.model.hasEconet = enabled;
 
         if (enabled && this.model.isMaster) {
@@ -142,20 +158,21 @@ export class Config extends EventEmitter {
 
     setMusic5000(enabled) {
         enabled = !!enabled;
-        $("#hasMusic5000").prop("checked", enabled);
+        document.getElementById("hasMusic5000").checked = enabled;
         this.model.hasMusic5000 = enabled;
         this.addRemoveROM("ample.rom", enabled);
     }
 
     setTeletext(enabled) {
         enabled = !!enabled;
-        $("#hasTeletextAdaptor").prop("checked", enabled);
+        document.getElementById("hasTeletextAdaptor").checked = enabled;
         this.model.hasTeletextAdaptor = enabled;
         this.addRemoveROM("ats-3.0.rom", enabled);
     }
 
     setDropdownText(modelName) {
-        $("#bbc-model-dropdown .bbc-model").text(modelName);
+        const el = document.querySelector("#bbc-model-dropdown .bbc-model");
+        if (el) el.textContent = modelName;
     }
 
     addRemoveROM(romName, required) {

package/src/dom-utils.js

@@ -0,0 +1,32 @@
+"use strict";
+
+// Minimal DOM helpers to replace jQuery usage.
+
+export function show(el) {
+    el.style.display = "";
+}
+
+export function hide(el) {
+    el.style.display = "none";
+}
+
+export function toggle(el, visible) {
+    el.style.display = visible ? "" : "none";
+}
+
+export function fadeIn(el, duration = 400) {
+    el.style.display = "";
+    el.style.transition = `opacity ${duration}ms`;
+    el.style.opacity = "0";
+    // Force reflow so the transition triggers.
+    void el.offsetHeight;
+    el.style.opacity = "1";
+}
+
+export function fadeOut(el, duration = 400) {
+    el.style.transition = `opacity ${duration}ms`;
+    el.style.opacity = "0";
+    setTimeout(() => {
+        if (el.style.opacity === "0") el.style.display = "none";
+    }, duration);
+}