diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 0000000..24e4ee5
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,30 @@
+name: Test
+
+on:
+  pull_request:
+    branches:
+      - main
+  push:
+    branches:
+      - main
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run unit tests
+        run: npm test
diff --git a/README.md b/README.md
index 1451b9b..72035d7 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # KeyBpmMap
 
+![Tests](https://github.com/samsta/KeyBpmMap/actions/workflows/test.yml/badge.svg)
+
 KeyBpmMap is a client-only React application for exploring the harmonic and tempo shape of a DJ music library.
 It reads local Engine DJ SQLite databases and Traktor `collection.nml` files directly in the browser, normalizes supported key formats into Camelot notation, and renders both a polar density map and a BPM-vs-key heatmap for fast library analysis.
 
diff --git a/package-lock.json b/package-lock.json
index d243f0e..6b73538 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "keybpmmap",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "keybpmmap",
-      "version": "0.3.0",
+      "version": "0.4.0",
       "dependencies": {
         "d3": "^7.9.0",
         "fast-xml-parser": "^5.8.0",
@@ -29,7 +29,8 @@
         "globals": "^17.6.0",
         "typescript": "~6.0.2",
         "typescript-eslint": "^8.59.2",
-        "vite": "^8.0.12"
+        "vite": "^8.0.12",
+        "vitest": "^4.1.7"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -855,6 +856,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -866,6 +874,17 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@types/chai": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@types/chai/-/chai-5.2.3.tgz",
+      "integrity": "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/deep-eql": "*",
+        "assertion-error": "^2.0.1"
+      }
+    },
     "node_modules/@types/d3": {
       "version": "7.4.3",
       "resolved": "https://registry.npmjs.org/@types/d3/-/d3-7.4.3.tgz",
@@ -1150,6 +1169,13 @@
         "@types/d3-selection": "*"
       }
     },
+    "node_modules/@types/deep-eql": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/deep-eql/-/deep-eql-4.0.2.tgz",
+      "integrity": "sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/emscripten": {
       "version": "1.41.5",
       "resolved": "https://registry.npmjs.org/@types/emscripten/-/emscripten-1.41.5.tgz",
@@ -1495,6 +1521,119 @@
         }
       }
     },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.7.tgz",
+      "integrity": "sha512-1R+tw0ortHEbZDGMymm+pN7/AFQ/RkFFdtd7EN+VBpynKmLbP8A3rpEXdshBJ7+8hQ9zBJh/i1s0yKNtxAnU7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.7.tgz",
+      "integrity": "sha512-vY7nuamKgfvpA1Koa3oYIw/k7D6kZnpGyNMZW8loow2bsBYla1TFdqTaXncWdRn4pgwNs+90RhnXhJScDwQeJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.7",
+        "estree-walker": "^3.0.3",
+        "magic-string": "^0.30.21"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "msw": "^2.4.9",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "msw": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@vitest/pretty-format": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.7.tgz",
+      "integrity": "sha512-umgCarTOYQWIaDMvGDRZij+6b9oVeLIyJzfN+AS88e0ZOU3QTgNNSTtjQOpcvWr3np1N0j4WgZj+sb3oYBDscw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.7.tgz",
+      "integrity": "sha512-BapjmAQ2aI78WdMEfeUWivnfVzB+VPGwWRQcJE0OUq7qEeEcBsCSf+0T5iREBNE5nBb4wA5Ya0W6IA+sghdEFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.7",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.7.tgz",
+      "integrity": "sha512-ZacLzja+TmJeZ1h14xW2FB/WpeimUD3haBXQPyJqxvo8jQTmfeA8zv58mtjN2C7EHXZDYVcVYdYmAxjkWVvKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.7.tgz",
+      "integrity": "sha512-kbkI5LMWakyuTIvs6fUJ5qdIVb1XVKsYJAT4OJ938cHMROYMSfmoQdZy0aaAnjbbc8F61vkoTqz/Az+/HiIu5Q==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.7.tgz",
+      "integrity": "sha512-T532WBu791cBxJlCl6SO+J14l81DQx6uQHm1bQbmCDY7nqlEIgkza/UFnSBNaUtSf41unldDFjdOBYEQC4b5Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.7",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -1535,6 +1674,16 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/assertion-error": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-2.0.1.tgz",
+      "integrity": "sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
@@ -1626,6 +1775,16 @@
       ],
       "license": "CC-BY-4.0"
     },
+    "node_modules/chai": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-6.2.2.tgz",
+      "integrity": "sha512-NUPRluOfOiTKBKvWPtSD4PhFvWCqOi0BGStNWs57X9js7XGTprSmFoz5F0tWhR4WPjNeR9jXqdC7/UpSJTnlRg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -2116,6 +2275,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/es-module-lexer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.1.0.tgz",
+      "integrity": "sha512-n27zTYMjYu1aj4MjCWzSP7G9r75utsaoc8m61weK+W8JMBGGQybd43GstCXZ3WNmSFtGT9wi59qQTW6mhTR5LQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/escalade": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
@@ -2311,6 +2477,16 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
+      "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -2321,6 +2497,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expect-type": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/expect-type/-/expect-type-1.3.0.tgz",
+      "integrity": "sha512-knvyeauYhqjOYvQ66MznSMs83wmHrCycNEN6Ao+2AeYEfxUIkuiVxdEa1qlGEPK+We3n0THiDciYSsCcgW/DoA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2953,6 +3139,16 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
     "node_modules/minimatch": {
       "version": "10.2.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.5.tgz",
@@ -3009,6 +3205,17 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/obug": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/obug/-/obug-2.1.1.tgz",
+      "integrity": "sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==",
+      "dev": true,
+      "funding": [
+        "https://github.com/sponsors/sxzz",
+        "https://opencollective.com/debug"
+      ],
+      "license": "MIT"
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3094,6 +3301,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/pathe": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-2.0.3.tgz",
+      "integrity": "sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -3275,6 +3489,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/siginfo": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/siginfo/-/siginfo-2.0.0.tgz",
+      "integrity": "sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3291,6 +3512,20 @@
       "integrity": "sha512-gcj8zBWU5cFsi9WUP+4bFNXAyF1iRpA3LLyS/DP5xlrNzGmPIizUeBggKa8DbDwdqaKwUcTEnChtd2grWo/x/A==",
       "license": "MIT"
     },
+    "node_modules/stackback": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/stackback/-/stackback-0.0.2.tgz",
+      "integrity": "sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/std-env": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/std-env/-/std-env-4.1.0.tgz",
+      "integrity": "sha512-Rq7ybcX2RuC55r9oaPVEW7/xu3tj8u4GeBYHBWCychFtzMIr86A7e3PPEBPT37sHStKX3+TiX/Fr/ACmJLVlLQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/strnum": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/strnum/-/strnum-2.3.0.tgz",
@@ -3303,6 +3538,23 @@
       ],
       "license": "MIT"
     },
+    "node_modules/tinybench": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",
+      "integrity": "sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tinyexec": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.2.tgz",
+      "integrity": "sha512-dAqSqE/RabpBKI8+h26GfLq6Vb3JVXs30XYQjdMjaj/c2tS8IYYMbIzP599KtRj7c57/wYApb3QjgRgXmrCukA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.16",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
@@ -3320,6 +3572,16 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
+    "node_modules/tinyrainbow": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tinyrainbow/-/tinyrainbow-3.1.0.tgz",
+      "integrity": "sha512-Bf+ILmBgretUrdJxzXM0SgXLZ3XfiaUuOj/IKQHuTXip+05Xn+uyEYdVg0kYDipTBcLrCVyUzAPz7QmArb0mmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/ts-api-utils": {
       "version": "2.5.0",
       "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.5.0.tgz",
@@ -3518,6 +3780,96 @@
         }
       }
     },
+    "node_modules/vitest": {
+      "version": "4.1.7",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.7.tgz",
+      "integrity": "sha512-flYyaFd2CgoCoU+0UKt3pxksgC+S02iTDN0n3LtqaMeXsI9SBcdNujc2k0DeFLzUn/0k538yNjOSdwgCqcrwJA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.7",
+        "@vitest/mocker": "4.1.7",
+        "@vitest/pretty-format": "4.1.7",
+        "@vitest/runner": "4.1.7",
+        "@vitest/snapshot": "4.1.7",
+        "@vitest/spy": "4.1.7",
+        "@vitest/utils": "4.1.7",
+        "es-module-lexer": "^2.0.0",
+        "expect-type": "^1.3.0",
+        "magic-string": "^0.30.21",
+        "obug": "^2.1.1",
+        "pathe": "^2.0.3",
+        "picomatch": "^4.0.3",
+        "std-env": "^4.0.0-rc.1",
+        "tinybench": "^2.9.0",
+        "tinyexec": "^1.0.2",
+        "tinyglobby": "^0.2.15",
+        "tinyrainbow": "^3.1.0",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0",
+        "why-is-node-running": "^2.3.0"
+      },
+      "bin": {
+        "vitest": "vitest.mjs"
+      },
+      "engines": {
+        "node": "^20.0.0 || ^22.0.0 || >=24.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      },
+      "peerDependencies": {
+        "@edge-runtime/vm": "*",
+        "@opentelemetry/api": "^1.9.0",
+        "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
+        "@vitest/browser-playwright": "4.1.7",
+        "@vitest/browser-preview": "4.1.7",
+        "@vitest/browser-webdriverio": "4.1.7",
+        "@vitest/coverage-istanbul": "4.1.7",
+        "@vitest/coverage-v8": "4.1.7",
+        "@vitest/ui": "4.1.7",
+        "happy-dom": "*",
+        "jsdom": "*",
+        "vite": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@edge-runtime/vm": {
+          "optional": true
+        },
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@types/node": {
+          "optional": true
+        },
+        "@vitest/browser-playwright": {
+          "optional": true
+        },
+        "@vitest/browser-preview": {
+          "optional": true
+        },
+        "@vitest/browser-webdriverio": {
+          "optional": true
+        },
+        "@vitest/coverage-istanbul": {
+          "optional": true
+        },
+        "@vitest/coverage-v8": {
+          "optional": true
+        },
+        "@vitest/ui": {
+          "optional": true
+        },
+        "happy-dom": {
+          "optional": true
+        },
+        "jsdom": {
+          "optional": true
+        },
+        "vite": {
+          "optional": false
+        }
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3534,6 +3886,23 @@
         "node": ">= 8"
       }
     },
+    "node_modules/why-is-node-running": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",
+      "integrity": "sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "siginfo": "^2.0.0",
+        "stackback": "0.0.2"
+      },
+      "bin": {
+        "why-is-node-running": "cli.js"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
diff --git a/package.json b/package.json
index 05c16e2..747d0b4 100644
--- a/package.json
+++ b/package.json
@@ -1,13 +1,14 @@
 {
   "name": "keybpmmap",
   "private": true,
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run"
   },
   "dependencies": {
     "d3": "^7.9.0",
@@ -31,6 +32,7 @@
     "globals": "^17.6.0",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12"
+    "vite": "^8.0.12",
+    "vitest": "^4.1.7"
   }
 }
diff --git a/src/App.css b/src/App.css
index 87de97c..7be3506 100644
--- a/src/App.css
+++ b/src/App.css
@@ -178,6 +178,12 @@ select {
   padding: 24px;
 }
 
+.insight-panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
 .chart-header {
   display: flex;
   align-items: flex-start;
@@ -334,7 +340,8 @@ select {
 
 .sparse-list {
   gap: 8px;
-  max-height: 24rem;
+  flex: 1;
+  min-height: 0;
   overflow: auto;
   padding-right: 6px;
 }
diff --git a/src/App.tsx b/src/App.tsx
index 298eb68..4616997 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState, type ChangeEvent } from 'react'
+import { useEffect, useMemo, useRef, useState, type ChangeEvent } from 'react'
 import './App.css'
 import HeatmapChart from './components/HeatmapChart'
 import PolarDensityChart from './components/PolarDensityChart'
@@ -12,7 +12,7 @@ import {
   MIN_BPM_BAND_SIZE,
   summarizeTracks,
 } from './lib/analysis'
-import { CAMELOT_KEYS } from './lib/camelot'
+import { CAMELOT_KEYS, formatKey, type KeyRepresentation } from './lib/camelot'
 import { downloadSvgAsPng } from './lib/exportSvg'
 import { loadLibraryFromFile } from './lib/libraryLoader'
 import { createMockLibrary } from './lib/mockData'
@@ -42,6 +42,8 @@ interface OpenFilePickerConfig {
 
 type PolarKeyMode = 'both' | 'A' | 'B'
 const POLAR_KEY_MODES = ['both', 'A', 'B'] as const
+const KEY_REPRESENTATIONS = ['camelot', 'open-key', 'musical'] as const
+const KEY_REPRESENTATION_STORAGE_KEY = 'keybpmmap.keyRepresentation'
 const APP_VERSION = __APP_VERSION__
 
 function App() {
@@ -52,10 +54,21 @@ function App() {
   const [loading, setLoading] = useState(false)
   const [bpmBandSize, setBpmBandSize] = useState(DEFAULT_BPM_BAND_SIZE)
   const [polarKeyMode, setPolarKeyMode] = useState<PolarKeyMode>('both')
+  const [keyRepresentation, setKeyRepresentation] = useState<KeyRepresentation>(
+    getInitialKeyRepresentation,
+  )
   const fileInputRef = useRef<HTMLInputElement>(null)
   const polarRef = useRef<SVGSVGElement>(null)
   const heatmapRef = useRef<SVGSVGElement>(null)
 
+  useEffect(() => {
+    try {
+      window.localStorage.setItem(KEY_REPRESENTATION_STORAGE_KEY, keyRepresentation)
+    } catch {
+      // Ignore localStorage persistence errors.
+    }
+  }, [keyRepresentation])
+
   const playlistLookup = useMemo(
     () => new Map(library.playlists.map((playlist) => [playlist.id, playlist])),
     [library.playlists],
@@ -77,7 +90,7 @@ function App() {
       }
 
       if (query) {
-        const haystack = `${track.artist} ${track.title} ${track.camelotKey}`.toLowerCase()
+        const haystack = `${track.artist} ${track.title} ${track.camelotKey} ${formatKey(track.camelotKey, keyRepresentation)}`.toLowerCase()
         if (!haystack.includes(query)) {
           return false
         }
@@ -97,7 +110,7 @@ function App() {
 
       return true
     })
-  }, [filters, library.tracks, playlistLookup])
+  }, [filters, keyRepresentation, library.tracks, playlistLookup])
 
   const bpmBands = useMemo(
     () => createBpmBands(filteredTracks, bpmBandSize),
@@ -125,6 +138,10 @@ function App() {
   )
   const summary = useMemo(() => summarizeTracks(filteredTracks), [filteredTracks])
   const sparseCells = useMemo(() => findSparseCells(densityCells, bpmBands), [bpmBands, densityCells])
+  const formatVisibleKey = useMemo(
+    () => (camelotKey: string) => formatKey(camelotKey, keyRepresentation),
+    [keyRepresentation],
+  )
 
   const handleLoadMockData = () => {
     setLibrary(createMockLibrary())
@@ -338,6 +355,20 @@ function App() {
 
       <section className="panel filters-panel">
         <div className="field-grid">
+          <label>
+            Key display
+            <select
+              value={keyRepresentation}
+              onChange={(event) => setKeyRepresentation(asKeyRepresentation(event.target.value))}
+            >
+              {KEY_REPRESENTATIONS.map((representation) => (
+                <option key={representation} value={representation}>
+                  {formatKeyRepresentationLabel(representation)}
+                </option>
+              ))}
+            </select>
+          </label>
+
           <label>
             Playlist
             <select
@@ -465,9 +496,10 @@ function App() {
             <div>
               <h2>Polar harmonic density map</h2>
               <p>
-                Camelot {formatKeyModeDescription(polarKeyMode)} wedges outside-in by {bpmBandSize}{' '}
-                BPM ring.
+                {formatKeyModeDescription(polarKeyMode, keyRepresentation)} wedges outside-in by{' '}
+                {bpmBandSize} BPM ring.
               </p>
+              <p>Showing {formatKeyRepresentationLabel(keyRepresentation).toLowerCase()} labels.</p>
             </div>
             <div className="chart-actions">
               <div className="segmented-control" role="group" aria-label="Polar key family">
@@ -478,7 +510,7 @@ function App() {
                     className={mode === polarKeyMode ? 'segment-button is-active' : 'segment-button'}
                     onClick={() => handleChangeKeyMode(mode)}
                   >
-                    {formatKeyModeButtonLabel(mode)}
+                    {formatKeyModeButtonLabel(mode, keyRepresentation)}
                   </button>
                 ))}
               </div>
@@ -496,6 +528,7 @@ function App() {
             bands={bpmBands}
             cells={visibleKeyCells}
             keys={polarKeys}
+            formatKeyLabel={formatVisibleKey}
             selectedCellId={selectedCellId}
             onSelect={setSelectedCellId}
           />
@@ -506,9 +539,10 @@ function App() {
             <div>
               <h2>BPM versus key heatmap</h2>
               <p>
-                Quick comparison of dense and empty harmonic/tempo cells for Camelot{' '}
-                {formatKeyModeDescription(polarKeyMode)} keys.
+                Quick comparison of dense and empty harmonic/tempo cells for{' '}
+                {formatKeyModeDescription(polarKeyMode, keyRepresentation)} keys.
               </p>
+              <p>Showing {formatKeyRepresentationLabel(keyRepresentation).toLowerCase()} labels.</p>
             </div>
             <div className="chart-actions">
               <div className="segmented-control" role="group" aria-label="Heatmap key family">
@@ -519,7 +553,7 @@ function App() {
                     className={mode === polarKeyMode ? 'segment-button is-active' : 'segment-button'}
                     onClick={() => handleChangeKeyMode(mode)}
                   >
-                    {formatKeyModeButtonLabel(mode)}
+                    {formatKeyModeButtonLabel(mode, keyRepresentation)}
                   </button>
                 ))}
               </div>
@@ -537,6 +571,7 @@ function App() {
             bands={bpmBands}
             cells={visibleKeyCells}
             keys={polarKeys}
+            formatKeyLabel={formatVisibleKey}
             selectedCellId={selectedCellId}
             onSelect={setSelectedCellId}
           />
@@ -549,7 +584,7 @@ function App() {
           {selectedCell ? (
             <>
               <p className="insight-subtitle">
-                {selectedCell.camelotKey} · {selectedCell.bandLabel} · {selectedCell.count} track
+                {formatVisibleKey(selectedCell.camelotKey)} · {selectedCell.bandLabel} · {selectedCell.count} track
                 {selectedCell.count === 1 ? '' : 's'}
               </p>
               <ul className="track-list">
@@ -562,7 +597,7 @@ function App() {
                       </div>
                       <div className="track-meta">
                         <span>{track.bpm ? `${track.bpm.toFixed(1)} BPM` : 'No BPM'}</span>
-                        <span>{track.camelotKey}</span>
+                        <span>{formatVisibleKey(track.camelotKey)}</span>
                         <span>{formatRating(track)}</span>
                       </div>
                     </li>
@@ -592,14 +627,14 @@ function App() {
                   <li key={`${cell.firstCellId}:${cell.id}`}>
                     {cell.cellCount === 1 ? (
                       <button type="button" onClick={() => setSelectedCellId(cell.firstCellId)}>
-                        <strong>{cell.camelotKey}</strong>
+                        <strong>{formatVisibleKey(cell.camelotKey)}</strong>
                         <span>{cell.bandLabel}</span>
                         <em>{status}</em>
                         <small>{regionSummary}</small>
                       </button>
                     ) : (
                       <div className="sparse-summary">
-                        <strong>{cell.camelotKey}</strong>
+                        <strong>{formatVisibleKey(cell.camelotKey)}</strong>
                         <span>{cell.bandLabel}</span>
                         <em>{status}</em>
                         <small>{regionSummary}</small>
@@ -652,12 +687,78 @@ function getSparseCellStatus(cell: SparseCellSummary): string {
   return cell.cellCount === 1 ? '1 track' : '1 track each'
 }
 
-function formatKeyModeButtonLabel(mode: PolarKeyMode): string {
-  return mode === 'both' ? 'A + B' : `${mode} only`
+function formatKeyModeButtonLabel(mode: PolarKeyMode, representation: KeyRepresentation): string {
+  const minorLabel = getRepresentationMinorLabel(representation)
+  const majorLabel = getRepresentationMajorLabel(representation)
+  if (mode === 'both') {
+    return `${minorLabel} + ${majorLabel}`
+  }
+
+  return mode === 'A' ? `${minorLabel} only` : `${majorLabel} only`
 }
 
-function formatKeyModeDescription(mode: PolarKeyMode): string {
-  return mode === 'both' ? 'A/B-side' : `${mode}-side`
+function formatKeyModeDescription(mode: PolarKeyMode, representation: KeyRepresentation): string {
+  const minorLabel = getRepresentationMinorLabel(representation)
+  const majorLabel = getRepresentationMajorLabel(representation)
+  if (mode === 'both') {
+    return `${minorLabel}/${majorLabel}`
+  }
+
+  return mode === 'A' ? `${minorLabel}` : `${majorLabel}`
+}
+
+function getRepresentationMinorLabel(representation: KeyRepresentation): string {
+  switch (representation) {
+    case 'open-key':
+      return 'm'
+    case 'musical':
+      return 'min'
+    case 'camelot':
+    default:
+      return 'A'
+  }
+}
+
+function getRepresentationMajorLabel(representation: KeyRepresentation): string {
+  switch (representation) {
+    case 'open-key':
+      return 'd'
+    case 'musical':
+      return 'maj'
+    case 'camelot':
+    default:
+      return 'B'
+  }
+}
+
+function formatKeyRepresentationLabel(representation: KeyRepresentation): string {
+  switch (representation) {
+    case 'open-key':
+      return 'Open Key'
+    case 'musical':
+      return 'Musical'
+    case 'camelot':
+    default:
+      return 'Camelot'
+  }
+}
+
+function asKeyRepresentation(value: string): KeyRepresentation {
+  return KEY_REPRESENTATIONS.includes(value as KeyRepresentation)
+    ? (value as KeyRepresentation)
+    : 'camelot'
+}
+
+function getInitialKeyRepresentation(): KeyRepresentation {
+  if (typeof window === 'undefined') {
+    return 'camelot'
+  }
+
+  try {
+    return asKeyRepresentation(window.localStorage.getItem(KEY_REPRESENTATION_STORAGE_KEY) ?? '')
+  } catch {
+    return 'camelot'
+  }
 }
 
 export default App
diff --git a/src/components/HeatmapChart.tsx b/src/components/HeatmapChart.tsx
index cb94cbe..2d8f870 100644
--- a/src/components/HeatmapChart.tsx
+++ b/src/components/HeatmapChart.tsx
@@ -7,6 +7,7 @@ interface HeatmapChartProps {
   bands: BpmBand[]
   cells: DensityCell[]
   keys: string[]
+  formatKeyLabel: (camelotKey: string) => string
   selectedCellId: string | null
   onSelect: (cellId: string) => void
 }
@@ -17,7 +18,7 @@ const BAND_HEIGHT_PX = 18
 const MIN_HEIGHT_PX = 420
 
 const HeatmapChart = forwardRef<SVGSVGElement, HeatmapChartProps>(
-  ({ bands, cells, keys, selectedCellId, onSelect }, ref) => {
+  ({ bands, cells, keys, formatKeyLabel, selectedCellId, onSelect }, ref) => {
     const maximum = Math.max(1, ...cells.map((cell) => cell.count))
     const height = Math.max(
       MIN_HEIGHT_PX,
@@ -73,7 +74,7 @@ const HeatmapChart = forwardRef<SVGSVGElement, HeatmapChartProps>(
               className="chart-region"
               onClick={() => onSelect(cell.id)}
             >
-              <title>{`${cell.camelotKey} / ${cell.bandLabel}: ${cell.count} track${cell.count === 1 ? '' : 's'}\n${cell.tracks
+              <title>{`${formatKeyLabel(cell.camelotKey)} / ${cell.bandLabel}: ${cell.count} track${cell.count === 1 ? '' : 's'}\n${cell.tracks
                 .slice(0, 4)
                 .map((track) => `${track.artist} — ${track.title}`)
                 .join('\n')}`}</title>
@@ -83,15 +84,19 @@ const HeatmapChart = forwardRef<SVGSVGElement, HeatmapChartProps>(
 
         {keys.map((camelotKey, index) => {
           const x = xScale(index + 0.5)
+          const label = formatKeyLabel(camelotKey)
+          const rotateLabel = label.length > 3
+          const labelY = height - margin.bottom + (rotateLabel ? 13 : 28)
           return (
             <text
               key={camelotKey}
               x={x}
-              y={height - margin.bottom + 28}
-              textAnchor="middle"
+              y={labelY}
+              textAnchor={rotateLabel ? 'beginning' : 'middle'}
               className="chart-label"
+              transform={rotateLabel ? `rotate(90 ${x} ${labelY})` : undefined}
             >
-              {camelotKey}
+              {label}
             </text>
           )
         })}
diff --git a/src/components/PolarDensityChart.tsx b/src/components/PolarDensityChart.tsx
index cc1583c..b761e55 100644
--- a/src/components/PolarDensityChart.tsx
+++ b/src/components/PolarDensityChart.tsx
@@ -7,6 +7,7 @@ interface PolarDensityChartProps {
   bands: BpmBand[]
   cells: DensityCell[]
   keys: string[]
+  formatKeyLabel: (camelotKey: string) => string
   selectedCellId: string | null
   onSelect: (cellId: string) => void
 }
@@ -26,7 +27,7 @@ const BAND_LABEL_FONT_MAX = 12.5
 const BAND_LABEL_REFERENCE_RING_HEIGHT = 18
 
 const PolarDensityChart = forwardRef<SVGSVGElement, PolarDensityChartProps>(
-  ({ bands, cells, keys, selectedCellId, onSelect }, ref) => {
+  ({ bands, cells, keys, formatKeyLabel, selectedCellId, onSelect }, ref) => {
     const maximum = Math.max(1, ...cells.map((cell) => cell.count))
     const ringSize = (outerRadius - innerRadius) / bands.length
     const bandLabelFontSize = clampValue(
@@ -97,7 +98,7 @@ const PolarDensityChart = forwardRef<SVGSVGElement, PolarDensityChartProps>(
                 className="chart-region"
                 onClick={() => onSelect(cell.id)}
               >
-                <title>{`${cell.camelotKey} / ${cell.bandLabel}: ${cell.count} track${cell.count === 1 ? '' : 's'}\n${cell.tracks
+                <title>{`${formatKeyLabel(cell.camelotKey)} / ${cell.bandLabel}: ${cell.count} track${cell.count === 1 ? '' : 's'}\n${cell.tracks
                   .slice(0, 4)
                   .map((track) => `${track.artist} — ${track.title}`)
                   .join('\n')}`}</title>
@@ -127,7 +128,7 @@ const PolarDensityChart = forwardRef<SVGSVGElement, PolarDensityChartProps>(
 
             return (
               <text key={camelotKey} x={x} y={y} textAnchor="middle" className="chart-label">
-                {camelotKey}
+                {formatKeyLabel(camelotKey)}
               </text>
             )
           })}
diff --git a/src/lib/analysis.test.ts b/src/lib/analysis.test.ts
new file mode 100644
index 0000000..e145319
--- /dev/null
+++ b/src/lib/analysis.test.ts
@@ -0,0 +1,46 @@
+import { describe, expect, it } from 'vitest'
+import { clampBpmBandSize, createBpmBands, getBpmBandIndex } from './analysis'
+import type { TrackRecord } from '../types'
+
+const tracks: TrackRecord[] = [
+  {
+    id: '1',
+    title: 'A',
+    artist: 'AA',
+    bpm: 124,
+    rating: null,
+    camelotKey: '8A',
+    rawKey: null,
+    path: '',
+    playlists: [],
+  },
+  {
+    id: '2',
+    title: 'B',
+    artist: 'BB',
+    bpm: 127,
+    rating: null,
+    camelotKey: '8B',
+    rawKey: null,
+    path: '',
+    playlists: [],
+  },
+]
+
+describe('analysis conversion helpers', () => {
+  it('clamps bpm band size into allowed range', () => {
+    expect(clampBpmBandSize(-5)).toBe(1)
+    expect(clampBpmBandSize(3.7)).toBe(4)
+    expect(clampBpmBandSize(99)).toBe(15)
+  })
+
+  it('creates bpm bands with range labels for larger band sizes', () => {
+    const bands = createBpmBands(tracks, 2)
+    expect(bands.map((band) => band.label)).toEqual(['124-125', '126-127'])
+  })
+
+  it('returns -1 for tracks without bpm when resolving band index', () => {
+    const bands = createBpmBands(tracks, 1)
+    expect(getBpmBandIndex(null, bands)).toBe(-1)
+  })
+})
diff --git a/src/lib/camelot.test.ts b/src/lib/camelot.test.ts
new file mode 100644
index 0000000..0c7e439
--- /dev/null
+++ b/src/lib/camelot.test.ts
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+import {
+  camelotToMusicalKey,
+  camelotToOpenKey,
+  formatKey,
+  normalizeCamelotKey,
+  type KeyRepresentation,
+} from './camelot'
+
+describe('normalizeCamelotKey', () => {
+  it('normalizes camelot values', () => {
+    expect(normalizeCamelotKey('8a')).toBe('8A')
+    expect(normalizeCamelotKey('12B')).toBe('12B')
+  })
+
+  it('normalizes open key values', () => {
+    expect(normalizeCamelotKey('1d')).toBe('8B')
+    expect(normalizeCamelotKey('12m')).toBe('7A')
+  })
+
+  it('normalizes musical keys', () => {
+    expect(normalizeCamelotKey('C major')).toBe('8B')
+    expect(normalizeCamelotKey('f#m')).toBe('11A')
+    expect(normalizeCamelotKey('D♭ minor')).toBe('12A')
+  })
+
+  it('normalizes numeric engine keys', () => {
+    expect(normalizeCamelotKey(0)).toBe('8B')
+    expect(normalizeCamelotKey('1')).toBe('8A')
+  })
+
+  it('returns unknown for unsupported input', () => {
+    expect(normalizeCamelotKey('nope')).toBe('?')
+    expect(normalizeCamelotKey(null)).toBe('?')
+  })
+})
+
+describe('key representation conversion', () => {
+  it('converts camelot to open key', () => {
+    expect(camelotToOpenKey('8B')).toBe('1d')
+    expect(camelotToOpenKey('7A')).toBe('12m')
+    expect(camelotToOpenKey('?')).toBe('?')
+  })
+
+  it('converts camelot to musical key', () => {
+    expect(camelotToMusicalKey('8B')).toBe('C major')
+    expect(camelotToMusicalKey('8A')).toBe('A minor')
+    expect(camelotToMusicalKey('?')).toBe('?')
+  })
+
+  it('formats a key by representation', () => {
+    const formats: Record<KeyRepresentation, string> = {
+      camelot: '8A',
+      'open-key': '1m',
+      musical: 'A minor',
+    }
+
+    for (const [representation, expected] of Object.entries(formats)) {
+      expect(formatKey('A minor', representation as KeyRepresentation)).toBe(expected)
+    }
+  })
+})
diff --git a/src/lib/camelot.ts b/src/lib/camelot.ts
index 97c8489..249009a 100644
--- a/src/lib/camelot.ts
+++ b/src/lib/camelot.ts
@@ -52,6 +52,10 @@ const OPEN_KEY_TO_CAMELOT: Record<string, string> = {
   '12m': '7A',
 }
 
+const CAMELOT_TO_OPEN_KEY: Record<string, string> = Object.fromEntries(
+  Object.entries(OPEN_KEY_TO_CAMELOT).map(([openKey, camelotKey]) => [camelotKey, openKey]),
+)
+
 const STANDARD_KEY_TO_CAMELOT: Record<string, string> = {
   'A major': '11B',
   'A minor': '8A',
@@ -91,6 +95,33 @@ const STANDARD_KEY_TO_CAMELOT: Record<string, string> = {
   'Gb minor': '11A',
 }
 
+const CAMELOT_TO_MUSICAL_KEY: Record<string, string> = {
+  '1A': 'Ab minor',
+  '1B': 'B major',
+  '2A': 'D# minor',
+  '2B': 'F# major',
+  '3A': 'A# minor',
+  '3B': 'C# major',
+  '4A': 'F minor',
+  '4B': 'Ab major',
+  '5A': 'C minor',
+  '5B': 'D# major',
+  '6A': 'G minor',
+  '6B': 'A# major',
+  '7A': 'D minor',
+  '7B': 'F major',
+  '8A': 'A minor',
+  '8B': 'C major',
+  '9A': 'E minor',
+  '9B': 'G major',
+  '10A': 'B minor',
+  '10B': 'D major',
+  '11A': 'F# minor',
+  '11B': 'A major',
+  '12A': 'C# minor',
+  '12B': 'E major',
+ }
+
 export const CAMELOT_KEYS = Array.from({ length: 12 }, (_, index) => {
   const number = index + 1
   return [`${number}A`, `${number}B`]
@@ -98,6 +129,7 @@ export const CAMELOT_KEYS = Array.from({ length: 12 }, (_, index) => {
 
 const CAMELOT_PATTERN = /^(1[0-2]|[1-9])(A|B)$/i
 const OPEN_KEY_PATTERN = /^(1[0-2]|[1-9])(D|M)$/i
+export type KeyRepresentation = 'camelot' | 'open-key' | 'musical'
 
 function normalizeStandardKey(value: string): string | null {
   const compact = value
@@ -152,3 +184,41 @@ export function normalizeCamelotKey(value: unknown): string {
 
   return '?'
 }
+
+export function camelotToOpenKey(camelotKey: string): string {
+  const normalizedCamelotKey = normalizeCamelotKey(camelotKey)
+  if (normalizedCamelotKey === '?') {
+    return '?'
+  }
+
+  return CAMELOT_TO_OPEN_KEY[normalizedCamelotKey] ?? '?'
+}
+
+export function camelotToMusicalKey(camelotKey: string): string {
+  const normalizedCamelotKey = normalizeCamelotKey(camelotKey)
+  if (normalizedCamelotKey === '?') {
+    return '?'
+  }
+
+  return CAMELOT_TO_MUSICAL_KEY[normalizedCamelotKey] ?? '?'
+}
+
+export function formatKey(
+  value: unknown,
+  representation: KeyRepresentation = 'camelot',
+): string {
+  const camelotKey = normalizeCamelotKey(value)
+  if (camelotKey === '?') {
+    return '?'
+  }
+
+  switch (representation) {
+    case 'open-key':
+      return camelotToOpenKey(camelotKey)
+    case 'musical':
+      return camelotToMusicalKey(camelotKey)
+    case 'camelot':
+    default:
+      return camelotKey
+  }
+}
diff --git a/src/lib/libraryLoader.test.ts b/src/lib/libraryLoader.test.ts
new file mode 100644
index 0000000..3777a49
--- /dev/null
+++ b/src/lib/libraryLoader.test.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest'
+import { getLibraryFormatFromName } from './libraryLoader'
+
+describe('getLibraryFormatFromName', () => {
+  it('detects traktor collections by .nml extension', () => {
+    expect(getLibraryFormatFromName('collection.nml')).toBe('traktor')
+    expect(getLibraryFormatFromName('COLLECTION.NML')).toBe('traktor')
+  })
+
+  it('detects rekordbox collections by .xml extension', () => {
+    expect(getLibraryFormatFromName('rekordbox.xml')).toBe('rekordbox')
+    expect(getLibraryFormatFromName('EXPORT.XML')).toBe('rekordbox')
+  })
+
+  it('defaults to engine dj for other extensions', () => {
+    expect(getLibraryFormatFromName('m.db')).toBe('engine-dj')
+    expect(getLibraryFormatFromName('library.sqlite3')).toBe('engine-dj')
+  })
+})
diff --git a/src/lib/libraryLoader.ts b/src/lib/libraryLoader.ts
index 2d488de..1c31f9d 100644
--- a/src/lib/libraryLoader.ts
+++ b/src/lib/libraryLoader.ts
@@ -3,22 +3,30 @@ import { loadEngineDjLibrary } from './engineDj'
 import { loadRekordboxLibrary } from './rekordbox'
 import { loadTraktorLibrary } from './traktor'
 
-function isTraktorCollection(file: File): boolean {
-  return file.name.toLowerCase().endsWith('.nml')
-}
+export type LibraryFormat = 'engine-dj' | 'traktor' | 'rekordbox'
 
-function isRekordboxCollection(file: File): boolean {
-  return file.name.toLowerCase().endsWith('.xml')
-}
+export function getLibraryFormatFromName(fileName: string): LibraryFormat {
+  const normalizedName = fileName.toLowerCase()
 
-export function loadLibraryFromFile(file: File): Promise<LibraryData> {
-  if (isTraktorCollection(file)) {
-    return loadTraktorLibrary(file)
+  if (normalizedName.endsWith('.nml')) {
+    return 'traktor'
   }
 
-  if (isRekordboxCollection(file)) {
-    return loadRekordboxLibrary(file)
+  if (normalizedName.endsWith('.xml')) {
+    return 'rekordbox'
   }
 
-  return loadEngineDjLibrary(file)
+  return 'engine-dj'
+}
+
+export function loadLibraryFromFile(file: File): Promise<LibraryData> {
+  switch (getLibraryFormatFromName(file.name)) {
+    case 'traktor':
+      return loadTraktorLibrary(file)
+    case 'rekordbox':
+      return loadRekordboxLibrary(file)
+    case 'engine-dj':
+    default:
+      return loadEngineDjLibrary(file)
+  }
 }