From 7a1c3ec7e46f12e3d2dd4e96de79a7de86143277 Mon Sep 17 00:00:00 2001
From: Stephen Shaw <sshaw@decriptor.com>
Date: Sat, 25 Apr 2026 02:00:23 -0600
Subject: [PATCH 1/2] configurator: TypeScript/Vite rewrite of the docker
 config generator
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the existing inline ~1100-line index.html configurator with a
proper TypeScript app under configurator/. Same user-facing surface
(compose / docker run output, share-link round-trip, platform presets,
advanced options), now with unit + e2e tests, type-checked code, and
per-file modularity.

Highlights:

- src/generator.ts: pure Config → string spec/render split. Always
  emits ROON_INSTALL_BRANCH explicitly (resolves issue #12 — the
  configurator no longer omits the var for the production case, which
  was leaving users stranded when the entrypoint had sticky behavior).
  Quotes user: "0:0" to avoid YAML 1.1 sexagesimal parsing. Defense-
  in-depth YAML/shell quoting with positive + negative tests for every
  option.

- public/platforms/: 6 presets (qnap, synology, unraid, truenas, linux,
  custom) as JSON files validated against schema.json. truenas.json
  uses userOverride: "0:0" to force root inside the container, working
  around TrueNAS Apps' UID 568 default. unraid.json's hint warns about
  the cache-only precondition before suggesting /mnt/cache/ — earlier
  wording risked DB corruption when Mover migrated the SQLite database
  mid-write.

- src/main.ts: DOM orchestration. Single source of truth in DOM, with
  URL > localStorage > defaults precedence on init. Validation surfaces
  via aria-invalid + aria-describedby; output regen on every change.

- WCAG 2.1 AA: skip link, focus-visible outlines, roving tabindex on
  the output mode tabs, contrast-tuned surface palette, prefers-
  reduced-motion + forced-colors handling.

- Loading overlay: full-viewport icon (left half-moon + three audio
  bars pulsing out of phase, modeled on the desktop app's
  footer_loading animateddrawable). Fades out when the app marks
  itself ready; window 'load' listener is the failsafe; <noscript>
  hides the overlay for JS-disabled visitors.

- CSP: meta http-equiv with default-src 'self', script-src 'self', no
  unsafe-eval, frame-ancestors 'none'. The app doesn't render user
  HTML and uses textContent + createTextNode exclusively, but the CSP
  catches any future regression.

- Tests: 119 Vitest unit tests + 23 Playwright e2e covering generator
  output, URL state encoding/decoding, platform validation/loading,
  options uniqueness invariants, and full user flows. e2e tests click
  the wrapping <label> rather than the sr-only <input> so newer
  Playwright's post-click state verification passes.

- Build: Vite 8, ~22 kB JS gzipped, ~6 kB CSS gzipped.
---
 .gitignore                                  |    1 +
 configurator/.gitignore                     |    8 +
 configurator/README.md                      |   89 +
 configurator/e2e/configurator.spec.ts       |  313 ++++
 configurator/index.html                     |  422 +++++
 configurator/package-lock.json              | 1829 +++++++++++++++++++
 configurator/package.json                   |   26 +
 configurator/playwright.config.ts           |   31 +
 configurator/public/platforms/custom.json   |    9 +
 configurator/public/platforms/index.json    |    1 +
 configurator/public/platforms/linux.json    |    9 +
 configurator/public/platforms/qnap.json     |   10 +
 configurator/public/platforms/schema.json   |   58 +
 configurator/public/platforms/synology.json |   10 +
 configurator/public/platforms/truenas.json  |   11 +
 configurator/public/platforms/unraid.json   |   10 +
 configurator/public/roon-moon.svg           |    3 +
 configurator/src/generator.test.ts          |  432 +++++
 configurator/src/generator.ts               |  230 +++
 configurator/src/highlight.ts               |  170 ++
 configurator/src/main.ts                    |  770 ++++++++
 configurator/src/options.test.ts            |   50 +
 configurator/src/options.ts                 |   73 +
 configurator/src/persistence.ts             |   38 +
 configurator/src/platforms.test.ts          |  265 +++
 configurator/src/platforms.ts               |  165 ++
 configurator/src/styles.css                 |  183 ++
 configurator/src/types.ts                   |   54 +
 configurator/src/urlState.test.ts           |  275 +++
 configurator/src/urlState.ts                |  111 ++
 configurator/src/vite-env.d.ts              |    1 +
 configurator/tsconfig.json                  |   24 +
 configurator/vite.config.ts                 |   20 +
 33 files changed, 5701 insertions(+)
 create mode 100644 configurator/.gitignore
 create mode 100644 configurator/README.md
 create mode 100644 configurator/e2e/configurator.spec.ts
 create mode 100644 configurator/index.html
 create mode 100644 configurator/package-lock.json
 create mode 100644 configurator/package.json
 create mode 100644 configurator/playwright.config.ts
 create mode 100644 configurator/public/platforms/custom.json
 create mode 100644 configurator/public/platforms/index.json
 create mode 100644 configurator/public/platforms/linux.json
 create mode 100644 configurator/public/platforms/qnap.json
 create mode 100644 configurator/public/platforms/schema.json
 create mode 100644 configurator/public/platforms/synology.json
 create mode 100644 configurator/public/platforms/truenas.json
 create mode 100644 configurator/public/platforms/unraid.json
 create mode 100644 configurator/public/roon-moon.svg
 create mode 100644 configurator/src/generator.test.ts
 create mode 100644 configurator/src/generator.ts
 create mode 100644 configurator/src/highlight.ts
 create mode 100644 configurator/src/main.ts
 create mode 100644 configurator/src/options.test.ts
 create mode 100644 configurator/src/options.ts
 create mode 100644 configurator/src/persistence.ts
 create mode 100644 configurator/src/platforms.test.ts
 create mode 100644 configurator/src/platforms.ts
 create mode 100644 configurator/src/styles.css
 create mode 100644 configurator/src/types.ts
 create mode 100644 configurator/src/urlState.test.ts
 create mode 100644 configurator/src/urlState.ts
 create mode 100644 configurator/src/vite-env.d.ts
 create mode 100644 configurator/tsconfig.json
 create mode 100644 configurator/vite.config.ts

diff --git a/.gitignore b/.gitignore
index ed3c8dc..ef8260a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 ImageJournal.md
 docker-compose*.yml
 qnap.docker.*.txt
+.playwright-mcp/
diff --git a/configurator/.gitignore b/configurator/.gitignore
new file mode 100644
index 0000000..9cff3d8
--- /dev/null
+++ b/configurator/.gitignore
@@ -0,0 +1,8 @@
+node_modules/
+dist/
+*.log
+.DS_Store
+.vite/
+/playwright-report/
+/test-results/
+/.playwright-mcp/
diff --git a/configurator/README.md b/configurator/README.md
new file mode 100644
index 0000000..015d8b5
--- /dev/null
+++ b/configurator/README.md
@@ -0,0 +1,89 @@
+# RoonServer Docker Configuration Generator
+
+A static web app that generates `docker-compose.yml` and `docker run`
+commands for the official RoonServer Docker image. Built with TypeScript
+and Vite, deployed to GitHub Pages.
+
+## Development
+
+```sh
+npm install
+npm run dev          # dev server with hot reload at http://localhost:5173
+npm run typecheck    # tsc --noEmit
+npm test             # vitest
+npm run build        # typecheck + Vite build into dist/
+npm run preview      # serve the built dist/ for a final sanity check
+```
+
+## Adding a platform
+
+Platforms are declarative JSON under [`public/platforms/`](public/platforms/).
+To add one:
+
+1. Create `public/platforms/<id>.json` matching the shape below.
+2. Add the `<id>` to the `public/platforms/index.json` manifest in the
+   order it should appear in the dropdown.
+3. Run `npm test` — the platform-file tests will validate the shape and
+   confirm the manifest is in sync.
+
+The manifest's **first visible entry is the default platform**. To change
+the default, reorder the manifest.
+
+### Platform JSON shape
+
+```json
+{
+  "id": "qnap",
+  "label": "QNAP",
+  "roon": "/share/Container/roon",
+  "music": "/share/Music",
+  "backup": "/share/Container/roon-backups",
+  "prefix": "/share/",
+  "hint": "Paths set for QNAP. Container Station stores app data under /share/Container/.",
+  "rootPattern": "^/share/",
+  "hidden": false
+}
+```
+
+| Field         | Required | Purpose                                                                    |
+|---------------|----------|----------------------------------------------------------------------------|
+| `id`          | yes      | Must match the filename (`qnap.json` → `"id": "qnap"`).                    |
+| `label`       | yes      | Display text in the dropdown and inline warnings.                          |
+| `roon`        | yes      | Default host path for the `/Roon` container mount.                         |
+| `music`       | yes      | Default host path for the `/Music` container mount.                        |
+| `backup`      | yes      | Default host path for the `/RoonBackups` container mount.                  |
+| `prefix`      | yes      | Placeholder text for the "add mount" host input.                           |
+| `hint`        | yes      | One-sentence help text shown under the platform dropdown.                  |
+| `rootPattern` | no       | Regex string. If present, host paths not matching it show a soft warning. |
+| `hidden`      | no       | `true` keeps the platform loaded but omits it from the dropdown.           |
+
+## Tests
+
+- **`src/*.test.ts`** — unit tests for the pure modules (`generator`,
+  `platforms`), plus structural checks on every platform JSON file. Uses
+  [Vitest](https://vitest.dev/).
+- **`e2e/`** — end-to-end tests against the built site, driven by
+  [Playwright](https://playwright.dev/). Run with `npm run test:e2e`.
+
+CI runs `typecheck`, `test`, and `test:e2e` before every deploy.
+
+## Architecture
+
+Each source module has one job. Keeping them separate makes the pure
+logic unit-testable without a DOM.
+
+| File                   | Responsibility                                                   |
+|------------------------|------------------------------------------------------------------|
+| `src/types.ts`         | Shared types: `Config`, `Platform`, `ValidationIssue`.           |
+| `src/generator.ts`     | Pure functions: `Config` → compose/run output lines.             |
+| `src/platforms.ts`     | Platform loader + validation helpers. No DOM.                    |
+| `src/highlight.ts`     | DOM-based syntax highlighting for the output editor.             |
+| `src/main.ts`          | DOM wiring, event handlers, app init.                            |
+| `public/platforms/`    | Platform data files (copied verbatim to the build output).       |
+
+## Deployment
+
+Deployment is automated via [`.github/workflows/pages.yml`](../.github/workflows/pages.yml).
+Every push to `main` that touches `configurator/**` triggers a build
+and, on success, a Pages deploy. To deploy, the repository's **Settings
+→ Pages → Source** must be set to **GitHub Actions**.
diff --git a/configurator/e2e/configurator.spec.ts b/configurator/e2e/configurator.spec.ts
new file mode 100644
index 0000000..e1510d0
--- /dev/null
+++ b/configurator/e2e/configurator.spec.ts
@@ -0,0 +1,313 @@
+import { test, expect, type Page } from '@playwright/test';
+
+// Pulls the generated config as plain text by walking the output table's
+// code cells, which is closer to what the Copy button produces than innerText.
+async function getOutput(page: Page): Promise<string> {
+  return page.evaluate(() => {
+    const rows = document.querySelectorAll('#output tr');
+    return Array.from(rows)
+      .map((r) => (r.querySelectorAll('td')[1]?.textContent ?? ''))
+      .join('\n');
+  });
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+  // Platforms load asynchronously — wait for the select to have options.
+  await page.waitForFunction(
+    () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+  );
+});
+
+test.describe('Initial state', () => {
+  test('defaults to QNAP and populates its paths', async ({ page }) => {
+    await expect(page.locator('#platform-select')).toHaveValue('qnap');
+    await expect(page.locator('#vol-roon')).toHaveValue('/share/Container/roon');
+    await expect(page.locator('#vol-music')).toHaveValue('/share/Music');
+    await expect(page.locator('#vol-backup')).toHaveValue('/share/Container/roon-backups');
+  });
+
+  test('platform dropdown lists all visible platforms in expected order', async ({ page }) => {
+    const values = await page
+      .locator('#platform-select option')
+      .evaluateAll((els) => els.map((e) => (e as HTMLOptionElement).value));
+    expect(values).toEqual(['qnap', 'synology', 'unraid', 'truenas', 'linux', 'custom']);
+  });
+
+  test('Copy and Download are enabled with no input errors', async ({ page }) => {
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+    await expect(page.locator('#btn-download')).toBeEnabled();
+  });
+});
+
+test.describe('Platform switching', () => {
+  test('switching to Synology swaps all three volume paths', async ({ page }) => {
+    await page.locator('#platform-select').selectOption('synology');
+    await expect(page.locator('#vol-roon')).toHaveValue('/volume1/docker/roon');
+    await expect(page.locator('#vol-music')).toHaveValue('/volume1/music');
+    await expect(page.locator('#vol-backup')).toHaveValue('/volume1/roon-backups');
+    expect(await getOutput(page)).toContain('- /volume1/music:/Music');
+  });
+});
+
+test.describe('CIFS toggle', () => {
+  test('compose output includes cap_add and both LSM opt-outs in security_opt', async ({ page }) => {
+    // The <input> is sr-only (visually hidden) and the styled toggle track
+    // is its visible sibling. Click the wrapping <label> the way a real
+    // user does — Playwright's .check() on the offscreen input fails its
+    // post-click state verification in newer versions.
+    await page.locator('label:has(#opt-cifs)').click();
+    const out = await getOutput(page);
+    expect(out).toContain('cap_add:');
+    expect(out).toContain('- SYS_ADMIN');
+    expect(out).toContain('- DAC_READ_SEARCH');
+    expect(out).toContain('security_opt:');
+    expect(out).toContain('- apparmor:unconfined');
+    expect(out).toContain('- label:disable');
+  });
+
+  test('docker run output uses equals-form LSM flags', async ({ page }) => {
+    // The <input> is sr-only (visually hidden) and the styled toggle track
+    // is its visible sibling. Click the wrapping <label> the way a real
+    // user does — Playwright's .check() on the offscreen input fails its
+    // post-click state verification in newer versions.
+    await page.locator('label:has(#opt-cifs)').click();
+    await page.locator('#tab-run').click();
+    const out = await getOutput(page);
+    expect(out).toContain('--cap-add SYS_ADMIN');
+    expect(out).toContain('--security-opt apparmor=unconfined');
+    expect(out).toContain('--security-opt label=disable');
+    // Regression guard: run uses `=`, not the compose-style `:`.
+    expect(out).not.toContain('--security-opt apparmor:unconfined');
+    expect(out).not.toContain('--security-opt label:disable');
+  });
+});
+
+test.describe('Volume path validation', () => {
+  test('relative main volume path disables Copy and Download', async ({ page }) => {
+    await page.locator('#vol-music').fill('share/Music');
+    const warning = page.locator('#vol-music-warning');
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveAttribute('data-severity', 'error');
+    await expect(warning).toContainText('absolute');
+    await expect(page.locator('#btn-copy')).toBeDisabled();
+    await expect(page.locator('#btn-download')).toBeDisabled();
+  });
+
+  test('correcting the path re-enables the actions', async ({ page }) => {
+    await page.locator('#vol-music').fill('share/Music');
+    await expect(page.locator('#btn-copy')).toBeDisabled();
+    await page.locator('#vol-music').fill('/share/Music');
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+    await expect(page.locator('#vol-music-warning')).toBeHidden();
+  });
+
+  test('wrong-platform path shows a warning but does not block actions', async ({ page }) => {
+    await page.locator('#vol-music').fill('/volume1/music');
+    const warning = page.locator('#vol-music-warning');
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveAttribute('data-severity', 'warning');
+    await expect(warning).toContainText('QNAP');
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+  });
+});
+
+test.describe('URL state', () => {
+  test('loading with ?c=1 enables the CIFS toggle', async ({ page }) => {
+    // E2E value here is that URL state hydrates the DOM checkbox — the
+    // compose/run output is covered by unit tests, no need to re-assert.
+    await page.goto('/?c=1');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await expect(page.locator('#opt-cifs')).toBeChecked();
+  });
+
+  test('loading with ?tzOff=1&logOff=1 unchecks the default-on toggles', async ({ page }) => {
+    // These are the only "inverted" URL flags (absent = on, present = off),
+    // easy to break without E2E coverage.
+    await page.goto('/?tzOff=1&logOff=1');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await expect(page.locator('#opt-tz')).not.toBeChecked();
+    await expect(page.locator('#opt-logging')).not.toBeChecked();
+  });
+
+  test('malformed URL params do not crash hydration', async ({ page }) => {
+    await page.goto('/?p=notaplatform&b=garbage&x=nocolon&tzOff=maybe');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    // Unknown platform falls back to the default; invalid branch ignored.
+    await expect(page.locator('#platform-select')).toHaveValue('qnap');
+    await expect(page.locator('#branch-select')).toHaveValue('production');
+    // Malformed extras produced no rows.
+    await expect(page.locator('.extra-vol-row')).toHaveCount(0);
+  });
+
+  test('loading with ?p=synology&x=... restores the full state', async ({ page }) => {
+    await page.goto('/?p=synology&u=1&vm=%2Fvolume1%2Fall&x=%2Fvolume1%2Fm%3A%2FMusic%2Fm');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await expect(page.locator('#platform-select')).toHaveValue('synology');
+    await expect(page.locator('#opt-usb-audio')).toBeChecked();
+    await expect(page.locator('#vol-music')).toHaveValue('/volume1/all');
+    const row = page.locator('.extra-vol-row').first();
+    await expect(row.locator('.extra-vol-host')).toHaveValue('/volume1/m');
+    await expect(row.locator('.extra-vol-container')).toHaveValue('/Music/m');
+  });
+
+  test('toggling an option updates the URL without adding history entries', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    const initialHistoryLength = await page.evaluate(() => history.length);
+    await page.locator('label:has(#opt-cifs)').click();
+    await expect(page).toHaveURL(/[?&]c=1(&|$)/);
+    // replaceState shouldn't add to history.
+    const afterHistoryLength = await page.evaluate(() => history.length);
+    expect(afterHistoryLength).toBe(initialHistoryLength);
+  });
+
+  test('localStorage hydrates state when URL is empty', async ({ page }) => {
+    // First visit: set some non-default state so it gets persisted.
+    await page.goto('/');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await page.locator('#platform-select').selectOption('synology');
+    await page.locator('label:has(#opt-cifs)').click();
+
+    // Return with a clean URL — localStorage should restore Synology + CIFS.
+    await page.goto('/');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await expect(page.locator('#platform-select')).toHaveValue('synology');
+    await expect(page.locator('#opt-cifs')).toBeChecked();
+  });
+
+  test('URL parameters override localStorage', async ({ page }) => {
+    // Seed localStorage with Synology + CIFS first.
+    await page.goto('/');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await page.locator('#platform-select').selectOption('synology');
+    await page.locator('label:has(#opt-cifs)').click();
+
+    // Now visit with a URL that picks Unraid — share link should win.
+    await page.goto('/?p=unraid');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await expect(page.locator('#platform-select')).toHaveValue('unraid');
+    // CIFS came from persistence and wasn't in the URL; fresh-URL state
+    // should mean fresh-URL state — CIFS off.
+    await expect(page.locator('#opt-cifs')).not.toBeChecked();
+  });
+
+  test('Reset button wipes URL + localStorage and restores defaults', async ({ page }) => {
+    await page.goto('/?p=synology&c=1');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+
+    await page.locator('#btn-reset').click();
+
+    await expect(page.locator('#platform-select')).toHaveValue('qnap');
+    await expect(page.locator('#opt-cifs')).not.toBeChecked();
+
+    // URL is clean and localStorage is empty.
+    await expect(page).toHaveURL(/^[^?]*$/);
+    const stored = await page.evaluate(() => localStorage.getItem('roon-configurator-state'));
+    expect(stored).toBeNull();
+  });
+
+  test('share button copies the current URL to the clipboard', async ({ page, context }) => {
+    await context.grantPermissions(['clipboard-read', 'clipboard-write']);
+    await page.goto('/');
+    await page.waitForFunction(
+      () => (document.getElementById('platform-select') as HTMLSelectElement)?.options.length > 0,
+    );
+    await page.locator('label:has(#opt-cifs)').click();
+    await page.locator('#btn-share').click();
+    const clipboard = await page.evaluate(() => navigator.clipboard.readText());
+    expect(clipboard).toBe(page.url());
+    expect(clipboard).toMatch(/[?&]c=1(&|$)/);
+  });
+});
+
+test.describe('Extra volumes', () => {
+  test('adding a row appends the mount to the output', async ({ page }) => {
+    await page.locator('#btn-add-volume').click();
+    const row = page.locator('.extra-vol-row').first();
+    await row.locator('.extra-vol-host').fill('/share/Media/extra');
+    await row.locator('.extra-vol-container').fill('/Music/extra');
+    const out = await getOutput(page);
+    expect(out).toContain('- /share/Media/extra:/Music/extra');
+  });
+
+  test('a freshly added row immediately flags the missing container path as an error', async ({ page }) => {
+    // The row starts with the platform prefix in the host input and an
+    // empty container input — that's not a valid mount, so Copy/Download
+    // should block until the user either fills the container or removes
+    // the row with the × button.
+    await page.locator('#btn-add-volume').click();
+    const row = page.locator('.extra-vol-row').first();
+    const warning = row.locator('.extra-vol-warning');
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveAttribute('data-severity', 'error');
+    await expect(warning).toContainText('Container path is required');
+    await expect(page.locator('#btn-copy')).toBeDisabled();
+
+    // Removing the row clears the error and re-enables Copy.
+    await row.locator('button[aria-label="Remove volume mount"]').click();
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+  });
+
+  test('reserved container path is flagged as an error', async ({ page }) => {
+    await page.locator('#btn-add-volume').click();
+    const row = page.locator('.extra-vol-row').first();
+    await row.locator('.extra-vol-container').fill('/Music');
+    const warning = row.locator('.extra-vol-warning');
+    await expect(warning).toBeVisible();
+    await expect(warning).toHaveAttribute('data-severity', 'error');
+    await expect(warning).toContainText('already mounted');
+    await expect(page.locator('#btn-copy')).toBeDisabled();
+  });
+
+  test('duplicate container paths across rows are flagged on both rows', async ({ page }) => {
+    await page.locator('#btn-add-volume').click();
+    await page.locator('#btn-add-volume').click();
+    const rows = page.locator('.extra-vol-row');
+    await rows.nth(0).locator('.extra-vol-container').fill('/Music/extra');
+    await rows.nth(1).locator('.extra-vol-container').fill('/Music/extra');
+    await expect(rows.nth(0).locator('.extra-vol-warning')).toContainText('more than once');
+    await expect(rows.nth(1).locator('.extra-vol-warning')).toContainText('more than once');
+    await expect(page.locator('#btn-copy')).toBeDisabled();
+
+    // Fix one of them — both warnings should clear.
+    await rows.nth(1).locator('.extra-vol-container').fill('/Music/other');
+    await expect(rows.nth(0).locator('.extra-vol-warning')).toBeHidden();
+    await expect(rows.nth(1).locator('.extra-vol-warning')).toBeHidden();
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+  });
+
+  test('removing a row clears any duplicate-errors it caused on siblings', async ({ page }) => {
+    await page.locator('#btn-add-volume').click();
+    await page.locator('#btn-add-volume').click();
+    const rows = page.locator('.extra-vol-row');
+    await rows.nth(0).locator('.extra-vol-container').fill('/Music/extra');
+    await rows.nth(1).locator('.extra-vol-container').fill('/Music/extra');
+    await expect(rows.nth(0).locator('.extra-vol-warning')).toBeVisible();
+
+    // Remove the second row; the first should no longer be duplicate.
+    await rows.nth(1).locator('button[aria-label="Remove volume mount"]').click();
+    await expect(page.locator('.extra-vol-row .extra-vol-warning').first()).toBeHidden();
+    await expect(page.locator('#btn-copy')).toBeEnabled();
+  });
+});
diff --git a/configurator/index.html b/configurator/index.html
new file mode 100644
index 0000000..d7cfdb1
--- /dev/null
+++ b/configurator/index.html
@@ -0,0 +1,422 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>RoonServer Docker Configuration Generator</title>
+<meta name="description" content="Generate Docker Compose or docker run configurations for the official RoonServer Docker image.">
+<!--
+  Defense-in-depth CSP: the app loads only first-party JSON via fetch and never
+  renders user-supplied HTML (highlight.ts uses textContent + createTextNode
+  exclusively). 'unsafe-inline' is needed for style only because Tailwind
+  generates inline styles for forced-colors / focus rings; could be removed
+  if those move to external CSS. No 'unsafe-eval' — Vite's prod build is
+  static. frame-ancestors 'none' blocks clickjacking.
+-->
+<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; script-src 'self'; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'none'">
+<meta http-equiv="X-Content-Type-Options" content="nosniff">
+<meta name="referrer" content="no-referrer">
+<style>
+  /* Loading overlay: covers the whole viewport with the Roon wordmark + a
+     spinner until the app finishes its initial render. main.ts adds
+     `app-ready` once loadPlatforms() + the DOM init pass complete; the
+     window `load` event below adds it as a safety net even if main.ts
+     errors before getting there. */
+  #app-loading {
+    position: fixed; inset: 0; z-index: 100;
+    display: flex; align-items: center; justify-content: center;
+    background: #0d131d;
+    transition: opacity 200ms ease-out, visibility 0s linear 200ms;
+  }
+  #app-loading svg { width: 96px; height: 96px; color: #a78bfa; }
+  /* Audio-bar pulse animation, modeled on the Roon desktop app's
+     `footer_loading` animateddrawable (Client/ui/animations.broo:198):
+     ping-pong height oscillation with the three bars staggered out of
+     phase. The original cycles 13 frames over ~870ms; we use a 1.2s
+     cubic-bezier ease that lands close to the perceived rhythm.
+     transform-origin: center 12 puts the scale center at the icon's
+     vertical midline so each bar grows symmetrically up and down. */
+  #app-loading .bar { transform-origin: center 12px; animation: app-bar 1.2s cubic-bezier(.4,0,.6,1) infinite; }
+  #app-loading .bar-1 { animation-delay: 0s; }
+  #app-loading .bar-2 { animation-delay: -0.4s; }
+  #app-loading .bar-3 { animation-delay: -0.8s; }
+  @keyframes app-bar {
+    0%, 100% { transform: scaleY(0.35); }
+    50%      { transform: scaleY(1); }
+  }
+  body.app-ready #app-loading { opacity: 0; visibility: hidden; }
+  @media (prefers-reduced-motion: reduce) {
+    #app-loading .bar { animation: none; transform: scaleY(1); }
+    #app-loading, body.app-ready #app-loading { transition: none; }
+  }
+  /* FOUC cap: any unsized inline SVG defaults to 1.25rem instead of
+     rendering at SVG's intrinsic 300×150 default before Tailwind loads. */
+  svg:not([width]):not([height]) { width: 1.25rem; height: 1.25rem; }
+</style>
+<noscript>
+  <!-- JS-disabled visitors see the static layout (functional except for
+       output regen). Hide the loading overlay so they aren't stuck behind
+       it forever. -->
+  <style>#app-loading { display: none; }</style>
+</noscript>
+</head>
+<body class="bg-surface-950 min-h-screen font-sans" style="background:#0d131d;color:rgba(255,255,255,0.87)">
+
+  <!-- Loading overlay shown until main.ts adds `app-ready` to body.
+       Hidden via display:none for users without JS (see noscript above). -->
+  <div id="app-loading" role="status" aria-live="polite" aria-label="Loading configurator">
+    <svg width="96" height="96" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <!-- Half-moon (static): the left semicircle from the original roon-moon -->
+      <path d="M11.9997 24C5.37243 23.9998 0 18.6273 0 12C0 5.37268 5.37243 0.000154372 11.9997 0C12.5301 0.000155039 12.96 0.431982 12.96 0.959358V23.0406C12.96 23.5704 12.5299 23.9998 11.9997 24Z" fill="currentColor"/>
+      <!-- Three audio bars (animated). Heights chosen to match the original
+           roon-moon at rest — bar-1 = 12.96 tall (small), bar-2 = 18.24 tall
+           (tallest), bar-3 = 6.24 tall (shortest). Rounded ends via rx/ry. -->
+      <rect class="bar bar-1" x="14.64" y="5.52"  width="1.68" height="12.96" rx="0.84" ry="0.84" fill="currentColor"/>
+      <rect class="bar bar-2" x="18"    y="2.88"  width="1.68" height="18.24" rx="0.84" ry="0.84" fill="currentColor"/>
+      <rect class="bar bar-3" x="21.36" y="8.88"  width="1.68" height="6.24"  rx="0.84" ry="0.84" fill="currentColor"/>
+    </svg>
+    <span class="sr-only">Loading…</span>
+  </div>
+
+  <a href="#main" class="skip-link">Skip to content</a>
+
+  <!-- Header -->
+  <header class="border-b border-surface-600/40 bg-surface-700/80 backdrop-blur-sm sticky top-0 z-50">
+    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div class="flex items-center justify-between h-16">
+        <div class="flex items-center gap-3">
+          <div class="flex items-center gap-2">
+            <svg width="28" height="28" class="w-7 h-7 text-roon-400" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9997 24C5.37243 23.9998 0 18.6273 0 12C0 5.37268 5.37243 0.000154372 11.9997 0C12.5301 0.000155039 12.96 0.431982 12.96 0.959358V23.0406C12.96 23.5704 12.5299 23.9998 11.9997 24ZM14.64 6.36036C14.64 5.89624 15.017 5.52 15.48 5.52C15.9439 5.52 16.32 5.89389 16.32 6.36036V17.6396C16.32 18.1038 15.943 18.48 15.48 18.48C15.0161 18.48 14.64 18.1061 14.64 17.6396V6.36036ZM18 3.72317C18 3.2575 18.377 2.88 18.84 2.88C19.3039 2.88 19.68 3.25678 19.68 3.72317V20.2768C19.68 20.7425 19.303 21.12 18.84 21.12C18.3761 21.12 18 20.7432 18 20.2768V3.72317ZM21.36 9.72155C21.36 9.25678 21.737 8.88 22.2 8.88C22.6639 8.88 23.04 9.25629 23.04 9.72155V14.2784C23.04 14.7432 22.663 15.12 22.2 15.12C21.7361 15.12 21.36 14.7437 21.36 14.2784V9.72155Z" fill="currentColor"/>
+            </svg>
+            <span class="text-lg font-semibold text-white tracking-tight">RoonServer</span>
+          </div>
+          <span class="hidden sm:inline text-surface-300 text-sm">Docker Configuration Generator</span>
+        </div>
+        <nav class="flex items-center gap-1" aria-label="Resources">
+          <a href="https://help.roonlabs.com/portal/en/kb/articles/installing-the-roon-server-via-docker"
+             class="flex items-center gap-2 text-sm text-surface-300 hover:text-white transition-colors duration-200 px-3 py-1.5 rounded-lg hover:bg-surface-700/50"
+             target="_blank" rel="noopener noreferrer" aria-label="Roon's Docker installation guide (opens in new tab)">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+            </svg>
+            <span class="hidden sm:inline">Installation guide</span>
+          </a>
+          <a href="https://github.com/RoonLabs/roon-docker/issues"
+             class="flex items-center gap-2 text-sm text-surface-300 hover:text-white transition-colors duration-200 px-3 py-1.5 rounded-lg hover:bg-surface-700/50"
+             target="_blank" rel="noopener noreferrer" aria-label="Report feedback on GitHub Issues (opens in new tab)">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            <span class="hidden sm:inline">Feedback</span>
+          </a>
+          <a href="https://github.com/RoonLabs/roon-docker"
+             class="flex items-center gap-2 text-sm text-surface-300 hover:text-white transition-colors duration-200 px-3 py-1.5 rounded-lg hover:bg-surface-700/50"
+             target="_blank" rel="noopener noreferrer" aria-label="View source on GitHub (opens in new tab)">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+            <span class="hidden sm:inline">GitHub</span>
+          </a>
+        </nav>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Content -->
+  <main id="main" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 lg:py-10">
+    <h1 class="sr-only">RoonServer Docker configuration generator</h1>
+    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-8">
+
+      <!-- Left Column: Options -->
+      <div class="lg:col-span-5 space-y-5">
+
+        <!-- Platform Selector -->
+        <section class="bg-surface-800/60 border border-surface-500/40 rounded-xl p-5 backdrop-blur-sm ring-1 ring-roon-400/40" aria-labelledby="section-platform">
+          <div class="flex items-center gap-2 mb-3">
+            <h2 id="section-platform" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Platform</h2>
+          </div>
+          <label for="platform-select" class="sr-only">Select your platform</label>
+          <select id="platform-select"
+                  class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none appearance-none"
+                  style="background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M3%204.5l3%203%203-3%22%2F%3E%3C%2Fsvg%3E');background-repeat:no-repeat;background-position:right 12px center;padding-right:36px">
+          </select>
+          <div class="text-xs text-surface-300 mt-3 space-y-2" id="platform-hint" aria-live="polite"></div>
+        </section>
+
+        <!-- Release Branch -->
+        <section class="bg-surface-800/60 border border-surface-500/40 rounded-xl p-5 backdrop-blur-sm" aria-labelledby="section-branch">
+          <h2 id="section-branch" class="text-xs font-semibold uppercase tracking-wider text-slate-200 mb-3">Roon Server Release Branch</h2>
+          <div>
+            <label class="block text-xs text-surface-300 mb-1.5" for="branch-select">Which release branch to install on first start</label>
+            <select id="branch-select"
+                    class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none appearance-none"
+                    style="background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M3%204.5l3%203%203-3%22%2F%3E%3C%2Fsvg%3E');background-repeat:no-repeat;background-position:right 12px center;padding-right:36px">
+              <option value="production" selected>Production</option>
+              <option value="earlyaccess">Early Access</option>
+            </select>
+            <p class="text-xs text-surface-300 mt-1.5" id="branch-hint"></p>
+          </div>
+        </section>
+
+        <!-- Volumes -->
+        <section class="bg-surface-800/60 border border-surface-500/40 rounded-xl p-5 backdrop-blur-sm" aria-labelledby="section-volumes">
+          <div class="flex items-center justify-between mb-4">
+            <div class="flex items-center gap-2">
+              <h2 id="section-volumes" class="text-xs font-semibold uppercase tracking-wider text-slate-200">Volumes</h2>
+              <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-red-500/15 text-red-300 ring-1 ring-red-500/20">Required</span>
+            </div>
+            <button type="button" id="btn-add-volume" data-tooltip="Add volume mount" aria-label="Add volume mount"
+                    class="inline-flex items-center justify-center w-8 h-8 text-surface-300 hover:text-white bg-surface-700/60 hover:bg-surface-600/80 border border-surface-500/40 hover:border-roon-400/50 rounded-lg transition-all duration-200">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+            </button>
+          </div>
+          <div class="space-y-4">
+            <div>
+              <label class="text-sm font-medium text-white" for="vol-roon">/Roon</label>
+              <p class="text-xs text-surface-300 mt-0.5 mb-2" id="vol-roon-desc">Database, settings, cache, and machine identity. Must be writable and persistent.</p>
+              <input type="text" id="vol-roon" aria-required="true" aria-describedby="vol-roon-desc"
+                     class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm font-mono text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none">
+              <p class="vol-warning text-xs text-amber-400 mt-1.5 hidden" id="vol-roon-warning" aria-live="polite"></p>
+            </div>
+            <div class="border-t border-surface-500/30 pt-4">
+              <label class="text-sm font-medium text-white" for="vol-music">/Music</label>
+              <p class="text-xs text-surface-300 mt-0.5 mb-2" id="vol-music-desc">Your primary music library.</p>
+              <input type="text" id="vol-music" aria-required="true" aria-describedby="vol-music-desc"
+                     class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm font-mono text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none">
+              <p class="vol-warning text-xs text-amber-400 mt-1.5 hidden" id="vol-music-warning" aria-live="polite"></p>
+            </div>
+            <div class="border-t border-surface-500/30 pt-4">
+              <label class="text-sm font-medium text-white" for="vol-backup">/RoonBackups</label>
+              <p class="text-xs text-surface-300 mt-0.5 mb-2" id="vol-backup-desc">A host path for Roon's backup destination. Roon's Settings &gt; Backups screen is where you actually enable scheduled backups; the path here just gives Roon somewhere to write them.</p>
+              <input type="text" id="vol-backup" aria-required="true" aria-describedby="vol-backup-desc"
+                     class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm font-mono text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none">
+              <p class="vol-warning text-xs text-amber-400 mt-1.5 hidden" id="vol-backup-warning" aria-live="polite"></p>
+            </div>
+
+            <!-- Extra volume mounts -->
+            <div id="extra-volumes"></div>
+
+          </div>
+        </section>
+
+        <!-- Options -->
+        <section class="bg-surface-800/60 border border-surface-500/40 rounded-xl p-5 backdrop-blur-sm" aria-labelledby="section-options">
+          <h2 id="section-options" class="text-xs font-semibold uppercase tracking-wider text-slate-200 mb-4">Options</h2>
+          <div class="space-y-0">
+
+            <!-- Timezone -->
+            <div class="py-3 border-b border-surface-500/30">
+              <div class="flex items-start gap-3">
+                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
+                  <input type="checkbox" id="opt-tz" role="switch" class="sr-only peer" checked>
+                  <div class="toggle-track"></div>
+                </label>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <label class="text-sm font-medium text-white cursor-pointer" for="opt-tz">Set timezone</label>
+                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20">Recommended</span>
+                  </div>
+                  <p class="text-xs text-surface-300 mt-0.5">Correct timestamps for logs, last.fm scrobbles, and backup schedules.</p>
+                  <div class="mt-2 overflow-hidden transition-all duration-200" id="tz-input-wrap" style="max-height:60px;opacity:1">
+                    <label for="tz-value" class="sr-only">Timezone</label>
+                    <select id="tz-value"
+                            class="w-full px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none appearance-none"
+                            style="background-image:url('data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%3E%3Cpath%20fill%3D%22%236b7280%22%20d%3D%22M3%204.5l3%203%203-3%22%2F%3E%3C%2Fsvg%3E');background-repeat:no-repeat;background-position:right 12px center;padding-right:36px">
+                      <option value="UTC">UTC</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Logging -->
+            <div class="py-3 border-b border-surface-500/30">
+              <div class="flex items-start gap-3">
+                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
+                  <input type="checkbox" id="opt-logging" role="switch" class="sr-only peer" checked>
+                  <div class="toggle-track"></div>
+                </label>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2 flex-wrap">
+                    <label class="text-sm font-medium text-white cursor-pointer" for="opt-logging">Local logging driver</label>
+                    <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider bg-amber-500/15 text-amber-400 ring-1 ring-amber-500/20">Recommended</span>
+                  </div>
+                  <p class="text-xs text-surface-300 mt-0.5">Prevents unbounded Docker log growth. Uses Docker's local log driver with automatic rotation.</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- CIFS -->
+            <div class="py-3 border-b border-surface-500/30">
+              <div class="flex items-start gap-3">
+                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
+                  <input type="checkbox" id="opt-cifs" role="switch" class="sr-only peer">
+                  <div class="toggle-track"></div>
+                </label>
+                <div class="flex-1 min-w-0">
+                  <label class="text-sm font-medium text-white cursor-pointer" for="opt-cifs">SMB/CIFS mount support</label>
+                  <p class="text-xs text-surface-300 mt-0.5">Grants the capabilities and relaxes the AppArmor profile needed to mount SMB shares. Most users should mount shares on the host instead.</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- USB Audio -->
+            <div class="py-3 border-b border-surface-500/30">
+              <div class="flex items-start gap-3">
+                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
+                  <input type="checkbox" id="opt-usb-audio" role="switch" class="sr-only peer">
+                  <div class="toggle-track"></div>
+                </label>
+                <div class="flex-1 min-w-0">
+                  <label class="text-sm font-medium text-white cursor-pointer" for="opt-usb-audio">USB audio (DAC)</label>
+                  <p class="text-xs text-surface-300 mt-0.5">Pass through USB and ALSA devices for local audio output to a USB DAC connected to the host. Not needed if streaming to network endpoints.</p>
+                </div>
+              </div>
+            </div>
+
+            <!-- HDMI Audio -->
+            <div class="py-3">
+              <div class="flex items-start gap-3">
+                <label class="relative inline-flex items-center cursor-pointer mt-0.5 flex-shrink-0">
+                  <input type="checkbox" id="opt-hdmi-audio" role="switch" class="sr-only peer">
+                  <div class="toggle-track"></div>
+                </label>
+                <div class="flex-1 min-w-0">
+                  <label class="text-sm font-medium text-white cursor-pointer" for="opt-hdmi-audio">HDMI audio</label>
+                  <p class="text-xs text-surface-300 mt-0.5">Pass through GPU and ALSA devices for HDMI audio output. Requires GPU drivers on the host.</p>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </section>
+
+      </div>
+
+      <!-- Right Column: Output -->
+      <div class="lg:col-span-7">
+        <div class="lg:sticky lg:top-24">
+
+          <!-- Output Mode Tabs + Actions -->
+          <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
+            <div class="flex bg-surface-700/80 p-1 rounded-lg ring-1 ring-surface-500/30" role="tablist" aria-label="Output format">
+              <button id="tab-compose" role="tab" aria-selected="true" aria-controls="output" tabindex="0" class="tab-btn">
+                docker-compose.yml
+              </button>
+              <button id="tab-run" role="tab" aria-selected="false" aria-controls="output" tabindex="-1" class="tab-btn">
+                docker run
+              </button>
+            </div>
+            <div class="flex gap-1.5">
+              <button id="btn-copy" data-tooltip="Copy to clipboard" aria-label="Copy to clipboard"
+                      class="inline-flex items-center justify-center w-8 h-8 bg-surface-700/60 hover:bg-surface-600/80 border border-surface-500/40 hover:border-roon-400/50 rounded-lg text-surface-300 hover:text-white transition-all duration-200 active:scale-95">
+                <svg id="icon-copy" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                </svg>
+                <svg id="icon-check" class="w-4 h-4 hidden text-green-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              </button>
+              <button id="btn-download" data-tooltip="Download as file" aria-label="Download file"
+                      class="inline-flex items-center justify-center w-8 h-8 bg-surface-700/60 hover:bg-surface-600/80 border border-surface-500/40 hover:border-roon-400/50 rounded-lg text-surface-300 hover:text-white transition-all duration-200 active:scale-95">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+                  <polyline points="7 10 12 15 17 10"></polyline>
+                  <line x1="12" y1="15" x2="12" y2="3"></line>
+                </svg>
+              </button>
+              <button id="btn-share" data-tooltip="Copy share link" aria-label="Copy share link"
+                      class="inline-flex items-center justify-center w-8 h-8 bg-surface-700/60 hover:bg-surface-600/80 border border-surface-500/40 hover:border-roon-400/50 rounded-lg text-surface-300 hover:text-white transition-all duration-200 active:scale-95">
+                <svg id="icon-share" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                  <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+                  <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+                </svg>
+                <svg id="icon-share-check" class="w-4 h-4 hidden text-green-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              </button>
+              <!-- Red-hover styling visually separates Reset from the other
+                   three actions, signalling that it mutates configuration
+                   rather than exporting or sharing it. -->
+              <button id="btn-reset" data-tooltip="Reset to defaults" aria-label="Reset to defaults"
+                      class="inline-flex items-center justify-center w-8 h-8 bg-surface-700/60 hover:bg-surface-600/80 border border-surface-500/40 hover:border-red-400/50 rounded-lg text-surface-300 hover:text-red-400 transition-all duration-200 active:scale-95">
+                <svg id="icon-reset" class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+                  <polyline points="1 4 1 10 7 10"></polyline>
+                  <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
+                </svg>
+                <svg id="icon-reset-check" class="w-4 h-4 hidden text-green-400" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24" aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              </button>
+            </div>
+          </div>
+
+          <!-- Editor Window -->
+          <div class="rounded-xl overflow-hidden border border-surface-500/40 shadow-2xl shadow-black/30">
+            <!-- Title bar -->
+            <div class="flex items-center justify-between px-4 py-2.5 bg-surface-800 border-b border-surface-500/30">
+              <div class="flex items-center gap-2">
+                <div class="editor-dot bg-[#ff5f57]"></div>
+                <div class="editor-dot bg-[#febc2e]"></div>
+                <div class="editor-dot bg-[#28c840]"></div>
+              </div>
+              <span class="text-xs text-surface-300 font-mono" id="editor-filename">docker-compose.yml</span>
+              <div class="w-14"></div>
+            </div>
+            <!-- Code area -->
+            <div class="bg-surface-950 overflow-x-auto code-scroll" style="min-height:300px">
+              <div class="p-5 font-mono text-[13px] leading-relaxed" id="output" role="tabpanel" aria-labelledby="tab-compose" tabindex="0"></div>
+            </div>
+          </div>
+
+          <!-- Helpful note -->
+          <div class="mt-4 flex items-start gap-2.5 text-xs text-surface-300">
+            <svg class="w-4 h-4 text-surface-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+              <circle cx="12" cy="12" r="10"></circle>
+              <line x1="12" y1="16" x2="12" y2="12"></line>
+              <line x1="12" y1="8" x2="12.01" y2="8"></line>
+            </svg>
+            <p id="helpful-note"></p>
+          </div>
+
+          <!-- role="status" implies aria-live="polite" — correct severity
+               for "Configuration copied" and similar non-urgent feedback. -->
+          <div id="copy-status" class="sr-only" role="status"></div>
+        </div>
+      </div>
+
+    </div>
+
+  </main>
+
+
+<!-- Template cloned by main.ts when the user clicks "Add mount" or when URL
+     state hydrates extra volume rows. Keeping the markup here means the
+     row styling stays alongside the static form elements; no Tailwind
+     class strings live inside JS. -->
+<template id="extra-vol-template">
+  <div class="extra-vol-row border-t border-surface-500/30 pt-4">
+    <div class="flex items-center justify-between mb-2">
+      <span class="text-sm font-medium text-white">Additional mount</span>
+      <button type="button" aria-label="Remove volume mount" data-tooltip="Remove volume mount" data-action="remove"
+              class="inline-flex items-center justify-center w-8 h-8 text-surface-300 hover:text-red-400 transition-colors duration-200 rounded">
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
+          <path d="M18 6L6 18M6 6l12 12"></path>
+        </svg>
+      </button>
+    </div>
+    <div class="flex gap-2">
+      <input type="text" placeholder="/host/path" aria-label="Additional mount — host path"
+             class="extra-vol-host flex-1 px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm font-mono text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none">
+      <span class="self-center text-surface-300 text-sm flex-shrink-0" aria-hidden="true">:</span>
+      <input type="text" placeholder="/container/path" aria-label="Additional mount — container path"
+             class="extra-vol-container flex-1 px-3 py-2 bg-surface-700 border border-surface-500/50 rounded-lg text-sm font-mono text-slate-200 focus:border-roon-400 focus:ring-1 focus:ring-roon-300 transition-colors duration-200 outline-none">
+    </div>
+    <p class="extra-vol-warning text-xs text-amber-400 mt-1.5 hidden" aria-live="polite"></p>
+  </div>
+</template>
+
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>
diff --git a/configurator/package-lock.json b/configurator/package-lock.json
new file mode 100644
index 0000000..6f74dad
--- /dev/null
+++ b/configurator/package-lock.json
@@ -0,0 +1,1829 @@
+{
+  "name": "roon-docker-configurator",
+  "version": "0.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "roon-docker-configurator",
+      "version": "0.0.0",
+      "devDependencies": {
+        "@playwright/test": "^1.59.1",
+        "@tailwindcss/vite": "^4.2.4",
+        "@types/node": "^25.6.0",
+        "ajv": "^8.18.0",
+        "tailwindcss": "^4.2.4",
+        "typescript": "^6.0.3",
+        "vite": "^8.0.9",
+        "vitest": "^4.1.5"
+      }
+    },
+    "node_modules/@emnapi/core": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
+      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/wasi-threads": "1.2.1",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.9.2.tgz",
+      "integrity": "sha512-3U4+MIWHImeyu1wnmVygh5WlgfYDtyf0k8AbLhMFxOipihf6nrWC4syIm/SwEeec0mNSafiiNnMJwbza/Is6Lw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@emnapi/wasi-threads": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
+      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@napi-rs/wasm-runtime": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-1.1.4.tgz",
+      "integrity": "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@tybys/wasm-util": "^0.10.1"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/Brooooooklyn"
+      },
+      "peerDependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1"
+      }
+    },
+    "node_modules/@oxc-project/types": {
+      "version": "0.126.0",
+      "resolved": "https://registry.npmjs.org/@oxc-project/types/-/types-0.126.0.tgz",
+      "integrity": "sha512-oGfVtjAgwQVVpfBrbtk4e1XDyWHRFta6BS3GWVzrF8xYBT2VGQAk39yJS/wFSMrZqoiCU4oghT3Ch0HaHGIHcQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/Boshen"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.59.1.tgz",
+      "integrity": "sha512-PG6q63nQg5c9rIi4/Z5lR5IVF7yU5MqmKaPOe0HSc0O2cX1fPi96sUQu5j7eo4gKCkB2AnNGoWt7y4/Xx3Kcqg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@rolldown/binding-android-arm64": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.0.0-rc.16.tgz",
+      "integrity": "sha512-rhY3k7Bsae9qQfOtph2Pm2jZEA+s8Gmjoz4hhmx70K9iMQ/ddeae+xhRQcM5IuVx5ry1+bGfkvMn7D6MJggVSA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-arm64": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-arm64/-/binding-darwin-arm64-1.0.0-rc.16.tgz",
+      "integrity": "sha512-rNz0yK078yrNn3DrdgN+PKiMOW8HfQ92jQiXxwX8yW899ayV00MLVdaCNeVBhG/TbH3ouYVObo8/yrkiectkcQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-darwin-x64": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-darwin-x64/-/binding-darwin-x64-1.0.0-rc.16.tgz",
+      "integrity": "sha512-r/OmdR00HmD4i79Z//xO06uEPOq5hRXdhw7nzkxQxwSavs3PSHa1ijntdpOiZ2mzOQ3fVVu8C1M19FoNM+dMUQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-freebsd-x64": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-freebsd-x64/-/binding-freebsd-x64-1.0.0-rc.16.tgz",
+      "integrity": "sha512-KcRE5w8h0OnjUatG8pldyD14/CQ5Phs1oxfR+3pKDjboHRo9+MkqQaiIZlZRpsxC15paeXme/I127tUa9TXJ6g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm-gnueabihf": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-1.0.0-rc.16.tgz",
+      "integrity": "sha512-bT0guA1bpxEJ/ZhTRniQf7rNF8ybvXOuWbNIeLABaV5NGjx4EtOWBTSRGWFU9ZWVkPOZ+HNFP8RMcBokBiZ0Kg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-gnu": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-1.0.0-rc.16.tgz",
+      "integrity": "sha512-+tHktCHWV8BDQSjemUqm/Jl/TPk3QObCTIjmdDy/nlupcujZghmKK2962LYrqFpWu+ai01AN/REOH3NEpqvYQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-arm64-musl": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-arm64-musl/-/binding-linux-arm64-musl-1.0.0-rc.16.tgz",
+      "integrity": "sha512-3fPzdREH806oRLxpTWW1Gt4tQHs0TitZFOECB2xzCFLPKnSOy90gwA7P29cksYilFO6XVRY1kzga0cL2nRjKPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-ppc64-gnu": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-ppc64-gnu/-/binding-linux-ppc64-gnu-1.0.0-rc.16.tgz",
+      "integrity": "sha512-EKwI1tSrLs7YVw+JPJT/G2dJQ1jl9qlTTTEG0V2Ok/RdOenRfBw2PQdLPyjhIu58ocdBfP7vIRN/pvMsPxs/AQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-s390x-gnu": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-1.0.0-rc.16.tgz",
+      "integrity": "sha512-Uknladnb3Sxqu6SEcqBldQyJUpk8NleooZEc0MbRBJ4inEhRYWZX0NJu12vNf2mqAq7gsofAxHrGghiUYjhaLQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-gnu": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-gnu/-/binding-linux-x64-gnu-1.0.0-rc.16.tgz",
+      "integrity": "sha512-FIb8+uG49sZBtLTn+zt1AJ20TqVcqWeSIyoVt0or7uAWesgKaHbiBh6OpA/k9v0LTt+PTrb1Lao133kP4uVxkg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-linux-x64-musl": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-linux-x64-musl/-/binding-linux-x64-musl-1.0.0-rc.16.tgz",
+      "integrity": "sha512-RuERhF9/EgWxZEXYWCOaViUWHIboceK4/ivdtQ3R0T44NjLkIIlGIAVAuCddFxsZ7vnRHtNQUrt2vR2n2slB2w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-openharmony-arm64": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-openharmony-arm64/-/binding-openharmony-arm64-1.0.0-rc.16.tgz",
+      "integrity": "sha512-mXcXnvd9GpazCxeUCCnZ2+YF7nut+ZOEbE4GtaiPtyY6AkhZWbK70y1KK3j+RDhjVq5+U8FySkKRb/+w0EeUwA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-wasm32-wasi": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-wasm32-wasi/-/binding-wasm32-wasi-1.0.0-rc.16.tgz",
+      "integrity": "sha512-3Q2KQxnC8IJOLqXmUMoYwyIPZU9hzRbnHaoV3Euz+VVnjZKcY8ktnNP8T9R4/GGQtb27C/UYKABxesKWb8lsvQ==",
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "1.9.2",
+        "@emnapi/runtime": "1.9.2",
+        "@napi-rs/wasm-runtime": "^1.1.4"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-arm64-msvc": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-1.0.0-rc.16.tgz",
+      "integrity": "sha512-tj7XRemQcOcFwv7qhpUxMTBbI5mWMlE4c1Omhg5+h8GuLXzyj8HviYgR+bB2DMDgRqUE+jiDleqSCRjx4aYk/Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/binding-win32-x64-msvc": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/binding-win32-x64-msvc/-/binding-win32-x64-msvc-1.0.0-rc.16.tgz",
+      "integrity": "sha512-PH5DRZT+F4f2PTXRXR8uJxnBq2po/xFtddyabTJVJs/ZYVHqXPEgNIr35IHTEa6bpa0Q8Awg+ymkTaGnKITw4g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      }
+    },
+    "node_modules/@rolldown/pluginutils": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.16.tgz",
+      "integrity": "sha512-45+YtqxLYKDWQouLKCrpIZhke+nXxhsw+qAHVzHDVwttyBlHNBVs2K25rDXrZzhpTp9w1FlAlvweV1H++fdZoA==",
+      "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/@tailwindcss/node": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.2.4.tgz",
+      "integrity": "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "enhanced-resolve": "^5.19.0",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.32.0",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.2.4"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.2.4.tgz",
+      "integrity": "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 20"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.2.4",
+        "@tailwindcss/oxide-darwin-arm64": "4.2.4",
+        "@tailwindcss/oxide-darwin-x64": "4.2.4",
+        "@tailwindcss/oxide-freebsd-x64": "4.2.4",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.2.4",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.2.4",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.2.4",
+        "@tailwindcss/oxide-linux-x64-musl": "4.2.4",
+        "@tailwindcss/oxide-wasm32-wasi": "4.2.4",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.2.4",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.2.4"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.2.4.tgz",
+      "integrity": "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.2.4.tgz",
+      "integrity": "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.2.4.tgz",
+      "integrity": "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.2.4.tgz",
+      "integrity": "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.2.4.tgz",
+      "integrity": "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.2.4.tgz",
+      "integrity": "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.2.4.tgz",
+      "integrity": "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.2.4.tgz",
+      "integrity": "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.2.4.tgz",
+      "integrity": "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.2.4.tgz",
+      "integrity": "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.8.1",
+        "@emnapi/runtime": "^1.8.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.1",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.2.4.tgz",
+      "integrity": "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.2.4.tgz",
+      "integrity": "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 20"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.2.4.tgz",
+      "integrity": "sha512-pCvohwOCspk3ZFn6eJzrrX3g4n2JY73H6MmYC87XfGPyTty4YsCjYTMArRZm/zOI8dIt3+EcrLHAFPe5A4bgtw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.2.4",
+        "@tailwindcss/oxide": "4.2.4",
+        "tailwindcss": "4.2.4"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/@tybys/wasm-util": {
+      "version": "0.10.1",
+      "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",
+      "integrity": "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "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/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/estree": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
+      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.19.0"
+      }
+    },
+    "node_modules/@vitest/expect": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.5.tgz",
+      "integrity": "sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.1.0",
+        "@types/chai": "^5.2.2",
+        "@vitest/spy": "4.1.5",
+        "@vitest/utils": "4.1.5",
+        "chai": "^6.2.2",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/mocker": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.1.5.tgz",
+      "integrity": "sha512-/x2EmFC4mT4NNzqvC3fmesuV97w5FC903KPmey4gsnJiMQ3Be1IlDKVaDaG8iqaLFHqJ2FVEkxZk5VmeLjIItw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/spy": "4.1.5",
+        "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.5",
+      "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.1.5.tgz",
+      "integrity": "sha512-7I3q6l5qr03dVfMX2wCo9FxwSJbPdwKjy2uu/YPpU3wfHvIL4QHwVRp57OfGrDFeUJ8/8QdfBKIV12FTtLn00g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/runner": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.1.5.tgz",
+      "integrity": "sha512-2D+o7Pr82IEO46YPpoA/YU0neeyr6FTerQb5Ro7BUnBuv6NQtT/kmVnczngiMEBhzgqz2UZYl5gArejsyERDSQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/utils": "4.1.5",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/snapshot": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.1.5.tgz",
+      "integrity": "sha512-zypXEt4KH/XgKGPUz4eC2AvErYx0My5hfL8oDb1HzGFpEk1P62bxSohdyOmvz+d9UJwanI68MKwr2EquOaOgMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.5",
+        "@vitest/utils": "4.1.5",
+        "magic-string": "^0.30.21",
+        "pathe": "^2.0.3"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/spy": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.1.5.tgz",
+      "integrity": "sha512-2lNOsh6+R2Idnf1TCZqSwYlKN2E/iDlD8sgU59kYVl+OMDmvldO1VDk39smRfpUNwYpNRVn3w4YfuC7KfbBnkQ==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/@vitest/utils": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.1.5.tgz",
+      "integrity": "sha512-76wdkrmfXfqGjueGgnb45ITPyUi1ycZ4IHgC2bhPDUfWHklY/q3MdLOAB+TF1e6xfl8NxNY0ZYaPCFNWSsw3Ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/pretty-format": "4.1.5",
+        "convert-source-map": "^2.0.0",
+        "tinyrainbow": "^3.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/vitest"
+      }
+    },
+    "node_modules/ajv": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+      "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "fast-uri": "^3.0.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2"
+      },
+      "funding": {
+        "type": "github",
+        "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/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/convert-source-map": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
+      "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.21.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.21.0.tgz",
+      "integrity": "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/es-module-lexer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
+      "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "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/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",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+      "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fastify"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fastify"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/lightningcss": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.32.0.tgz",
+      "integrity": "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.32.0",
+        "lightningcss-darwin-arm64": "1.32.0",
+        "lightningcss-darwin-x64": "1.32.0",
+        "lightningcss-freebsd-x64": "1.32.0",
+        "lightningcss-linux-arm-gnueabihf": "1.32.0",
+        "lightningcss-linux-arm64-gnu": "1.32.0",
+        "lightningcss-linux-arm64-musl": "1.32.0",
+        "lightningcss-linux-x64-gnu": "1.32.0",
+        "lightningcss-linux-x64-musl": "1.32.0",
+        "lightningcss-win32-arm64-msvc": "1.32.0",
+        "lightningcss-win32-x64-msvc": "1.32.0"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.32.0.tgz",
+      "integrity": "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.32.0.tgz",
+      "integrity": "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.32.0.tgz",
+      "integrity": "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.32.0.tgz",
+      "integrity": "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.32.0.tgz",
+      "integrity": "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.32.0.tgz",
+      "integrity": "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.32.0.tgz",
+      "integrity": "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.32.0.tgz",
+      "integrity": "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "glibc"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.32.0.tgz",
+      "integrity": "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "libc": [
+        "musl"
+      ],
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.32.0.tgz",
+      "integrity": "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.32.0",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.32.0.tgz",
+      "integrity": "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "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/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "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/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",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.59.1.tgz",
+      "integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.59.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.59.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.59.1.tgz",
+      "integrity": "sha512-HBV/RJg81z5BiiZ9yPzIiClYV/QMsDCKUyogwH9p3MCP6IYjUFu/MActgYAvK0oWyV9NlwM3GLBjADyWgydVyg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.10",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.10.tgz",
+      "integrity": "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rolldown": {
+      "version": "1.0.0-rc.16",
+      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.16.tgz",
+      "integrity": "sha512-rzi5WqKzEZw3SooTt7cgm4eqIoujPIyGcJNGFL7iPEuajQw7vxMHUkXylu4/vhCkJGXsgRmxqMKXUpT6FEgl0g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@oxc-project/types": "=0.126.0",
+        "@rolldown/pluginutils": "1.0.0-rc.16"
+      },
+      "bin": {
+        "rolldown": "bin/cli.mjs"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "optionalDependencies": {
+        "@rolldown/binding-android-arm64": "1.0.0-rc.16",
+        "@rolldown/binding-darwin-arm64": "1.0.0-rc.16",
+        "@rolldown/binding-darwin-x64": "1.0.0-rc.16",
+        "@rolldown/binding-freebsd-x64": "1.0.0-rc.16",
+        "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.16",
+        "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.16",
+        "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.16",
+        "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.16",
+        "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.16",
+        "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.16",
+        "@rolldown/binding-linux-x64-musl": "1.0.0-rc.16",
+        "@rolldown/binding-openharmony-arm64": "1.0.0-rc.16",
+        "@rolldown/binding-wasm32-wasi": "1.0.0-rc.16",
+        "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.16",
+        "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.16"
+      }
+    },
+    "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",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "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/tailwindcss": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.2.4.tgz",
+      "integrity": "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.3.tgz",
+      "integrity": "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "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.1",
+      "resolved": "https://registry.npmjs.org/tinyexec/-/tinyexec-1.1.1.tgz",
+      "integrity": "sha512-VKS/ZaQhhkKFMANmAOhhXVoIfBXblQxGX1myCQ2faQrfmobMftXeJPcZGp0gS07ocvGJWDLZGyOZDadDBqYIJg==",
+      "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",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.4"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "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/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD",
+      "optional": true
+    },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.19.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
+      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/vite": {
+      "version": "8.0.9",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-8.0.9.tgz",
+      "integrity": "sha512-t7g7GVRpMXjNpa67HaVWI/8BWtdVIQPCL2WoozXXA7LBGEFK4AkkKkHx2hAQf5x1GZSlcmEDPkVLSGahxnEEZw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lightningcss": "^1.32.0",
+        "picomatch": "^4.0.4",
+        "postcss": "^8.5.10",
+        "rolldown": "1.0.0-rc.16",
+        "tinyglobby": "^0.2.16"
+      },
+      "bin": {
+        "vite": "bin/vite.js"
+      },
+      "engines": {
+        "node": "^20.19.0 || >=22.12.0"
+      },
+      "funding": {
+        "url": "https://github.com/vitejs/vite?sponsor=1"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.3"
+      },
+      "peerDependencies": {
+        "@types/node": "^20.19.0 || >=22.12.0",
+        "@vitejs/devtools": "^0.1.0",
+        "esbuild": "^0.27.0 || ^0.28.0",
+        "jiti": ">=1.21.0",
+        "less": "^4.0.0",
+        "sass": "^1.70.0",
+        "sass-embedded": "^1.70.0",
+        "stylus": ">=0.54.8",
+        "sugarss": "^5.0.0",
+        "terser": "^5.16.0",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "@types/node": {
+          "optional": true
+        },
+        "@vitejs/devtools": {
+          "optional": true
+        },
+        "esbuild": {
+          "optional": true
+        },
+        "jiti": {
+          "optional": true
+        },
+        "less": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        },
+        "sass-embedded": {
+          "optional": true
+        },
+        "stylus": {
+          "optional": true
+        },
+        "sugarss": {
+          "optional": true
+        },
+        "terser": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vitest": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.1.5.tgz",
+      "integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@vitest/expect": "4.1.5",
+        "@vitest/mocker": "4.1.5",
+        "@vitest/pretty-format": "4.1.5",
+        "@vitest/runner": "4.1.5",
+        "@vitest/snapshot": "4.1.5",
+        "@vitest/spy": "4.1.5",
+        "@vitest/utils": "4.1.5",
+        "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.5",
+        "@vitest/browser-preview": "4.1.5",
+        "@vitest/browser-webdriverio": "4.1.5",
+        "@vitest/coverage-istanbul": "4.1.5",
+        "@vitest/coverage-v8": "4.1.5",
+        "@vitest/ui": "4.1.5",
+        "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/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"
+      }
+    }
+  }
+}
diff --git a/configurator/package.json b/configurator/package.json
new file mode 100644
index 0000000..13728be
--- /dev/null
+++ b/configurator/package.json
@@ -0,0 +1,26 @@
+{
+  "name": "roon-docker-configurator",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "description": "Static web configurator for generating docker-compose.yml and docker run commands for the official RoonServer Docker image.",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "ajv": "^8.18.0",
+    "tailwindcss": "^4.2.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
+    "vitest": "^4.1.5"
+  }
+}
diff --git a/configurator/playwright.config.ts b/configurator/playwright.config.ts
new file mode 100644
index 0000000..e6aac04
--- /dev/null
+++ b/configurator/playwright.config.ts
@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+// Playwright runs against the built site served by `vite preview` so tests
+// exercise the same artifact CI uploads to Pages.
+const PORT = 4173;
+const BASE_URL = `http://localhost:${PORT}`;
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: process.env.CI ? 'github' : 'list',
+  use: {
+    baseURL: BASE_URL,
+    trace: 'on-first-retry',
+  },
+  webServer: {
+    command: `npm run build && npm run preview -- --port ${PORT} --strictPort`,
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+  ],
+});
diff --git a/configurator/public/platforms/custom.json b/configurator/public/platforms/custom.json
new file mode 100644
index 0000000..6ae7daf
--- /dev/null
+++ b/configurator/public/platforms/custom.json
@@ -0,0 +1,9 @@
+{
+  "id": "custom",
+  "label": "Custom",
+  "roon": "/path/to/roon",
+  "music": "/path/to/music",
+  "backup": "/path/to/roon-backups",
+  "prefix": "",
+  "hint": "Placeholder paths — replace with real host paths before running."
+}
diff --git a/configurator/public/platforms/index.json b/configurator/public/platforms/index.json
new file mode 100644
index 0000000..b7f9cfa
--- /dev/null
+++ b/configurator/public/platforms/index.json
@@ -0,0 +1 @@
+["qnap", "synology", "unraid", "truenas", "linux", "custom"]
diff --git a/configurator/public/platforms/linux.json b/configurator/public/platforms/linux.json
new file mode 100644
index 0000000..0bef20f
--- /dev/null
+++ b/configurator/public/platforms/linux.json
@@ -0,0 +1,9 @@
+{
+  "id": "linux",
+  "label": "Linux",
+  "roon": "/var/lib/roon",
+  "music": "/mnt/music",
+  "backup": "/var/backups/roon",
+  "prefix": "/mnt/",
+  "hint": "Paths set to standard Linux conventions (FHS: /var/lib for service state, /var/backups for backups, /mnt for mounted media)."
+}
diff --git a/configurator/public/platforms/qnap.json b/configurator/public/platforms/qnap.json
new file mode 100644
index 0000000..a203c87
--- /dev/null
+++ b/configurator/public/platforms/qnap.json
@@ -0,0 +1,10 @@
+{
+  "id": "qnap",
+  "label": "QNAP",
+  "roon": "/share/Container/roon",
+  "music": "/share/Music",
+  "backup": "/share/Container/roon-backups",
+  "prefix": "/share/",
+  "hint": "Paths set for QNAP. Container Station stores app data under /share/Container/.",
+  "rootPattern": "^/share/"
+}
diff --git a/configurator/public/platforms/schema.json b/configurator/public/platforms/schema.json
new file mode 100644
index 0000000..3c91448
--- /dev/null
+++ b/configurator/public/platforms/schema.json
@@ -0,0 +1,58 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "platform.schema.json",
+  "title": "Configurator platform preset",
+  "description": "Shape for a platform file under public/platforms/. Every field is validated by the test suite so a malformed contribution fails CI before merge.",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["id", "label", "roon", "music", "backup", "prefix", "hint"],
+  "properties": {
+    "id": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$",
+      "description": "Lowercase identifier; must match the filename minus .json extension."
+    },
+    "label": {
+      "type": "string",
+      "minLength": 1,
+      "description": "Display text in the platform dropdown and inline warnings."
+    },
+    "roon": {
+      "type": "string",
+      "pattern": "^/",
+      "description": "Default host path for the /Roon container mount."
+    },
+    "music": {
+      "type": "string",
+      "pattern": "^/",
+      "description": "Default host path for the /Music container mount."
+    },
+    "backup": {
+      "type": "string",
+      "pattern": "^/",
+      "description": "Default host path for the /RoonBackups container mount."
+    },
+    "prefix": {
+      "type": "string",
+      "description": "Placeholder prefix for the add-mount input. Empty string allowed for platforms with no standard root."
+    },
+    "hint": {
+      "type": "string",
+      "minLength": 1,
+      "description": "One-sentence help text shown under the platform dropdown."
+    },
+    "rootPattern": {
+      "type": "string",
+      "description": "Optional. JavaScript regex string; host paths that don't match trigger a soft warning."
+    },
+    "hidden": {
+      "type": "boolean",
+      "description": "Optional. true keeps the platform loaded but omits it from the dropdown."
+    },
+    "userOverride": {
+      "type": "string",
+      "pattern": "^\\d+(:\\d+)?$",
+      "description": "Optional. UID or UID:GID string (e.g. \"0:0\") forced on the emitted container output when this platform is selected. Use for platforms that default to a non-root UID when Roon's image needs root (TrueNAS Apps defaults to UID 568)."
+    }
+  }
+}
diff --git a/configurator/public/platforms/synology.json b/configurator/public/platforms/synology.json
new file mode 100644
index 0000000..f66cbf3
--- /dev/null
+++ b/configurator/public/platforms/synology.json
@@ -0,0 +1,10 @@
+{
+  "id": "synology",
+  "label": "Synology",
+  "roon": "/volume1/docker/roon",
+  "music": "/volume1/music",
+  "backup": "/volume1/roon-backups",
+  "prefix": "/volume1/",
+  "hint": "Paths set for Synology DSM. Adjust volume1 if needed.",
+  "rootPattern": "^/volume\\d+/"
+}
diff --git a/configurator/public/platforms/truenas.json b/configurator/public/platforms/truenas.json
new file mode 100644
index 0000000..eb4d685
--- /dev/null
+++ b/configurator/public/platforms/truenas.json
@@ -0,0 +1,11 @@
+{
+  "id": "truenas",
+  "label": "TrueNAS",
+  "roon": "/mnt/tank/apps/roon",
+  "music": "/mnt/tank/media/music",
+  "backup": "/mnt/tank/backups/roon",
+  "prefix": "/mnt/tank/",
+  "hint": "TrueNAS 24.10+ (native Docker) required. Replace 'tank' with your pool name (Storage → Pools) and create dedicated datasets for these paths — TrueNAS paths are case-sensitive.",
+  "rootPattern": "^/mnt/",
+  "userOverride": "0:0"
+}
diff --git a/configurator/public/platforms/unraid.json b/configurator/public/platforms/unraid.json
new file mode 100644
index 0000000..36eadc2
--- /dev/null
+++ b/configurator/public/platforms/unraid.json
@@ -0,0 +1,10 @@
+{
+  "id": "unraid",
+  "label": "Unraid",
+  "roon": "/mnt/user/appdata/roon",
+  "music": "/mnt/user/music",
+  "backup": "/mnt/user/backups/roon",
+  "prefix": "/mnt/user/",
+  "hint": "Set the 'appdata' share to Primary=cache, Secondary=None (cache-only) so Mover never touches the Roon database mid-write. For extra speed, advanced users can map the Roon folder to /mnt/cache/appdata/roon to bypass FUSE. Note: the official Roon image does not use PUID/PGID.",
+  "rootPattern": "^/mnt/"
+}
diff --git a/configurator/public/roon-moon.svg b/configurator/public/roon-moon.svg
new file mode 100644
index 0000000..fc2fd4f
--- /dev/null
+++ b/configurator/public/roon-moon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9997 24C5.37243 23.9998 0 18.6273 0 12C0 5.37268 5.37243 0.000154372 11.9997 0C12.5301 0.000155039 12.96 0.431982 12.96 0.959358V23.0406C12.96 23.5704 12.5299 23.9998 11.9997 24ZM14.64 6.36036C14.64 5.89624 15.017 5.52 15.48 5.52C15.9439 5.52 16.32 5.89389 16.32 6.36036V17.6396C16.32 18.1038 15.943 18.48 15.48 18.48C15.0161 18.48 14.64 18.1061 14.64 17.6396V6.36036ZM18 3.72317C18 3.2575 18.377 2.88 18.84 2.88C19.3039 2.88 19.68 3.25678 19.68 3.72317V20.2768C19.68 20.7425 19.303 21.12 18.84 21.12C18.3761 21.12 18 20.7432 18 20.2768V3.72317ZM21.36 9.72155C21.36 9.25678 21.737 8.88 22.2 8.88C22.6639 8.88 23.04 9.25629 23.04 9.72155V14.2784C23.04 14.7432 22.663 15.12 22.2 15.12C21.7361 15.12 21.36 14.7437 21.36 14.2784V9.72155Z" fill="currentColor"/>
+</svg>
diff --git a/configurator/src/generator.test.ts b/configurator/src/generator.test.ts
new file mode 100644
index 0000000..1894a20
--- /dev/null
+++ b/configurator/src/generator.test.ts
@@ -0,0 +1,432 @@
+import { describe, it, expect } from 'vitest';
+import { generateCompose, generateRun } from './generator';
+import type { Config } from './types';
+
+function baseConfig(overrides: Partial<Config> = {}): Config {
+  return {
+    image: 'ghcr.io/roonlabs/roonserver:latest',
+    branch: 'production',
+    volRoon: '/host/roon',
+    volMusic: '/host/music',
+    volBackup: '/host/backups',
+    extraVolumes: [],
+    tz: false,
+    tzValue: 'UTC',
+    logging: false,
+    cifs: false,
+    usbAudio: false,
+    hdmiAudio: false,
+    ...overrides,
+  };
+}
+
+describe('generateCompose', () => {
+  it('produces a minimal valid compose file with just the required fields', () => {
+    const out = generateCompose(baseConfig()).join('\n');
+    expect(out).toContain('services:');
+    expect(out).toContain('  roonserver:');
+    expect(out).toContain('network_mode: host');
+    expect(out).toContain('- /host/roon:/Roon');
+    expect(out).toContain('- /host/music:/Music');
+    expect(out).toContain('- /host/backups:/RoonBackups');
+    expect(out).toContain('restart: unless-stopped');
+  });
+
+  it('always emits the environment block with ROON_INSTALL_BRANCH', () => {
+    // Regression guard: production must be explicit so earlyaccess→production
+    // downgrades work. The entrypoint switches branches only when the env var
+    // is set AND differs from what's installed. Leaving production implicit
+    // strands users on earlyaccess after a "downgrade" attempt.
+    const out = generateCompose(baseConfig()).join('\n');
+    expect(out).toContain('environment:');
+    expect(out).toContain('- ROON_INSTALL_BRANCH=production');
+  });
+
+  it('emits TZ when tz is enabled', () => {
+    const out = generateCompose(baseConfig({ tz: true, tzValue: 'America/Denver' })).join('\n');
+    expect(out).toContain('environment:');
+    expect(out).toContain('- TZ=America/Denver');
+  });
+
+  it('emits ROON_INSTALL_BRANCH=production explicitly (downgrade from earlyaccess works)', () => {
+    // Scenario: user was running earlyaccess, selects production in the
+    // generator, redeploys. The entrypoint only switches branches if
+    // ROON_INSTALL_BRANCH is SET and differs from the installed VERSION.
+    // If production is implicit (omitted), the entrypoint falls back to
+    // "keep whatever is installed" and the user stays on earlyaccess.
+    const compose = generateCompose(baseConfig({ branch: 'production' })).join('\n');
+    const run = generateRun(baseConfig({ branch: 'production' })).join('\n');
+    expect(compose).toContain('- ROON_INSTALL_BRANCH=production');
+    expect(run).toContain('-e ROON_INSTALL_BRANCH=production');
+  });
+
+  it('emits ROON_INSTALL_BRANCH when branch is earlyaccess', () => {
+    const out = generateCompose(baseConfig({ branch: 'earlyaccess' })).join('\n');
+    expect(out).toContain('- ROON_INSTALL_BRANCH=earlyaccess');
+  });
+
+  it('emits both TZ and branch env vars in a single environment block, branch first', () => {
+    const out = generateCompose(
+      baseConfig({ branch: 'earlyaccess', tz: true, tzValue: 'UTC' }),
+    ).join('\n');
+    const envIdx = out.indexOf('environment:');
+    const branchIdx = out.indexOf('- ROON_INSTALL_BRANCH=earlyaccess');
+    const tzIdx = out.indexOf('- TZ=UTC');
+    expect(envIdx).toBeGreaterThan(-1);
+    expect(branchIdx).toBeGreaterThan(envIdx);
+    expect(tzIdx).toBeGreaterThan(branchIdx);
+    // Single environment block, not two separate ones.
+    expect(out.match(/environment:/g)?.length ?? 0).toBe(1);
+  });
+
+  it('appends extra volumes after the required volumes, in order', () => {
+    const out = generateCompose(
+      baseConfig({
+        extraVolumes: [
+          { host: '/host/extra1', container: '/Music/a' },
+          { host: '/host/extra2', container: '/Music/b' },
+        ],
+      }),
+    );
+    // Filter by path-like lines only — both env and volumes share the
+    // "      - " prefix, so match the leading slash to isolate volume entries.
+    const vols = out.filter((l) => /^ {6}- \//.test(l));
+    expect(vols).toEqual([
+      '      - /host/roon:/Roon',
+      '      - /host/music:/Music',
+      '      - /host/backups:/RoonBackups',
+      '      - /host/extra1:/Music/a',
+      '      - /host/extra2:/Music/b',
+    ]);
+  });
+
+  it('emits cap_add + security_opt (AppArmor + SELinux) when cifs is enabled', () => {
+    // Regression guard: two bugs deep — the option must add both the
+    // capabilities AND the LSM opt-outs; LSM and cap checks are
+    // independent gatekeepers on the mount syscall. Also emits BOTH
+    // AppArmor and SELinux opt-outs since the two LSMs are mutually
+    // exclusive and we don't know which one the host runs.
+    const out = generateCompose(baseConfig({ cifs: true })).join('\n');
+    expect(out).toContain('cap_add:');
+    expect(out).toContain('- SYS_ADMIN');
+    expect(out).toContain('- DAC_READ_SEARCH');
+    expect(out).toContain('security_opt:');
+    expect(out).toContain('- apparmor:unconfined');
+    expect(out).toContain('- label:disable');
+  });
+
+  it('does not emit cap_add or security_opt when cifs is disabled', () => {
+    const out = generateCompose(baseConfig({ cifs: false })).join('\n');
+    expect(out).not.toContain('cap_add:');
+    expect(out).not.toContain('security_opt:');
+    expect(out).not.toContain('apparmor:unconfined');
+    expect(out).not.toContain('label:disable');
+  });
+
+  it('adds /run/udev mount only when usbAudio is enabled', () => {
+    const usb = generateCompose(baseConfig({ usbAudio: true })).join('\n');
+    expect(usb).toContain('- /run/udev:/run/udev:ro');
+
+    const hdmi = generateCompose(baseConfig({ hdmiAudio: true })).join('\n');
+    expect(hdmi).not.toContain('- /run/udev:/run/udev:ro');
+  });
+
+  it('adds devices + group_add for USB audio', () => {
+    const out = generateCompose(baseConfig({ usbAudio: true })).join('\n');
+    expect(out).toContain('devices:');
+    expect(out).toContain('- /dev/snd:/dev/snd');
+    expect(out).toContain('- /dev/bus/usb:/dev/bus/usb');
+    expect(out).toContain('group_add:');
+    expect(out).toContain('- audio');
+  });
+
+  it('adds /dev/dri for HDMI audio', () => {
+    const out = generateCompose(baseConfig({ hdmiAudio: true })).join('\n');
+    expect(out).toContain('- /dev/dri:/dev/dri');
+  });
+
+  it('merges USB and HDMI audio under a single devices block', () => {
+    const out = generateCompose(baseConfig({ usbAudio: true, hdmiAudio: true }));
+    const devicesCount = out.filter((l) => l === '    devices:').length;
+    expect(devicesCount).toBe(1);
+    const joined = out.join('\n');
+    expect(joined).toContain('- /dev/bus/usb:/dev/bus/usb');
+    expect(joined).toContain('- /dev/dri:/dev/dri');
+  });
+
+  it('adds local logging driver when logging is enabled', () => {
+    const on = generateCompose(baseConfig({ logging: true })).join('\n');
+    expect(on).toContain('logging:');
+    expect(on).toContain('driver: local');
+
+    const off = generateCompose(baseConfig({ logging: false })).join('\n');
+    expect(off).not.toContain('logging:');
+  });
+
+  it('produces stable output for the all-options-on config', () => {
+    // Snapshot-style full check so any accidental reordering is caught.
+    const out = generateCompose(
+      baseConfig({
+        branch: 'earlyaccess',
+        tz: true,
+        tzValue: 'Europe/London',
+        logging: true,
+        cifs: true,
+        usbAudio: true,
+        hdmiAudio: true,
+        extraVolumes: [{ host: '/x', container: '/y' }],
+      }),
+    );
+    expect(out).toMatchInlineSnapshot(`
+      [
+        "services:",
+        "  roonserver:",
+        "    image: ghcr.io/roonlabs/roonserver:latest",
+        "    container_name: roonserver",
+        "    network_mode: host",
+        "    environment:",
+        "      - ROON_INSTALL_BRANCH=earlyaccess",
+        "      - TZ=Europe/London",
+        "    volumes:",
+        "      - /host/roon:/Roon",
+        "      - /host/music:/Music",
+        "      - /host/backups:/RoonBackups",
+        "      - /x:/y",
+        "      - /run/udev:/run/udev:ro",
+        "    restart: unless-stopped",
+        "    cap_add:",
+        "      - SYS_ADMIN",
+        "      - DAC_READ_SEARCH",
+        "    security_opt:",
+        "      - apparmor:unconfined",
+        "      - label:disable",
+        "    devices:",
+        "      - /dev/snd:/dev/snd",
+        "      - /dev/bus/usb:/dev/bus/usb",
+        "      - /dev/dri:/dev/dri",
+        "    group_add:",
+        "      - audio",
+        "    logging:",
+        "      driver: local",
+      ]
+    `);
+  });
+});
+
+describe('generateRun', () => {
+  it('produces a minimal docker run command', () => {
+    const out = generateRun(baseConfig()).join('\n');
+    expect(out).toContain('docker run -d \\');
+    expect(out).toContain('--name roonserver \\');
+    expect(out).toContain('--network host \\');
+    expect(out).toContain('-v /host/roon:/Roon \\');
+    expect(out).toContain('-v /host/music:/Music \\');
+    expect(out).toContain('-v /host/backups:/RoonBackups \\');
+    expect(out).toContain('ghcr.io/roonlabs/roonserver:latest');
+  });
+
+  it('last line is the image name, not a backslash-terminated flag', () => {
+    const out = generateRun(baseConfig());
+    const last = out[out.length - 1];
+    expect(last).toBe('  ghcr.io/roonlabs/roonserver:latest');
+    expect(last?.endsWith('\\')).toBe(false);
+  });
+
+  it('all non-final lines end with " \\" for shell continuation', () => {
+    const out = generateRun(baseConfig());
+    for (let i = 0; i < out.length - 1; i++) {
+      const line = out[i]!;
+      expect(line.endsWith(' \\')).toBe(true);
+    }
+  });
+
+  it('emits --security-opt {apparmor,label}=... (equals form, not colon) when cifs is on', () => {
+    // docker run uses `=`, compose uses `:` — easy to get wrong. Both
+    // AppArmor and SELinux opt-outs are emitted; one of them will no-op
+    // depending on which LSM is active on the host.
+    const out = generateRun(baseConfig({ cifs: true })).join('\n');
+    expect(out).toContain('--cap-add SYS_ADMIN \\');
+    expect(out).toContain('--cap-add DAC_READ_SEARCH \\');
+    expect(out).toContain('--security-opt apparmor=unconfined \\');
+    expect(out).toContain('--security-opt label=disable \\');
+    expect(out).not.toContain('apparmor:unconfined');
+    expect(out).not.toContain('label:disable');
+  });
+
+  it('emits -e ROON_INSTALL_BRANCH for earlyaccess', () => {
+    const out = generateRun(baseConfig({ branch: 'earlyaccess' })).join('\n');
+    expect(out).toContain('-e ROON_INSTALL_BRANCH=earlyaccess \\');
+  });
+
+  it('emits -e TZ when tz is enabled', () => {
+    const out = generateRun(baseConfig({ tz: true, tzValue: 'America/Chicago' })).join('\n');
+    expect(out).toContain('-e TZ=America/Chicago \\');
+  });
+
+  it('emits --log-driver local when logging is enabled', () => {
+    const out = generateRun(baseConfig({ logging: true })).join('\n');
+    expect(out).toContain('--log-driver local \\');
+  });
+
+  it('preserves extra-volume ordering after required volumes', () => {
+    const out = generateRun(
+      baseConfig({
+        extraVolumes: [{ host: '/extra', container: '/Music/extra' }],
+      }),
+    );
+    const volLines = out.filter((l) => l.includes(' -v '));
+    expect(volLines).toEqual([
+      '  -v /host/roon:/Roon \\',
+      '  -v /host/music:/Music \\',
+      '  -v /host/backups:/RoonBackups \\',
+      '  -v /extra:/Music/extra \\',
+    ]);
+  });
+
+  it('passes through --device and --group-add for audio options', () => {
+    const usb = generateRun(baseConfig({ usbAudio: true })).join('\n');
+    expect(usb).toContain('--device /dev/snd:/dev/snd \\');
+    expect(usb).toContain('--device /dev/bus/usb:/dev/bus/usb \\');
+    expect(usb).toContain('-v /run/udev:/run/udev:ro \\');
+    expect(usb).toContain('--group-add audio \\');
+
+    const hdmi = generateRun(baseConfig({ hdmiAudio: true })).join('\n');
+    expect(hdmi).toContain('--device /dev/dri:/dev/dri \\');
+    expect(hdmi).not.toContain('--device /dev/bus/usb:/dev/bus/usb');
+  });
+});
+
+describe('Block ordering invariants', () => {
+  // Explicit ordering assertions so a reordering regression gives a
+  // clearer failure message than the all-options snapshot diff does.
+  it('emits cap_add before security_opt before devices before group_add before logging', () => {
+    const out = generateCompose(
+      baseConfig({ cifs: true, usbAudio: true, logging: true }),
+    ).join('\n');
+    const order = ['cap_add:', 'security_opt:', 'devices:', 'group_add:', 'logging:'];
+    let lastIdx = -1;
+    for (const key of order) {
+      const idx = out.indexOf(key);
+      expect(idx).toBeGreaterThan(lastIdx);
+      lastIdx = idx;
+    }
+  });
+
+  it('compose emits environment block with ROON_INSTALL_BRANCH when tz is off', () => {
+    const out = generateCompose(baseConfig({ branch: 'earlyaccess', tz: false })).join('\n');
+    expect(out).toContain('environment:');
+    expect(out).toContain('- ROON_INSTALL_BRANCH=earlyaccess');
+    expect(out).not.toContain('TZ=');
+  });
+
+  it('docker run emits --restart between --log-driver and --cap-add when both apply', () => {
+    const out = generateRun(baseConfig({ logging: true, cifs: true }));
+    const joined = out.join('\n');
+    const logIdx = joined.indexOf('--log-driver');
+    const restartIdx = joined.indexOf('--restart');
+    const capIdx = joined.indexOf('--cap-add');
+    expect(logIdx).toBeGreaterThan(-1);
+    expect(restartIdx).toBeGreaterThan(logIdx);
+    expect(capIdx).toBeGreaterThan(restartIdx);
+  });
+});
+
+describe('Platform-driven user override', () => {
+  // Context: TrueNAS Apps forces UID 568 on containers by default, but
+  // Roon's image needs to run as root. When the TrueNAS platform is
+  // selected, the configurator emits `user: "0:0"` so the deployed
+  // container actually runs as root. Other platforms don't need this —
+  // they respect the image's default USER directive (which is root).
+  it('emits `user: "0:0"` in compose between container_name and network_mode', () => {
+    const out = generateCompose(baseConfig({ user: '0:0' }));
+    const joined = out.join('\n');
+    expect(joined).toContain('user: "0:0"');
+    const userIdx = out.findIndex((l) => l.includes('user:'));
+    const containerNameIdx = out.findIndex((l) => l.includes('container_name:'));
+    const networkModeIdx = out.findIndex((l) => l.includes('network_mode:'));
+    expect(userIdx).toBeGreaterThan(containerNameIdx);
+    expect(userIdx).toBeLessThan(networkModeIdx);
+  });
+
+  it('omits user line when config.user is unset', () => {
+    const out = generateCompose(baseConfig()).join('\n');
+    expect(out).not.toMatch(/^\s*user:/m);
+  });
+
+  it('emits --user flag in docker run when user is set', () => {
+    const out = generateRun(baseConfig({ user: '0:0' })).join('\n');
+    expect(out).toContain('--user 0:0');
+  });
+
+  it('omits --user flag in docker run when user is unset', () => {
+    const out = generateRun(baseConfig()).join('\n');
+    expect(out).not.toContain('--user');
+  });
+
+  it('quotes non-numeric user values safely in YAML', () => {
+    // Defense in depth — even though platform userOverride is validated to
+    // a numeric UID:GID pattern, the generator shouldn't emit raw values.
+    const out = generateCompose(baseConfig({ user: 'weird user' })).join('\n');
+    expect(out).toContain('"weird user"');
+  });
+});
+
+describe('Output safety: paths with unusual characters are escaped', () => {
+  // These tests are the security net for the clipboard/share-link injection
+  // vector: a crafted path must not be able to produce a shell or YAML
+  // payload that breaks out of its volume spec.
+  it('single-quotes shell arguments containing spaces', () => {
+    const out = generateRun(baseConfig({ volMusic: '/mnt/My Music' })).join('\n');
+    expect(out).toContain("-v '/mnt/My Music:/Music' \\");
+  });
+
+  it('single-quotes shell arguments with shell metacharacters', () => {
+    const out = generateRun(baseConfig({ volMusic: '/tmp; rm -rf /' })).join('\n');
+    // The metacharacter-carrying path lands inside a single-quoted token
+    // and cannot escape it.
+    expect(out).toContain("'/tmp; rm -rf /:/Music'");
+    expect(out).not.toMatch(/-v \/tmp; rm/);
+  });
+
+  it('escapes embedded single quotes using the ' + "'\\''" + ' pattern', () => {
+    const out = generateRun(baseConfig({ volMusic: "/mnt/Sam's Music" })).join('\n');
+    expect(out).toContain("-v '/mnt/Sam'\\''s Music:/Music' \\");
+  });
+
+  it('double-quotes YAML scalars containing spaces', () => {
+    const out = generateCompose(baseConfig({ volMusic: '/mnt/My Music' })).join('\n');
+    expect(out).toContain('- "/mnt/My Music:/Music"');
+  });
+
+  it('escapes YAML special characters in double-quoted scalars', () => {
+    const out = generateCompose(baseConfig({ volMusic: '/mnt/"weird"' })).join('\n');
+    expect(out).toContain('\\"');
+  });
+
+  it('leaves simple paths unquoted in both formats (no whitespace noise)', () => {
+    const compose = generateCompose(baseConfig()).join('\n');
+    const run = generateRun(baseConfig()).join('\n');
+    expect(compose).toContain('- /host/roon:/Roon');
+    expect(compose).not.toContain('"/host/roon:/Roon"');
+    expect(run).toContain('-v /host/roon:/Roon');
+    expect(run).not.toContain("'/host/roon:/Roon'");
+  });
+
+  it('escapes newlines in YAML so a crafted path cannot break out of its scalar', () => {
+    // Regression guard for the review finding: validation rejects control
+    // chars at the input layer, but the generator is called on every
+    // keystroke to render the preview. A \n inside a double-quoted YAML
+    // scalar is a literal break and would inject a fake volume entry —
+    // escape to \\n so every line in the output stays inside its list item.
+    const out = generateCompose(baseConfig({ volMusic: '/mnt/music\n- /etc/shadow:/evil' })).join('\n');
+    expect(out).toContain('\\n');
+    expect(out).not.toMatch(/\n\s*- \/etc\/shadow/);
+  });
+
+  it('escapes tabs, carriage returns, and other control chars in YAML', () => {
+    const out = generateCompose(baseConfig({ volMusic: '/a\tb\rc\x00d' })).join('\n');
+    expect(out).toContain('\\t');
+    expect(out).toContain('\\r');
+    expect(out).toContain('\\x00');
+  });
+});
diff --git a/configurator/src/generator.ts b/configurator/src/generator.ts
new file mode 100644
index 0000000..144833c
--- /dev/null
+++ b/configurator/src/generator.ts
@@ -0,0 +1,230 @@
+import type { Config } from './types';
+
+// The generator has two concerns:
+//   1. WHAT goes in the container (volumes, env, caps, devices). This is
+//      derived from Config and identical for both output formats.
+//   2. HOW to format it (compose YAML vs. shell). Each format has its own
+//      quoting/escaping rules but the underlying spec is the same.
+//
+// We split (1) into buildSpec() and (2) into renderCompose()/renderRun(),
+// so any change to which mounts/caps/devices apply happens in one place.
+
+type VolumeMount = {
+  host: string;
+  container: string;
+  readOnly?: boolean;
+};
+
+type ContainerSpec = {
+  image: string;
+  containerName: string;
+  environment: readonly string[];
+  volumes: readonly VolumeMount[];
+  capAdd: readonly string[];
+  securityOpt: readonly string[];
+  devices: readonly string[];
+  groupAdd: readonly string[];
+  // Object shape (not a string enum) so a second driver can slot in
+  // without rippling through the renderers — they already read .driver.
+  logging: { driver: string } | null;
+  // Optional UID:GID override; null when the image's default USER should
+  // apply. null rather than undefined so the renderer's check stays uniform
+  // with logging above.
+  user: string | null;
+};
+
+function buildSpec(cfg: Config): ContainerSpec {
+  const env: string[] = [];
+  // Always emit the branch — even for production — so the entrypoint's
+  // branch-change detection can trigger a downgrade (earlyaccess → production).
+  // Without this, an explicit "production" selection still leaves
+  // ROON_INSTALL_BRANCH unset in the container, and the entrypoint falls
+  // back to "whatever is installed" rather than switching.
+  env.push('ROON_INSTALL_BRANCH=' + cfg.branch);
+  if (cfg.tz) env.push('TZ=' + cfg.tzValue);
+
+  const volumes: VolumeMount[] = [
+    { host: cfg.volRoon, container: '/Roon' },
+    { host: cfg.volMusic, container: '/Music' },
+    { host: cfg.volBackup, container: '/RoonBackups' },
+    ...cfg.extraVolumes.map((v) => ({ host: v.host, container: v.container })),
+  ];
+  if (cfg.usbAudio) {
+    volumes.push({ host: '/run/udev', container: '/run/udev', readOnly: true });
+  }
+
+  const capAdd: string[] = [];
+  const securityOpt: string[] = [];
+  if (cfg.cifs) {
+    capAdd.push('SYS_ADMIN', 'DAC_READ_SEARCH');
+    // AppArmor and SELinux are mutually exclusive LSMs — only one is
+    // active on any given host. Emitting both opt-outs means the output
+    // works on Ubuntu/Debian/DSM/QTS (AppArmor) and RHEL/Fedora/Rocky
+    // (SELinux) without users having to know which LSM their host runs;
+    // Docker silently ignores the inapplicable one.
+    securityOpt.push('apparmor:unconfined');
+    securityOpt.push('label:disable');
+  }
+
+  const devices: string[] = [];
+  const groupAdd: string[] = [];
+  if (cfg.usbAudio || cfg.hdmiAudio) {
+    devices.push('/dev/snd:/dev/snd');
+    if (cfg.usbAudio) devices.push('/dev/bus/usb:/dev/bus/usb');
+    if (cfg.hdmiAudio) devices.push('/dev/dri:/dev/dri');
+    groupAdd.push('audio');
+  }
+
+  return {
+    image: cfg.image,
+    containerName: 'roonserver',
+    environment: env,
+    volumes,
+    capAdd,
+    securityOpt,
+    devices,
+    groupAdd,
+    logging: cfg.logging ? { driver: 'local' } : null,
+    user: cfg.user ?? null,
+  };
+}
+
+// --- Path quoting ---
+//
+// Paths flow unsanitized from user inputs and URL params into the clipboard.
+// Without quoting, a crafted path like `/tmp; rm -rf /` would produce a
+// `docker run ... -v /tmp; rm -rf /:/Roon` string that a victim could paste
+// straight into a terminal. Always-quote when necessary makes injection
+// structurally impossible; we err toward unquoted for the common case so
+// simple paths stay readable.
+
+function needsYamlQuote(s: string): boolean {
+  // Quote if the string contains `: ` (colon-space, which YAML treats as a
+  // mapping separator), any whitespace (including newlines), any control
+  // character, or characters with YAML semantics. Also quote strings that
+  // start with characters YAML reserves for flow style or special scalars.
+  if (/[\s"#'\\]/.test(s)) return true;
+  if (/[\x00-\x1f\x7f]/.test(s)) return true;
+  if (s.includes(': ')) return true;
+  if (/^[-?!|>*&[{@`%]/.test(s)) return true;
+  return false;
+}
+
+function yamlQuote(s: string): string {
+  // Order matters: escape backslash before quotes. Control characters must
+  // be escaped too — a raw \n inside a double-quoted scalar is a literal
+  // line break that ends the scalar, letting an attacker-crafted path
+  // inject fake entries into the surrounding list. Validation normally
+  // rejects these at the input layer; this is defense-in-depth.
+  return (
+    '"' +
+    s
+      .replace(/\\/g, '\\\\')
+      .replace(/"/g, '\\"')
+      .replace(/\n/g, '\\n')
+      .replace(/\r/g, '\\r')
+      .replace(/\t/g, '\\t')
+      .replace(/[\x00-\x1f\x7f]/g, (c) => '\\x' + c.charCodeAt(0).toString(16).padStart(2, '0')) +
+    '"'
+  );
+}
+
+function yamlScalar(s: string): string {
+  return needsYamlQuote(s) ? yamlQuote(s) : s;
+}
+
+// Conservative allowlist: characters that are unambiguously safe as bare
+// shell tokens. Anything outside gets single-quoted.
+const SHELL_SAFE = /^[A-Za-z0-9_./:=+@%-]+$/;
+
+function shellToken(s: string): string {
+  if (SHELL_SAFE.test(s)) return s;
+  // Single-quote and escape embedded single quotes using `'\''` sequence.
+  return "'" + s.replace(/'/g, "'\\''") + "'";
+}
+
+function volumeString(v: VolumeMount): string {
+  const base = v.host + ':' + v.container;
+  return v.readOnly ? base + ':ro' : base;
+}
+
+// --- Renderers ---
+
+function renderCompose(spec: ContainerSpec): string[] {
+  const lines: string[] = [];
+  lines.push('services:');
+  lines.push('  ' + spec.containerName + ':');
+  lines.push('    image: ' + spec.image);
+  lines.push('    container_name: ' + spec.containerName);
+  // Always quote user to avoid YAML 1.1 sexagesimal interpretation —
+  // unquoted "0:0" can be read as a base-60 number by some parsers.
+  if (spec.user) lines.push('    user: ' + yamlQuote(spec.user));
+  lines.push('    network_mode: host');
+
+  if (spec.environment.length) {
+    lines.push('    environment:');
+    for (const v of spec.environment) lines.push('      - ' + yamlScalar(v));
+  }
+
+  lines.push('    volumes:');
+  for (const v of spec.volumes) lines.push('      - ' + yamlScalar(volumeString(v)));
+
+  lines.push('    restart: unless-stopped');
+
+  if (spec.capAdd.length) {
+    lines.push('    cap_add:');
+    for (const c of spec.capAdd) lines.push('      - ' + yamlScalar(c));
+  }
+  if (spec.securityOpt.length) {
+    lines.push('    security_opt:');
+    for (const o of spec.securityOpt) lines.push('      - ' + yamlScalar(o));
+  }
+
+  if (spec.devices.length) {
+    lines.push('    devices:');
+    for (const d of spec.devices) lines.push('      - ' + yamlScalar(d));
+    lines.push('    group_add:');
+    for (const g of spec.groupAdd) lines.push('      - ' + yamlScalar(g));
+  }
+
+  if (spec.logging) {
+    lines.push('    logging:');
+    lines.push('      driver: ' + spec.logging.driver);
+  }
+
+  return lines;
+}
+
+function renderRun(spec: ContainerSpec): string[] {
+  const parts: string[] = [];
+  parts.push('docker run -d');
+  parts.push('  --name ' + shellToken(spec.containerName));
+  parts.push('  --network host');
+  if (spec.user) parts.push('  --user ' + shellToken(spec.user));
+
+  for (const v of spec.environment) parts.push('  -e ' + shellToken(v));
+  for (const v of spec.volumes) parts.push('  -v ' + shellToken(volumeString(v)));
+
+  if (spec.logging) parts.push('  --log-driver ' + shellToken(spec.logging.driver));
+  parts.push('  --restart unless-stopped');
+
+  for (const c of spec.capAdd) parts.push('  --cap-add ' + shellToken(c));
+  // docker run uses `=` between the security-opt key and value; compose uses
+  // `:`. The capAdd/securityOpt ordering is identical to compose's.
+  for (const o of spec.securityOpt) parts.push('  --security-opt ' + shellToken(o.replace(/:/, '=')));
+  for (const d of spec.devices) parts.push('  --device ' + shellToken(d));
+  if (spec.groupAdd.length) parts.push('  --group-add ' + shellToken(spec.groupAdd.join(',')));
+
+  parts.push('  ' + shellToken(spec.image));
+
+  // Shell line-continuation: every line except the last gets " \".
+  return parts.map((line, i) => (i === parts.length - 1 ? line : line + ' \\'));
+}
+
+export function generateCompose(cfg: Config): string[] {
+  return renderCompose(buildSpec(cfg));
+}
+
+export function generateRun(cfg: Config): string[] {
+  return renderRun(buildSpec(cfg));
+}
diff --git a/configurator/src/highlight.ts b/configurator/src/highlight.ts
new file mode 100644
index 0000000..e621437
--- /dev/null
+++ b/configurator/src/highlight.ts
@@ -0,0 +1,170 @@
+// DOM-based syntax highlighting — no innerHTML, so user-supplied paths
+// cannot introduce script injection through the generated output.
+
+// Line-number gutter. Was #3b4155 which failed WCAG AA at ~1.8:1 against
+// the editor's #0d131d background — line numbers are text (users reference
+// them when pointing at specific lines in the output), so they need 4.5:1.
+// #707ea6 gives ~4.6:1 while still reading as de-emphasized gutter metadata.
+const GUTTER_STYLE =
+  'color:#707ea6;user-select:none;text-align:right;padding-right:1.5em;vertical-align:top;white-space:nowrap;width:1%;';
+
+// Builds the <table>/<tbody> scaffolding shared by both highlighters and
+// hands back a callback that appends a new row (numbered gutter + empty
+// code cell) per line. Each highlighter populates the code cell.
+function codeTable(
+  lines: readonly string[],
+  container: HTMLElement,
+): (visit: (tdCode: HTMLTableCellElement, line: string, index: number) => void) => void {
+  container.textContent = '';
+  const table = document.createElement('table');
+  table.style.cssText = 'border-collapse:collapse;width:100%';
+  const tbody = document.createElement('tbody');
+  table.appendChild(tbody);
+  container.appendChild(table);
+
+  return (visit) => {
+    lines.forEach((line, i) => {
+      const tr = document.createElement('tr');
+
+      const tdNum = document.createElement('td');
+      tdNum.style.cssText = GUTTER_STYLE;
+      tdNum.textContent = String(i + 1);
+      tr.appendChild(tdNum);
+
+      const tdCode = document.createElement('td');
+      tdCode.style.cssText = 'white-space:pre;';
+      tr.appendChild(tdCode);
+      tbody.appendChild(tr);
+
+      visit(tdCode, line, i);
+    });
+  };
+}
+
+export function highlightYaml(lines: readonly string[], container: HTMLElement): void {
+  codeTable(lines, container)((tdCode, line) => {
+
+    const trimmed = line.trimStart();
+    const indent = line.length - trimmed.length;
+    const indentStr = line.substring(0, indent);
+
+    if (trimmed.startsWith('#')) {
+      const cs = document.createElement('span');
+      cs.className = 'hl-comment';
+      cs.textContent = line;
+      tdCode.appendChild(cs);
+    } else if (trimmed.startsWith('- ')) {
+      const valText = trimmed.substring(2);
+      tdCode.appendChild(document.createTextNode(indentStr));
+      const dash = document.createElement('span');
+      dash.className = 'hl-punct';
+      dash.textContent = '- ';
+      tdCode.appendChild(dash);
+      const val = document.createElement('span');
+      val.className = 'hl-string';
+      val.textContent = valText;
+      tdCode.appendChild(val);
+    } else if (trimmed.indexOf(':') > 0) {
+      const colonIdx = trimmed.indexOf(':');
+      const key = trimmed.substring(0, colonIdx);
+      const rest = trimmed.substring(colonIdx + 1);
+
+      tdCode.appendChild(document.createTextNode(indentStr));
+      const keySpan = document.createElement('span');
+      keySpan.className = 'hl-key';
+      keySpan.textContent = key;
+      tdCode.appendChild(keySpan);
+      const colonSpan = document.createElement('span');
+      colonSpan.className = 'hl-punct';
+      colonSpan.textContent = ':';
+      tdCode.appendChild(colonSpan);
+
+      if (rest.trim()) {
+        const valSpan = document.createElement('span');
+        if (/^\s*\d+[a-z]*\s*$/.test(rest)) {
+          valSpan.className = 'hl-number';
+        } else if (/^\s*(true|false|yes|no)\s*$/i.test(rest)) {
+          valSpan.className = 'hl-keyword';
+        } else {
+          valSpan.className = 'hl-string';
+        }
+        valSpan.textContent = ' ' + rest.trim();
+        tdCode.appendChild(valSpan);
+      }
+    } else {
+      tdCode.appendChild(document.createTextNode(line));
+    }
+  });
+}
+
+export function highlightShell(lines: readonly string[], container: HTMLElement): void {
+  // Output may contain multiple command blocks separated by blank lines.
+  // Each block's first line is a command; subsequent lines are flags until
+  // one that doesn't end with a backslash (terminal line, e.g. image name).
+  let expectCommand = true;
+
+  codeTable(lines, container)((tdCode, line) => {
+    const trimmed = line.trim();
+
+    if (trimmed === '') {
+      tdCode.appendChild(document.createTextNode(' '));
+      expectCommand = true;
+    } else if (expectCommand) {
+      const cmdParts = trimmed.split(/\s+/);
+      const cmdSpan = document.createElement('span');
+      cmdSpan.className = 'hl-cmd';
+      cmdSpan.textContent = cmdParts[0] ?? '';
+      tdCode.appendChild(cmdSpan);
+      for (let k = 1; k < cmdParts.length; k++) {
+        tdCode.appendChild(document.createTextNode(' '));
+        const fs = document.createElement('span');
+        const part = cmdParts[k] ?? '';
+        if (part === '\\') {
+          fs.className = 'hl-punct';
+        } else if (k === 1) {
+          fs.className = 'hl-key';
+        } else {
+          fs.className = 'hl-flag';
+        }
+        fs.textContent = part;
+        tdCode.appendChild(fs);
+      }
+      expectCommand = !trimmed.endsWith('\\');
+    } else if (!trimmed.endsWith('\\')) {
+      const indentImg = line.length - line.trimStart().length;
+      tdCode.appendChild(document.createTextNode(line.substring(0, indentImg)));
+      const imgSpan = document.createElement('span');
+      imgSpan.className = 'hl-string';
+      imgSpan.textContent = trimmed;
+      tdCode.appendChild(imgSpan);
+      expectCommand = true;
+    } else {
+      const indentFlag = line.length - line.trimStart().length;
+      tdCode.appendChild(document.createTextNode(line.substring(0, indentFlag)));
+
+      const withoutBackslash = trimmed.replace(/ \\$/, '');
+      const flagMatch = withoutBackslash.match(/^(--?[\w-]+)\s*(.*)/);
+      if (flagMatch) {
+        const fSpan = document.createElement('span');
+        fSpan.className = 'hl-flag';
+        fSpan.textContent = flagMatch[1] ?? '';
+        tdCode.appendChild(fSpan);
+        if (flagMatch[2]) {
+          tdCode.appendChild(document.createTextNode(' '));
+          const vSpan = document.createElement('span');
+          vSpan.className = 'hl-string';
+          vSpan.textContent = flagMatch[2];
+          tdCode.appendChild(vSpan);
+        }
+      } else {
+        tdCode.appendChild(document.createTextNode(withoutBackslash));
+      }
+
+      tdCode.appendChild(document.createTextNode(' '));
+      const bs = document.createElement('span');
+      bs.className = 'hl-punct';
+      bs.textContent = '\\';
+      tdCode.appendChild(bs);
+    }
+  });
+}
diff --git a/configurator/src/main.ts b/configurator/src/main.ts
new file mode 100644
index 0000000..9e5ff30
--- /dev/null
+++ b/configurator/src/main.ts
@@ -0,0 +1,770 @@
+import './styles.css';
+import { generateCompose, generateRun } from './generator';
+import { loadPlatforms, validateVolumePath, validateContainerPath, firstError } from './platforms';
+import { highlightYaml, highlightShell } from './highlight';
+import { encode as encodeUrl, decode as decodeUrl, type StateOverride } from './urlState';
+import { saveState, loadState, clearState } from './persistence';
+import {
+  BOOLEAN_OPTIONS,
+  MAIN_VOLUME_OPTIONS,
+  type BooleanConfigKey,
+  type MainVolumeConfigKey,
+} from './options';
+import type { Branch, Config, ExtraVolume, PlatformMap, ValidationIssue } from './types';
+
+const IMAGE = 'ghcr.io/roonlabs/roonserver:latest';
+
+type Tab = 'compose' | 'run';
+let currentTab: Tab = 'compose';
+let platforms: PlatformMap = {};
+
+// Typed DOM lookup helper — throws clearly if an expected element is missing
+// during init, which is simpler to debug than silent null propagation.
+function $<T extends HTMLElement = HTMLElement>(id: string): T {
+  const el = document.getElementById(id);
+  if (!el) throw new Error('Missing element: #' + id);
+  return el as T;
+}
+
+function currentPlatform(): string {
+  return $<HTMLSelectElement>('platform-select').value;
+}
+
+// In-memory record of which warning elements currently hold an error-severity
+// issue. Keeping this alongside the DOM writes means `hasErrors()` doesn't
+// have to query the document — a missed refresh can't silently unblock
+// export, and removed extras rows just need their entry dropped explicitly.
+const errorSources = new Set<HTMLElement>();
+
+// Applies a validation issue (or clears it) to a warning element, color-coding
+// by severity and updating the central error-source set. Renders the symbolic
+// prefix (⛔/⚠) as an aria-hidden span so screen readers hear "Error:" /
+// "Warning:" rather than "no entry sign" / "warning sign".
+function applyValidation(el: HTMLElement, issue: ValidationIssue | null): void {
+  if (!issue) {
+    el.classList.add('hidden');
+    delete el.dataset.severity;
+    errorSources.delete(el);
+    return;
+  }
+  const isError = issue.severity === 'error';
+  el.textContent = '';
+  const symbol = document.createElement('span');
+  symbol.setAttribute('aria-hidden', 'true');
+  symbol.textContent = (isError ? '⛔' : '⚠') + ' ';
+  const srLabel = document.createElement('span');
+  srLabel.className = 'sr-only';
+  srLabel.textContent = isError ? 'Error: ' : 'Warning: ';
+  el.append(symbol, srLabel, document.createTextNode(issue.message));
+  el.classList.remove('hidden');
+  // Using red-300 (not 400) for error text so it clears 4.5:1 against the
+  // dark card backgrounds. Amber-400 already has ample contrast.
+  el.classList.toggle('text-red-300', isError);
+  el.classList.toggle('text-amber-400', !isError);
+  el.dataset.severity = issue.severity;
+  if (isError) {
+    errorSources.add(el);
+  } else {
+    errorSources.delete(el);
+  }
+}
+
+function forgetValidationSource(el: HTMLElement): void {
+  errorSources.delete(el);
+}
+
+function otherContainerPaths(currentRow: Element): string[] {
+  const paths: string[] = [];
+  document.querySelectorAll<HTMLElement>('.extra-vol-row').forEach((row) => {
+    if (row === currentRow) return;
+    const input = row.querySelector<HTMLInputElement>('.extra-vol-container');
+    const val = input?.value.trim();
+    if (val) paths.push(val);
+  });
+  return paths;
+}
+
+function updateExtraVolumeWarning(row: Element): void {
+  const hostInput = row.querySelector<HTMLInputElement>('.extra-vol-host');
+  const containerInput = row.querySelector<HTMLInputElement>('.extra-vol-container');
+  const warning = row.querySelector<HTMLElement>('.extra-vol-warning');
+  if (!hostInput || !containerInput || !warning) return;
+
+  const host = hostInput.value.trim();
+  const container = containerInput.value.trim();
+
+  // An empty (or half-filled) extras row is always an error — it can't
+  // contribute a valid mount and clutters the form otherwise. The user's
+  // out is the × button on the row. Flag aria-invalid on the specific
+  // input that's the problem.
+  if (!host) {
+    applyValidation(warning, { severity: 'error', message: 'Host path is required.' });
+    hostInput.setAttribute('aria-invalid', 'true');
+    containerInput.setAttribute('aria-invalid', 'false');
+    return;
+  }
+  if (!container) {
+    applyValidation(warning, { severity: 'error', message: 'Container path is required.' });
+    hostInput.setAttribute('aria-invalid', 'false');
+    containerInput.setAttribute('aria-invalid', 'true');
+    return;
+  }
+
+  const hostIssue = validateVolumePath(platforms, currentPlatform(), host);
+  const containerIssue = validateContainerPath(container, otherContainerPaths(row));
+  applyValidation(warning, firstError(hostIssue, containerIssue));
+  hostInput.setAttribute('aria-invalid', String(hostIssue?.severity === 'error'));
+  containerInput.setAttribute('aria-invalid', String(containerIssue?.severity === 'error'));
+}
+
+function refreshExtraVolumeWarnings(): void {
+  document.querySelectorAll('.extra-vol-row').forEach(updateExtraVolumeWarning);
+}
+
+function updateMainVolumeWarning(inputId: string): void {
+  const input = $<HTMLInputElement>(inputId);
+  const warning = $(inputId + '-warning');
+  const value = input.value.trim();
+  const issue = value
+    ? validateVolumePath(platforms, currentPlatform(), value)
+    : { severity: 'error' as const, message: 'Path is required.' };
+  applyValidation(warning, issue);
+  // Keep screen readers informed: aria-invalid announces validity on focus,
+  // and adding the warning id to aria-describedby means the SR reads the
+  // active error when the user refocuses the field later (the aria-live
+  // announcement on first change isn't enough).
+  const descId = inputId + '-desc';
+  const warningId = inputId + '-warning';
+  const hasError = issue?.severity === 'error';
+  input.setAttribute('aria-invalid', String(hasError));
+  input.setAttribute('aria-describedby', issue ? descId + ' ' + warningId : descId);
+}
+
+function refreshMainVolumeWarnings(): void {
+  for (const o of MAIN_VOLUME_OPTIONS) updateMainVolumeWarning(o.inputId);
+}
+
+function hasVisibleErrors(): boolean {
+  return errorSources.size > 0;
+}
+
+// Cache the tooltips declared in the HTML so we can restore them verbatim
+// when Copy/Download re-enable. Reading from the DOM (instead of hardcoding
+// the strings here) keeps index.html the single source of truth. Populated
+// lazily on first refreshActions() call, once elBtnCopy/elBtnDownload exist.
+const defaultTooltips = new WeakMap<HTMLElement, string>();
+
+function refreshActions(): void {
+  const blocked = hasVisibleErrors();
+  const reason = blocked ? 'Fix the errors above before copying or downloading.' : null;
+  [elBtnCopy, elBtnDownload].forEach((btn) => {
+    // Seed the cache on first observation — can't do it at module-load time
+    // because the element refs are declared after this function.
+    if (!defaultTooltips.has(btn)) {
+      defaultTooltips.set(btn, btn.getAttribute('data-tooltip') ?? '');
+    }
+    btn.disabled = blocked;
+    btn.classList.toggle('opacity-40', blocked);
+    btn.classList.toggle('cursor-not-allowed', blocked);
+    if (reason) {
+      btn.setAttribute('data-tooltip', reason);
+      btn.setAttribute('aria-disabled', 'true');
+    } else {
+      btn.setAttribute('data-tooltip', defaultTooltips.get(btn) ?? '');
+      btn.removeAttribute('aria-disabled');
+    }
+  });
+}
+
+const elOutput = $('output');
+const elBtnCopy = $<HTMLButtonElement>('btn-copy');
+const elIconCopy = $('icon-copy');
+const elIconCheck = $('icon-check');
+const elBtnDownload = $<HTMLButtonElement>('btn-download');
+const elBtnShare = $<HTMLButtonElement>('btn-share');
+const elIconShare = $('icon-share');
+const elIconShareCheck = $('icon-share-check');
+const elBtnReset = $<HTMLButtonElement>('btn-reset');
+const elIconReset = $('icon-reset');
+const elIconResetCheck = $('icon-reset-check');
+const elTabCompose = $<HTMLButtonElement>('tab-compose');
+const elTabRun = $<HTMLButtonElement>('tab-run');
+const elEditorFilename = $('editor-filename');
+const elPlatformHint = $('platform-hint');
+const elHelpfulNote = $('helpful-note');
+const elTzInputWrap = $('tz-input-wrap');
+const elCopyStatus = $('copy-status');
+
+function getVal(id: string): string {
+  return $<HTMLInputElement | HTMLSelectElement>(id).value;
+}
+
+function isChecked(id: string): boolean {
+  return $<HTMLInputElement>(id).checked;
+}
+
+function setVal(id: string, v: string): void {
+  $<HTMLInputElement | HTMLSelectElement>(id).value = v;
+}
+
+function readConfig(): Config {
+  const extras: ExtraVolume[] = [];
+  document.querySelectorAll<HTMLElement>('.extra-vol-row').forEach((row) => {
+    const hostInput = row.querySelector<HTMLInputElement>('.extra-vol-host');
+    const containerInput = row.querySelector<HTMLInputElement>('.extra-vol-container');
+    if (!hostInput || !containerInput) return;
+    const hostPath = hostInput.value.trim();
+    const containerPath = containerInput.value.trim();
+    if (hostPath && containerPath) {
+      extras.push({ host: hostPath, container: containerPath });
+    }
+  });
+
+  // Narrow instead of casting: an unexpected option value would silently
+  // construct an invalid Config if we just asserted `as Branch`.
+  const rawBranch = getVal('branch-select');
+  const branch: Branch = rawBranch === 'earlyaccess' ? 'earlyaccess' : 'production';
+
+  // Boolean toggles are collected via the options table so adding a new
+  // one doesn't require editing this function.
+  const booleanFields = Object.fromEntries(
+    BOOLEAN_OPTIONS.map((o) => [o.configKey, isChecked(o.inputId)]),
+  ) as Record<BooleanConfigKey, boolean>;
+
+  // Platform-driven user override (e.g. TrueNAS forces UID 568 by default;
+  // Roon's image needs root). Conditional spread so the key is absent
+  // entirely when the platform doesn't need it — required by
+  // exactOptionalPropertyTypes.
+  const userOverride = platforms[currentPlatform()]?.userOverride;
+
+  return {
+    image: IMAGE,
+    branch,
+    extraVolumes: extras,
+    tzValue: getVal('tz-value'),
+    ...booleanFields,
+    ...(userOverride ? { user: userOverride } : {}),
+    // Main volumes come from the options table. Empty fields surface as
+    // validation errors that block export; there's no fallback, so the
+    // preview reflects the real state rather than silently substituting
+    // a plausible-looking but wrong path.
+    ...(Object.fromEntries(
+      MAIN_VOLUME_OPTIONS.map((o) => [o.configKey, getVal(o.inputId)]),
+    ) as Record<MainVolumeConfigKey, string>),
+  };
+}
+
+function updateNote(): void {
+  elHelpfulNote.textContent = '';
+  const code = document.createElement('code');
+  code.className = 'text-roon-300 bg-roon-900/30 px-1 py-0.5 rounded font-mono';
+  if (currentTab === 'compose') {
+    elHelpfulNote.appendChild(document.createTextNode('Uses '));
+    code.textContent = 'network_mode: host';
+    elHelpfulNote.appendChild(code);
+    elHelpfulNote.appendChild(
+      document.createTextNode(" for Roon's device discovery (SSDP/mDNS). No port mapping needed."),
+    );
+  } else {
+    elHelpfulNote.appendChild(document.createTextNode('Paste this command into your terminal. Uses '));
+    code.textContent = '--network host';
+    elHelpfulNote.appendChild(code);
+    elHelpfulNote.appendChild(document.createTextNode(" for Roon's device discovery."));
+  }
+}
+
+// Pure-UI concern: collapse the timezone selector when the toggle is off.
+// Lives outside generate() so generate() stays focused on rendering the
+// output and syncing the URL — changes to tz-wrap behavior don't touch
+// the render pipeline.
+function syncTzVisibility(): void {
+  const on = isChecked('opt-tz');
+  elTzInputWrap.style.maxHeight = on ? '60px' : '0';
+  elTzInputWrap.style.opacity = on ? '1' : '0';
+}
+
+function generate(): void {
+  const cfg = readConfig();
+
+  if (currentTab === 'compose') {
+    highlightYaml(generateCompose(cfg), elOutput);
+  } else {
+    highlightShell(generateRun(cfg), elOutput);
+  }
+
+  refreshActions();
+  updateUrl(cfg);
+}
+
+// Turned on once init finishes applying URL-driven overrides — prevents the
+// transient empty state (before overrides are applied) from clearing the URL.
+let urlUpdatesEnabled = false;
+// The default platform id is the first visible entry in the manifest.
+// Populated during init once the manifest has loaded.
+let defaultPlatformId = '';
+
+function updateUrl(cfg: Config): void {
+  if (!urlUpdatesEnabled || !defaultPlatformId) return;
+  const params = encodeUrl(cfg, currentPlatform(), platforms, defaultPlatformId);
+  const qs = params.toString();
+  const newUrl = qs ? window.location.pathname + '?' + qs : window.location.pathname;
+  history.replaceState(null, '', newUrl);
+  // Mirror the URL into localStorage so a returning visitor lands back in
+  // their last-known state even without the share URL.
+  saveState(params);
+}
+
+function applyUrlOverride(override: StateOverride): void {
+  // Platform already applied before this call (it needs to be set before
+  // setPlatform() populates the defaults); everything else goes here.
+  if (override.branch === 'earlyaccess') {
+    $<HTMLSelectElement>('branch-select').value = 'earlyaccess';
+  }
+  if (override.tzValue) {
+    const tzSelect = $<HTMLSelectElement>('tz-value');
+    // Ensure the option exists; otherwise setting .value is a no-op.
+    if (!Array.from(tzSelect.options).some((o) => o.value === override.tzValue)) {
+      const opt = document.createElement('option');
+      opt.value = override.tzValue;
+      opt.textContent = override.tzValue + ' (from URL)';
+      tzSelect.appendChild(opt);
+    }
+    tzSelect.value = override.tzValue;
+  }
+
+  // Boolean toggles — any key present in the override wins over the default.
+  for (const o of BOOLEAN_OPTIONS) {
+    const v = override[o.configKey];
+    if (v !== undefined) $<HTMLInputElement>(o.inputId).checked = v;
+  }
+
+  for (const o of MAIN_VOLUME_OPTIONS) {
+    const v = override[o.configKey];
+    if (v !== undefined) setVal(o.inputId, v);
+  }
+
+  if (override.extraVolumes) {
+    for (const v of override.extraVolumes) {
+      addExtraVolumeRow({ host: v.host, container: v.container });
+    }
+  }
+
+  refreshMainVolumeWarnings();
+  refreshExtraVolumeWarnings();
+}
+
+function getRawText(): string {
+  const lines: string[] = [];
+  elOutput.querySelectorAll('tr').forEach((row) => {
+    const cells = row.querySelectorAll('td');
+    const codeCell = cells[1];
+    if (codeCell) lines.push(codeCell.textContent ?? '');
+  });
+  return lines.join('\n');
+}
+
+// Set by detectDesktopOS() on pages loaded in macOS/Windows browsers.
+// Rendered as a separate paragraph after the platform hint so both
+// messages stay visible (and visually distinct) across platform changes.
+let desktopHostNote = '';
+
+function setPlatform(platformId: string): void {
+  const p = platforms[platformId];
+  if (!p) return;
+  for (const o of MAIN_VOLUME_OPTIONS) setVal(o.inputId, p[o.platformKey]);
+
+  elPlatformHint.textContent = '';
+  const hintLine = document.createElement('p');
+  hintLine.textContent = p.hint;
+  elPlatformHint.appendChild(hintLine);
+  if (desktopHostNote) {
+    const noteLine = document.createElement('p');
+    noteLine.className = 'text-amber-400';
+    noteLine.textContent = desktopHostNote;
+    elPlatformHint.appendChild(noteLine);
+  }
+
+  refreshMainVolumeWarnings();
+  generate();
+}
+
+function setTab(tab: Tab, focusTab = false): void {
+  currentTab = tab;
+  const isCompose = tab === 'compose';
+  // Visuals live in CSS keyed off `aria-selected`; JS only toggles state.
+  elTabCompose.setAttribute('aria-selected', String(isCompose));
+  elTabRun.setAttribute('aria-selected', String(!isCompose));
+  // Roving tabindex: only the active tab receives Tab focus, matching the
+  // WAI-ARIA authoring-practices tabs pattern.
+  elTabCompose.tabIndex = isCompose ? 0 : -1;
+  elTabRun.tabIndex = isCompose ? -1 : 0;
+  // Associate the tabpanel with whichever tab is active.
+  elOutput.setAttribute('aria-labelledby', isCompose ? 'tab-compose' : 'tab-run');
+  elEditorFilename.textContent = isCompose ? 'docker-compose.yml' : 'terminal';
+  elBtnDownload.style.display = '';
+  if (focusTab) (isCompose ? elTabCompose : elTabRun).focus();
+  updateNote();
+  generate();
+}
+
+// Flashes a button green for ~2 seconds and announces an action via the
+// shared copy-status aria-live region. The pattern is identical across
+// every toolbar action (Copy, Share, Reset); only the icons and the status
+// message differ.
+function flashButton(
+  button: HTMLButtonElement,
+  defaultIcon: HTMLElement,
+  checkIcon: HTMLElement,
+  statusMessage: string,
+): void {
+  button.style.borderColor = '#22c55e';
+  defaultIcon.classList.add('hidden');
+  checkIcon.classList.remove('hidden');
+  elCopyStatus.textContent = statusMessage;
+  setTimeout(() => {
+    button.style.borderColor = '';
+    defaultIcon.classList.remove('hidden');
+    checkIcon.classList.add('hidden');
+    elCopyStatus.textContent = '';
+  }, 2000);
+}
+
+function copyToClipboard(): void {
+  void navigator.clipboard.writeText(getRawText()).then(() => {
+    flashButton(elBtnCopy, elIconCopy, elIconCheck, 'Configuration copied to clipboard.');
+  });
+}
+
+function copyShareLink(): void {
+  void navigator.clipboard.writeText(window.location.href).then(() => {
+    flashButton(elBtnShare, elIconShare, elIconShareCheck, 'Share link copied to clipboard.');
+  });
+}
+
+function downloadFile(): void {
+  const text = getRawText();
+  const blob = new Blob([text], { type: 'text/yaml' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = currentTab === 'compose' ? 'docker-compose.yml' : 'docker-run.sh';
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+let extraRowCounter = 0;
+
+function addExtraVolumeRow(initial?: { host?: string; container?: string }): void {
+  const template = $<HTMLTemplateElement>('extra-vol-template');
+  const fragment = template.content.cloneNode(true) as DocumentFragment;
+  const row = fragment.querySelector<HTMLElement>('.extra-vol-row')!;
+  const removeBtn = row.querySelector<HTMLButtonElement>('[data-action="remove"]')!;
+  const hostInput = row.querySelector<HTMLInputElement>('.extra-vol-host')!;
+  const containerInput = row.querySelector<HTMLInputElement>('.extra-vol-container')!;
+  const warning = row.querySelector<HTMLElement>('.extra-vol-warning')!;
+
+  // Unique warning id so each input can reference its row's warning via
+  // aria-describedby — screen readers will re-announce the error when the
+  // user refocuses the field, not just at the moment it appears.
+  const warningId = 'extra-vol-warning-' + ++extraRowCounter;
+  warning.id = warningId;
+  hostInput.setAttribute('aria-describedby', warningId);
+  containerInput.setAttribute('aria-describedby', warningId);
+
+  hostInput.value = initial?.host ?? platforms[currentPlatform()]?.prefix ?? '';
+  containerInput.value = initial?.container ?? '';
+
+  removeBtn.addEventListener('click', () => {
+    // Drop the row's warning from the error-source set before the DOM node
+    // goes away; otherwise hasVisibleErrors() would count it forever.
+    forgetValidationSource(warning);
+    // Move focus off the row before removing it, otherwise focus falls
+    // back to <body> and a keyboard user loses their place.
+    $<HTMLButtonElement>('btn-add-volume').focus();
+    row.remove();
+    refreshExtraVolumeWarnings();
+    generate();
+  });
+  hostInput.addEventListener('input', () => {
+    updateExtraVolumeWarning(row);
+    generate();
+  });
+  // Container changes can flip other rows' duplicate-check results, so
+  // refresh every row, not just this one.
+  containerInput.addEventListener('input', () => {
+    refreshExtraVolumeWarnings();
+    generate();
+  });
+
+  $('extra-volumes').appendChild(fragment);
+  updateExtraVolumeWarning(row);
+  // Pushing a new error-severity warning into the set must also refresh the
+  // action-button state, otherwise Copy/Download stay enabled until the
+  // next keystroke.
+  generate();
+
+  // Only autofocus when the user clicked "Add mount" — not when rows are
+  // being programmatically added from URL state on page load.
+  if (!initial) {
+    hostInput.focus();
+    hostInput.setSelectionRange(hostInput.value.length, hostInput.value.length);
+  }
+}
+
+function populateTimezones(): void {
+  const tzSelect = $<HTMLSelectElement>('tz-value');
+  let detectedTz = '';
+  try {
+    detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch {}
+
+  let tzList: string[] = [];
+  try {
+    tzList = Intl.supportedValuesOf('timeZone');
+  } catch {
+    tzList = [
+      'UTC', 'America/New_York', 'America/Chicago', 'America/Denver', 'America/Los_Angeles',
+      'America/Anchorage', 'Pacific/Honolulu', 'America/Toronto', 'America/Vancouver',
+      'America/Sao_Paulo', 'America/Mexico_City', 'America/Argentina/Buenos_Aires',
+      'Europe/London', 'Europe/Paris', 'Europe/Berlin', 'Europe/Amsterdam', 'Europe/Stockholm',
+      'Europe/Zurich', 'Europe/Moscow', 'Europe/Rome', 'Europe/Madrid', 'Europe/Warsaw',
+      'Europe/Prague', 'Europe/Vienna', 'Europe/Helsinki', 'Europe/Athens', 'Europe/Istanbul',
+      'Europe/Lisbon', 'Europe/Dublin', 'Europe/Oslo', 'Europe/Copenhagen', 'Europe/Brussels',
+      'Asia/Tokyo', 'Asia/Shanghai', 'Asia/Hong_Kong', 'Asia/Singapore', 'Asia/Kolkata',
+      'Asia/Dubai', 'Asia/Seoul', 'Asia/Taipei', 'Asia/Bangkok', 'Asia/Jakarta',
+      'Asia/Karachi', 'Asia/Dhaka', 'Asia/Kuala_Lumpur', 'Asia/Manila', 'Asia/Riyadh',
+      'Asia/Tehran', 'Asia/Jerusalem', 'Asia/Novosibirsk', 'Asia/Vladivostok',
+      'Australia/Sydney', 'Australia/Melbourne', 'Australia/Perth', 'Australia/Brisbane',
+      'Australia/Adelaide', 'Australia/Hobart',
+      'Pacific/Auckland', 'Pacific/Fiji', 'Pacific/Guam',
+      'Africa/Johannesburg', 'Africa/Cairo', 'Africa/Lagos', 'Africa/Nairobi',
+      'Africa/Casablanca',
+    ];
+  }
+
+  while (tzSelect.firstChild) tzSelect.removeChild(tzSelect.firstChild);
+
+  function getUtcOffset(tz: string): string {
+    try {
+      const fmt = new Intl.DateTimeFormat('en-US', { timeZone: tz, timeZoneName: 'shortOffset' });
+      const parts = fmt.formatToParts(new Date());
+      for (const part of parts) {
+        if (part.type === 'timeZoneName') return part.value;
+      }
+    } catch {}
+    return '';
+  }
+
+  if (detectedTz) {
+    const detOpt = document.createElement('option');
+    detOpt.value = detectedTz;
+    const detOffset = getUtcOffset(detectedTz);
+    detOpt.textContent = detectedTz + (detOffset ? ' (' + detOffset + ', detected)' : ' (detected)');
+    detOpt.selected = true;
+    tzSelect.appendChild(detOpt);
+  }
+
+  tzList.forEach((tz) => {
+    if (tz === detectedTz) return;
+    const opt = document.createElement('option');
+    opt.value = tz;
+    const offset = getUtcOffset(tz);
+    opt.textContent = tz + (offset ? ' (' + offset + ')' : '');
+    if (!detectedTz && tz === 'UTC') opt.selected = true;
+    tzSelect.appendChild(opt);
+  });
+}
+
+// Returns every control to its default state and clears all persistence
+// (URL + localStorage). Used by the Reset button; also a good place to
+// test-drive "what are the defaults?" in a single function.
+function resetToDefaults(): void {
+  // Reset toggles — the options table already knows each one's default.
+  for (const o of BOOLEAN_OPTIONS) {
+    $<HTMLInputElement>(o.inputId).checked = o.defaultValue;
+  }
+
+  // Reset branch.
+  $<HTMLSelectElement>('branch-select').value = 'production';
+
+  // Reset timezone to the browser-detected value if we have it; otherwise
+  // UTC, which is always first in the fallback list.
+  let detectedTz = '';
+  try {
+    detectedTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  } catch {}
+  const tzSelect = $<HTMLSelectElement>('tz-value');
+  const target = detectedTz && Array.from(tzSelect.options).some((o) => o.value === detectedTz)
+    ? detectedTz
+    : 'UTC';
+  tzSelect.value = target;
+
+  // Remove all extras rows.
+  document.querySelectorAll<HTMLElement>('.extra-vol-row').forEach((row) => {
+    const w = row.querySelector<HTMLElement>('.extra-vol-warning');
+    if (w) forgetValidationSource(w);
+    row.remove();
+  });
+
+  // Reset platform to default and re-populate volume paths from its preset.
+  $<HTMLSelectElement>('platform-select').value = defaultPlatformId;
+  setPlatform(defaultPlatformId);
+
+  syncTzVisibility();
+  refreshMainVolumeWarnings();
+
+  // Clear persistence AFTER the DOM reset so the setPlatform()/generate()
+  // cascade above doesn't save a stale pre-reset state. generate() also
+  // re-saves to URL + localStorage; explicitly clear here to get a clean
+  // URL bar rather than `?tz=...` carrying the detected value forward.
+  clearState();
+  history.replaceState(null, '', window.location.pathname);
+}
+
+function detectDesktopOS(): void {
+  const ua = navigator.userAgent || '';
+  const plat = navigator.platform || '';
+  const isDesktop = /Mac/i.test(plat) || /Mac/i.test(ua) || /Win/i.test(plat) || /Windows/i.test(ua);
+  if (isDesktop) {
+    desktopHostNote = 'Roon Server requires a Linux host.';
+  }
+}
+
+function bindEvents(): void {
+  $<HTMLSelectElement>('platform-select').addEventListener('change', function () {
+    setPlatform(this.value);
+    refreshExtraVolumeWarnings();
+    refreshMainVolumeWarnings();
+    // Platform change stomps the three volume paths with the new preset.
+    // Announce it so a screen reader user isn't surprised when the next
+    // field they visit has a different value than they typed.
+    const p = platforms[this.value];
+    if (p) {
+      elCopyStatus.textContent = 'Volume paths set for ' + p.label + '.';
+      setTimeout(() => {
+        if (elCopyStatus.textContent === 'Volume paths set for ' + p.label + '.') {
+          elCopyStatus.textContent = '';
+        }
+      }, 3000);
+    }
+  });
+
+  $<HTMLButtonElement>('btn-add-volume').addEventListener('click', () => addExtraVolumeRow());
+
+  elTabCompose.addEventListener('click', () => setTab('compose'));
+  elTabRun.addEventListener('click', () => setTab('run'));
+
+  // WAI-ARIA tabs pattern: Left/Right toggle the two tabs; Home/End are
+  // aliases for the first/last. Keeps focus + selection in sync.
+  const handleTabKeydown = (e: KeyboardEvent): void => {
+    if (e.key === 'ArrowLeft' || e.key === 'End') {
+      e.preventDefault();
+      setTab('compose', /* focusTab */ true);
+    } else if (e.key === 'ArrowRight' || e.key === 'Home') {
+      e.preventDefault();
+      setTab('run', /* focusTab */ true);
+    }
+  };
+  elTabCompose.addEventListener('keydown', handleTabKeydown);
+  elTabRun.addEventListener('keydown', handleTabKeydown);
+  elBtnCopy.addEventListener('click', copyToClipboard);
+  elBtnDownload.addEventListener('click', downloadFile);
+  elBtnShare.addEventListener('click', copyShareLink);
+
+  elBtnReset.addEventListener('click', () => {
+    resetToDefaults();
+    flashButton(elBtnReset, elIconReset, elIconResetCheck, 'Reset to defaults.');
+  });
+
+  for (const o of MAIN_VOLUME_OPTIONS) {
+    $(o.inputId).addEventListener('input', () => {
+      updateMainVolumeWarning(o.inputId);
+      generate();
+    });
+  }
+
+  $<HTMLSelectElement>('tz-value').addEventListener('change', generate);
+
+  $<HTMLSelectElement>('branch-select').addEventListener('change', function () {
+    const hint = $('branch-hint');
+    hint.textContent = this.value === 'earlyaccess' ? 'Early access to new features and updates.' : '';
+    generate();
+  });
+
+  for (const o of BOOLEAN_OPTIONS) {
+    $<HTMLInputElement>(o.inputId).addEventListener('change', generate);
+  }
+  // tz-visibility is the one toggle with a UI side-effect beyond re-render,
+  // so it gets a dedicated listener rather than threading that concern
+  // through generate().
+  $<HTMLInputElement>('opt-tz').addEventListener('change', syncTzVisibility);
+}
+
+function populatePlatformSelect(order: readonly string[]): void {
+  const select = $<HTMLSelectElement>('platform-select');
+  const visibleIds: string[] = [];
+  for (const id of order) {
+    const p = platforms[id];
+    if (!p || p.hidden) continue;
+    const opt = document.createElement('option');
+    opt.value = id;
+    opt.textContent = p.label;
+    select.appendChild(opt);
+    visibleIds.push(id);
+  }
+  // Convention: first visible entry in the manifest is the default.
+  const defaultId = visibleIds[0];
+  if (defaultId) select.value = defaultId;
+}
+
+// --- Init ---
+
+// Failsafe for the body-opacity loading state in index.html: if init throws
+// before reaching the explicit app-ready flip below, the `load` event still
+// fires when the document and its resources finish loading, so users won't
+// be stuck on a blank page even if loadPlatforms() rejects or a later init
+// step crashes. Registered before the first await so it's in place even if
+// the very next line fails.
+window.addEventListener('load', () => {
+  document.body.classList.add('app-ready');
+});
+
+const loaded = await loadPlatforms();
+platforms = loaded.platforms;
+defaultPlatformId = loaded.order.find((id) => !platforms[id]?.hidden) ?? '';
+populatePlatformSelect(loaded.order);
+
+// Precedence for restoring state: URL params (shared link) > localStorage
+// (returning visitor) > defaults. A share URL always wins so the recipient
+// sees exactly what the sender meant; persistence only fills in when there's
+// no URL state to honor.
+const urlParams = new URLSearchParams(window.location.search);
+const effectiveParams = urlParams.toString() ? urlParams : loadState() ?? new URLSearchParams();
+const urlOverride = decodeUrl(effectiveParams);
+if (urlOverride.platform) {
+  const p = platforms[urlOverride.platform];
+  if (p && !p.hidden) {
+    $<HTMLSelectElement>('platform-select').value = urlOverride.platform;
+  }
+}
+
+populateTimezones();
+detectDesktopOS();
+bindEvents();
+updateNote();
+setPlatform(currentPlatform());
+
+// Overlay any remaining URL-driven fields on top of the platform defaults,
+// then enable URL writes and do a final generate() to sync the URL.
+applyUrlOverride(urlOverride);
+// Reflect the initial tz toggle state (possibly overridden from URL) in the
+// selector visibility. generate() no longer does this.
+syncTzVisibility();
+urlUpdatesEnabled = true;
+generate();
+
+// Reveal the body now that the first paint will reflect a fully-initialized
+// app (platforms loaded, defaults applied, output rendered). This is the
+// happy-path flip; the window 'load' listener at the top of init is the
+// failsafe for crash paths.
+document.body.classList.add('app-ready');
diff --git a/configurator/src/options.test.ts b/configurator/src/options.test.ts
new file mode 100644
index 0000000..4464980
--- /dev/null
+++ b/configurator/src/options.test.ts
@@ -0,0 +1,50 @@
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { BOOLEAN_OPTIONS } from './options';
+
+const indexHtml = readFileSync(
+  join(dirname(fileURLToPath(import.meta.url)), '..', 'index.html'),
+  'utf8',
+);
+
+describe('BOOLEAN_OPTIONS', () => {
+  it('has at least one entry (guards against accidental empty array)', () => {
+    expect(BOOLEAN_OPTIONS.length).toBeGreaterThan(0);
+  });
+
+  it.each(BOOLEAN_OPTIONS)(
+    'entry %# ($configKey): inputId "$inputId" exists in index.html',
+    ({ inputId }) => {
+      // Looking for `id="opt-tz"` in the static HTML. Using a regex instead
+      // of full HTML parsing because this is a one-assertion file read.
+      const found = new RegExp(`id="${inputId}"`).test(indexHtml);
+      expect(found, `expected <element id="${inputId}"> in index.html`).toBe(true);
+    },
+  );
+
+  it('has unique inputIds across all entries', () => {
+    const inputIds = BOOLEAN_OPTIONS.map((o) => o.inputId);
+    expect(new Set(inputIds).size).toBe(inputIds.length);
+  });
+
+  it('has unique urlKeys across all entries', () => {
+    const urlKeys = BOOLEAN_OPTIONS.map((o) => o.urlKey);
+    expect(new Set(urlKeys).size).toBe(urlKeys.length);
+  });
+
+  it('has unique configKeys across all entries', () => {
+    const keys = BOOLEAN_OPTIONS.map((o) => o.configKey);
+    expect(new Set(keys).size).toBe(keys.length);
+  });
+
+  it('does not collide with the reserved "p", "b", "tz", "vr", "vm", "vb", "x" URL keys', () => {
+    // These keys are used by platform/branch/tz/volumes/extras in urlState.
+    // A new boolean toggle grabbing one would silently clobber that state.
+    const reserved = new Set(['p', 'b', 'tz', 'vr', 'vm', 'vb', 'x']);
+    for (const o of BOOLEAN_OPTIONS) {
+      expect(reserved.has(o.urlKey), `urlKey "${o.urlKey}" collides with a reserved non-boolean key`).toBe(false);
+    }
+  });
+});
diff --git a/configurator/src/options.ts b/configurator/src/options.ts
new file mode 100644
index 0000000..036ee75
--- /dev/null
+++ b/configurator/src/options.ts
@@ -0,0 +1,73 @@
+import type { Config } from './types';
+
+// Extracts the names of Config fields whose value type is boolean.
+// Using this instead of a hand-written union keeps the table in sync with
+// the Config type automatically — TypeScript will reject a configKey that
+// doesn't correspond to a boolean field.
+//
+// The `-?` strips the optional modifier from the mapped type so optional
+// Config fields (e.g. `user?: string`) don't leak `undefined` into the
+// resulting key union.
+export type BooleanConfigKey = {
+  [K in keyof Config]-?: Config[K] extends boolean ? K : never;
+}[keyof Config];
+
+export type BooleanOptionDef = {
+  /** Config field this option controls. */
+  configKey: BooleanConfigKey;
+  /** DOM id of the <input type="checkbox"> in index.html. */
+  inputId: string;
+  /** Short URL query-string key. */
+  urlKey: string;
+  /** The default-facing-user value — what the toggle starts at with no URL state. */
+  defaultValue: boolean;
+};
+
+// Adding a new boolean toggle: add an entry here, add a matching <input
+// type="checkbox"> to index.html, and add the field to Config. readConfig,
+// applyUrlOverride, encode, decode, and bindEvents pick it up automatically.
+//
+// For toggles whose default is ON (tz, logging), the URL stores only the
+// deviation (e.g. `tzOff=1` when the user turned it off) — keeps share
+// URLs short and implies the default without encoding it.
+export const BOOLEAN_OPTIONS = [
+  { configKey: 'tz',        inputId: 'opt-tz',         urlKey: 'tzOff',  defaultValue: true  },
+  { configKey: 'logging',   inputId: 'opt-logging',    urlKey: 'logOff', defaultValue: true  },
+  { configKey: 'cifs',      inputId: 'opt-cifs',       urlKey: 'c',      defaultValue: false },
+  { configKey: 'usbAudio',  inputId: 'opt-usb-audio',  urlKey: 'u',      defaultValue: false },
+  { configKey: 'hdmiAudio', inputId: 'opt-hdmi-audio', urlKey: 'h',      defaultValue: false },
+] as const satisfies readonly BooleanOptionDef[];
+
+// Compile-time exhaustiveness guard. Exported so noUnusedLocals doesn't
+// flag it; its job is to fail compilation if a boolean is added to Config
+// without a corresponding BOOLEAN_OPTIONS entry (or an entry is removed).
+// `Exclude` returns `never` when the table covers every boolean key;
+// otherwise it returns the missing literal(s), which fail `extends never`.
+type _AssertExhaustive<T extends never> = T;
+export type _BOOLEAN_OPTIONS_COVERS_ALL_BOOLEANS = _AssertExhaustive<
+  Exclude<BooleanConfigKey, (typeof BOOLEAN_OPTIONS)[number]['configKey']>
+>;
+
+// --- Main volume options ------------------------------------------------
+//
+// The three required volume inputs are declared once so encode/decode/
+// applyUrlOverride and the warning-refresh loop can iterate instead of
+// hand-writing each triplet. `platformKey` is the corresponding field on
+// a `Platform` object (the default host path for this volume per
+// platform).
+
+export type MainVolumeConfigKey = 'volRoon' | 'volMusic' | 'volBackup';
+export type MainVolumePlatformKey = 'roon' | 'music' | 'backup';
+
+export type VolumeOptionDef = {
+  configKey: MainVolumeConfigKey;
+  inputId: string;
+  urlKey: string;
+  platformKey: MainVolumePlatformKey;
+};
+
+export const MAIN_VOLUME_OPTIONS = [
+  { configKey: 'volRoon',   inputId: 'vol-roon',   urlKey: 'vr', platformKey: 'roon' },
+  { configKey: 'volMusic',  inputId: 'vol-music',  urlKey: 'vm', platformKey: 'music' },
+  { configKey: 'volBackup', inputId: 'vol-backup', urlKey: 'vb', platformKey: 'backup' },
+] as const satisfies readonly VolumeOptionDef[];
diff --git a/configurator/src/persistence.ts b/configurator/src/persistence.ts
new file mode 100644
index 0000000..0f2038a
--- /dev/null
+++ b/configurator/src/persistence.ts
@@ -0,0 +1,38 @@
+// Small wrapper around localStorage for the configurator's state.
+// Stores the same URLSearchParams-serialized form the share URL uses, so
+// loading is the exact same code path as loading from a share link.
+// Swallows storage errors silently — the app still works without persistence
+// (private-browsing, full-disk, corporate lockdown, etc.).
+
+const STORAGE_KEY = 'roon-configurator-state';
+
+export function saveState(params: URLSearchParams): void {
+  const serialized = params.toString();
+  try {
+    if (serialized) {
+      window.localStorage.setItem(STORAGE_KEY, serialized);
+    } else {
+      window.localStorage.removeItem(STORAGE_KEY);
+    }
+  } catch {
+    // Ignore: Safari private mode, quota, corporate policy, etc.
+  }
+}
+
+export function loadState(): URLSearchParams | null {
+  try {
+    const raw = window.localStorage.getItem(STORAGE_KEY);
+    if (!raw) return null;
+    return new URLSearchParams(raw);
+  } catch {
+    return null;
+  }
+}
+
+export function clearState(): void {
+  try {
+    window.localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Same as above — nothing to do if storage is inaccessible.
+  }
+}
diff --git a/configurator/src/platforms.test.ts b/configurator/src/platforms.test.ts
new file mode 100644
index 0000000..7e9241f
--- /dev/null
+++ b/configurator/src/platforms.test.ts
@@ -0,0 +1,265 @@
+import { describe, it, expect } from 'vitest';
+import { readdirSync, readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, basename } from 'node:path';
+import Ajv from 'ajv/dist/2020';
+import {
+  validatePrefix,
+  validateVolumePath,
+  validateContainerPath,
+  firstError,
+  RESERVED_CONTAINER_PATHS,
+} from './platforms';
+import type { Platform, PlatformMap } from './types';
+
+const platformsDir = join(dirname(fileURLToPath(import.meta.url)), '..', 'public', 'platforms');
+
+function loadPlatformFile(id: string): Platform {
+  const raw = readFileSync(join(platformsDir, id + '.json'), 'utf8');
+  return JSON.parse(raw) as Platform;
+}
+
+describe('validatePrefix', () => {
+  const platforms: PlatformMap = {
+    synology: {
+      id: 'synology',
+      label: 'Synology',
+      roon: '/volume1/roon',
+      music: '/volume1/music',
+      backup: '/volume1/backups',
+      prefix: '/volume1/',
+      hint: '',
+      rootPattern: '^/volume\\d+/',
+    },
+    custom: {
+      id: 'custom',
+      label: 'Custom',
+      roon: '/x', music: '/y', backup: '/z',
+      prefix: '',
+      hint: '',
+    },
+  };
+
+  it('returns null for empty path', () => {
+    expect(validatePrefix(platforms, 'synology', '')).toBeNull();
+  });
+
+  it('returns null when the path matches the platform root pattern', () => {
+    expect(validatePrefix(platforms, 'synology', '/volume1/music')).toBeNull();
+    expect(validatePrefix(platforms, 'synology', '/volume2/media')).toBeNull();
+  });
+
+  it('returns a warning-severity issue when the path does not match the root pattern', () => {
+    const issue = validatePrefix(platforms, 'synology', '/share/music');
+    expect(issue?.severity).toBe('warning');
+    expect(issue?.message).toContain('Synology');
+    expect(issue?.message).toContain('/volume1/');
+  });
+
+  it('returns null when the platform has no rootPattern (no validation)', () => {
+    expect(validatePrefix(platforms, 'custom', '/anywhere/really')).toBeNull();
+  });
+
+  it('returns null for an unknown platform id', () => {
+    expect(validatePrefix(platforms, 'not-a-real-platform', '/path')).toBeNull();
+  });
+});
+
+describe('validateVolumePath', () => {
+  const platforms: PlatformMap = {
+    qnap: {
+      id: 'qnap', label: 'QNAP',
+      roon: '/share/Container/roon', music: '/share/Music', backup: '/share/Container/roon-backups',
+      prefix: '/share/', hint: '', rootPattern: '^/share/',
+    },
+    custom: {
+      id: 'custom', label: 'Custom',
+      roon: '/x', music: '/y', backup: '/z', prefix: '', hint: '',
+    },
+  };
+
+  it('returns null for empty path', () => {
+    expect(validateVolumePath(platforms, 'qnap', '')).toBeNull();
+  });
+
+  it('rejects relative paths with error severity', () => {
+    // Regression guard: user reported that `share/Music` (no leading /) passed silently.
+    const issue = validateVolumePath(platforms, 'qnap', 'share/Music');
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('absolute');
+    expect(issue?.message).toContain('named volume');
+  });
+
+  it('rejects relative paths even on platforms with no rootPattern', () => {
+    const issue = validateVolumePath(platforms, 'custom', 'relative/path');
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('absolute');
+  });
+
+  it('accepts absolute paths that match the platform prefix', () => {
+    expect(validateVolumePath(platforms, 'qnap', '/share/Music')).toBeNull();
+  });
+
+  it('returns a prefix-mismatch warning (not error) for absolute paths on the wrong platform', () => {
+    const issue = validateVolumePath(platforms, 'qnap', '/volume1/music');
+    expect(issue?.severity).toBe('warning');
+    expect(issue?.message).toContain('QNAP');
+    expect(issue?.message).toContain('/share/');
+  });
+
+  it('accepts any absolute path on a platform without rootPattern', () => {
+    expect(validateVolumePath(platforms, 'custom', '/any/absolute/path')).toBeNull();
+  });
+
+  it('prefers the absolute-path error over prefix mismatch when both apply', () => {
+    const issue = validateVolumePath(platforms, 'qnap', 'volume1/music');
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('absolute');
+    expect(issue?.message).not.toContain('QNAP');
+  });
+
+  it.each([
+    ['newline', '/share/Music\n- /etc/shadow:/evil'],
+    ['carriage return', '/share/Music\r'],
+    ['tab', '/share/\tMusic'],
+    ['null byte', '/share/Music\x00'],
+    ['escape char', '/share/\x1bMusic'],
+  ])('rejects paths containing a %s as an error', (_, path) => {
+    const issue = validateVolumePath(platforms, 'qnap', path);
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('control character');
+  });
+});
+
+describe('validateContainerPath', () => {
+  it('returns an error for empty path', () => {
+    const issue = validateContainerPath('');
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('required');
+  });
+
+  it('returns an error for relative paths', () => {
+    const issue = validateContainerPath('Music/extra');
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('absolute');
+  });
+
+  it.each([...RESERVED_CONTAINER_PATHS])(
+    'flags %s as reserved (collides with a required mount)',
+    (reserved) => {
+      const issue = validateContainerPath(reserved);
+      expect(issue?.severity).toBe('error');
+      expect(issue?.message).toContain(reserved);
+      expect(issue?.message).toContain('already mounted');
+    },
+  );
+
+  it('does not flag subpaths of reserved paths', () => {
+    expect(validateContainerPath('/Music/extra')).toBeNull();
+    expect(validateContainerPath('/Roon/backups')).toBeNull();
+  });
+
+  it('flags a container path that duplicates another extra', () => {
+    const issue = validateContainerPath('/Music/extra', ['/Music/extra']);
+    expect(issue?.severity).toBe('error');
+    expect(issue?.message).toContain('mounted more than once');
+  });
+
+  it('does not flag a path that appears only once across all rows', () => {
+    expect(validateContainerPath('/Music/a', ['/Music/b', '/Music/c'])).toBeNull();
+  });
+
+  it('prefers the "reserved" error over the "duplicate" error', () => {
+    // If two rows both use /Music, each is reserved — don't also spam about duplicates.
+    const issue = validateContainerPath('/Music', ['/Music']);
+    expect(issue?.message).toContain('already mounted');
+    expect(issue?.message).not.toContain('more than once');
+  });
+});
+
+describe('firstError', () => {
+  const warn = { severity: 'warning' as const, message: 'w' };
+  const err = { severity: 'error' as const, message: 'e' };
+
+  it('returns null for all-null input', () => {
+    expect(firstError(null, null)).toBeNull();
+  });
+
+  it('prefers errors over warnings regardless of order', () => {
+    expect(firstError(warn, err)).toBe(err);
+    expect(firstError(err, warn)).toBe(err);
+  });
+
+  it('returns the first warning if no errors exist', () => {
+    const warn2 = { severity: 'warning' as const, message: 'w2' };
+    expect(firstError(warn, warn2)).toBe(warn);
+  });
+
+  it('returns null if no issues at all', () => {
+    expect(firstError(null)).toBeNull();
+  });
+});
+
+describe('platform JSON files', () => {
+  const manifest = JSON.parse(readFileSync(join(platformsDir, 'index.json'), 'utf8')) as string[];
+
+  // Exclude the manifest and schema from the per-platform enumeration —
+  // both are meta-files that live alongside the platforms they describe.
+  const META_FILES = new Set(['index.json', 'schema.json']);
+  const jsonFiles = readdirSync(platformsDir)
+    .filter((f) => f.endsWith('.json') && !META_FILES.has(f))
+    .map((f) => basename(f, '.json'));
+
+  // Compile the JSON Schema once per test file. Using `allErrors: true` so a
+  // malformed contribution surfaces every field problem at once rather than
+  // bailing on the first error.
+  const schema = JSON.parse(readFileSync(join(platformsDir, 'schema.json'), 'utf8'));
+  const ajv = new Ajv({ allErrors: true });
+  const validate = ajv.compile(schema);
+
+  it('manifest lists every platform file present on disk', () => {
+    expect([...manifest].sort()).toEqual([...jsonFiles].sort());
+  });
+
+  it.each<string>(jsonFiles)('%s.json conforms to platform schema', (id: string) => {
+    const p = loadPlatformFile(id);
+    const ok = validate(p);
+    if (!ok) {
+      // ajv.errorsText gives "instancePath must have required property 'x'"
+      // style messages — good enough to point a contributor at the bad field
+      // in their PR's CI output.
+      throw new Error(`${id}.json: ${ajv.errorsText(validate.errors)}`);
+    }
+    // Filename must equal the id — schema can't assert this since it doesn't
+    // know the path it was loaded from.
+    expect(p.id, `${id}.json: "id" field must equal the filename`).toBe(id);
+  });
+
+  it('at least one platform is visible (not hidden)', () => {
+    const visible = jsonFiles.filter((id) => !loadPlatformFile(id).hidden);
+    expect(visible.length).toBeGreaterThan(0);
+  });
+
+  it.each<string>(jsonFiles.filter((id) => loadPlatformFile(id).rootPattern))(
+    '%s.json rootPattern compiles as a regex and matches its own paths',
+    (id: string) => {
+      const p = loadPlatformFile(id);
+      // Regex compiles (schema only checks it's a string).
+      expect(() => new RegExp(p.rootPattern!)).not.toThrow();
+      const re = new RegExp(p.rootPattern!);
+      expect(re.test(p.prefix)).toBe(true);
+      expect(re.test(p.roon)).toBe(true);
+      expect(re.test(p.music)).toBe(true);
+      expect(re.test(p.backup)).toBe(true);
+    },
+  );
+
+  it('truenas.json sets userOverride "0:0"', () => {
+    // Regression guard: if this ever disappears, TrueNAS Apps deployments
+    // will silently run as UID 568 and fail with `Permission denied` when
+    // the entrypoint tries to exec start.sh. See the TrueNAS arc for the
+    // full diagnostic story.
+    const p = loadPlatformFile('truenas');
+    expect(p.userOverride).toBe('0:0');
+  });
+});
diff --git a/configurator/src/platforms.ts b/configurator/src/platforms.ts
new file mode 100644
index 0000000..e191b21
--- /dev/null
+++ b/configurator/src/platforms.ts
@@ -0,0 +1,165 @@
+import type { Platform, PlatformMap, ValidationIssue } from './types';
+
+// Loads platform presets from ./platforms/*.json at runtime.
+// The manifest's ordering drives dropdown display order; the first entry
+// is treated as the default platform.
+
+export type LoadedPlatforms = {
+  platforms: PlatformMap;
+  order: readonly string[];
+};
+
+// Shape check for platform JSON loaded over the network. Beats a blind `as`
+// cast: a malformed platform file fails loudly during init with a message
+// pointing at the bad field, instead of producing a half-broken UI.
+function isPlatform(v: unknown, id: string): v is Platform {
+  if (typeof v !== 'object' || v === null) return false;
+  const o = v as Record<string, unknown>;
+  const stringKeys: readonly (keyof Platform)[] = ['id', 'label', 'roon', 'music', 'backup', 'prefix', 'hint'];
+  for (const k of stringKeys) {
+    if (typeof o[k] !== 'string') throw new Error(`platforms/${id}.json: "${k}" must be a string`);
+  }
+  if (o['id'] !== id) throw new Error(`platforms/${id}.json: "id" must equal "${id}"`);
+  if (o['rootPattern'] !== undefined && typeof o['rootPattern'] !== 'string') {
+    throw new Error(`platforms/${id}.json: "rootPattern" must be a string if present`);
+  }
+  if (o['hidden'] !== undefined && typeof o['hidden'] !== 'boolean') {
+    throw new Error(`platforms/${id}.json: "hidden" must be a boolean if present`);
+  }
+  if (o['userOverride'] !== undefined && typeof o['userOverride'] !== 'string') {
+    throw new Error(`platforms/${id}.json: "userOverride" must be a string if present`);
+  }
+  return true;
+}
+
+export async function loadPlatforms(): Promise<LoadedPlatforms> {
+  const manifestResp = await fetch('./platforms/index.json');
+  if (!manifestResp.ok) throw new Error('platforms/index.json: ' + manifestResp.status);
+  const manifestRaw: unknown = await manifestResp.json();
+  if (!Array.isArray(manifestRaw) || !manifestRaw.every((v) => typeof v === 'string')) {
+    throw new Error('platforms/index.json: expected an array of strings');
+  }
+  const order: readonly string[] = manifestRaw;
+
+  const entries = await Promise.all(
+    order.map(async (id): Promise<[string, Platform]> => {
+      const r = await fetch('./platforms/' + id + '.json');
+      if (!r.ok) throw new Error('platforms/' + id + '.json: ' + r.status);
+      const raw: unknown = await r.json();
+      if (!isPlatform(raw, id)) throw new Error(`platforms/${id}.json: invalid shape`);
+      return [id, raw];
+    }),
+  );
+
+  return { platforms: Object.fromEntries(entries), order };
+}
+
+export function validatePrefix(
+  platforms: PlatformMap,
+  platformId: string,
+  path: string,
+): ValidationIssue | null {
+  if (!path) return null;
+  const p = platforms[platformId];
+  if (!p || !p.rootPattern) return null;
+  const re = new RegExp(p.rootPattern);
+  if (re.test(path)) return null;
+  return {
+    severity: 'warning',
+    message: p.label + ' paths typically start with ' + p.prefix,
+  };
+}
+
+// Matches ASCII control characters (C0 + DEL). Rejecting these at the
+// validation layer keeps newline/tab/NUL-byte injection payloads out of
+// the generator entirely — defense-in-depth alongside the output quoting.
+const CONTROL_CHARS = /[\x00-\x1f\x7f]/;
+
+// Validates a host-side volume path. Returns the most severe issue found.
+// Checked in order:
+//   1. Control characters → ERROR. Newlines inside a double-quoted YAML
+//      scalar break out of it, so a crafted URL could inject fake volume
+//      entries into the clipboard output. Reject at the boundary.
+//   2. Relative path → ERROR. Docker creates a named volume that hides the
+//      user's files; silent data-loss risk.
+//   3. Platform prefix mismatch → WARNING. Docker accepts it; the user may
+//      have a non-standard layout.
+export function validateVolumePath(
+  platforms: PlatformMap,
+  platformId: string,
+  path: string,
+): ValidationIssue | null {
+  if (!path) return null;
+  if (CONTROL_CHARS.test(path)) {
+    return {
+      severity: 'error',
+      message: 'Path contains a control character (line break, tab, or similar). Remove any invisible characters.',
+    };
+  }
+  if (!path.startsWith('/')) {
+    return {
+      severity: 'error',
+      message:
+        'Path must be absolute (start with /). Relative paths become Docker named volumes, which are hidden from the host.',
+    };
+  }
+  return validatePrefix(platforms, platformId, path);
+}
+
+// Container paths already bound by the three required volume mounts.
+// An extra mount to any of these would shadow a required one.
+export const RESERVED_CONTAINER_PATHS = ['/Roon', '/Music', '/RoonBackups'] as const satisfies readonly string[];
+
+function isReservedContainerPath(path: string): boolean {
+  return (RESERVED_CONTAINER_PATHS as readonly string[]).includes(path);
+}
+
+// Validates a container-side volume path for an extra mount.
+// Checked in order:
+//   1. Empty → ERROR.
+//   2. Not absolute → ERROR.
+//   3. Collides with a required mount (/Roon, /Music, /RoonBackups) → ERROR.
+//   4. Duplicates another extra's container path → ERROR.
+export function validateContainerPath(
+  path: string,
+  otherContainerPaths: readonly string[] = [],
+): ValidationIssue | null {
+  if (!path) {
+    return { severity: 'error', message: 'Container path is required.' };
+  }
+  if (CONTROL_CHARS.test(path)) {
+    return {
+      severity: 'error',
+      message: 'Container path contains a control character. Remove any invisible characters.',
+    };
+  }
+  if (!path.startsWith('/')) {
+    return {
+      severity: 'error',
+      message: 'Container path must be absolute (start with /).',
+    };
+  }
+  if (isReservedContainerPath(path)) {
+    return {
+      severity: 'error',
+      message:
+        path + ' is already mounted by the required volumes — use a subpath like ' + path + '/extra.',
+    };
+  }
+  if (otherContainerPaths.includes(path)) {
+    return {
+      severity: 'error',
+      message: 'Container path ' + path + ' is mounted more than once. Each mount needs a unique destination.',
+    };
+  }
+  return null;
+}
+
+// Picks the most severe issue from a list, preferring errors over warnings.
+export function firstError(
+  ...issues: (ValidationIssue | null)[]
+): ValidationIssue | null {
+  for (const i of issues) if (i?.severity === 'error') return i;
+  for (const i of issues) if (i) return i;
+  return null;
+}
diff --git a/configurator/src/styles.css b/configurator/src/styles.css
new file mode 100644
index 0000000..d152764
--- /dev/null
+++ b/configurator/src/styles.css
@@ -0,0 +1,183 @@
+@import "tailwindcss";
+
+/* Theme — Roon brand colors + surface greys. Extends Tailwind's default
+   palette so classes like bg-surface-800 and text-roon-400 work. */
+@theme {
+  /* surface-300 and surface-400 are the two greys used for hint, description,
+     and footer text. Old values (#6b7280 / #4b5563) failed WCAG AA 4.5:1 on
+     the #0d131d body background; these brightened values pass (~5.9:1 and
+     ~4.8:1 respectively) while preserving the hierarchy (400 is darker). */
+  --color-surface-300: rgb(138 147 163);
+  --color-surface-400: rgb(123 130 145);
+  --color-surface-500: rgb(55 65 81);
+  --color-surface-600: rgb(42 49 64);
+  --color-surface-700: rgb(32 38 47);
+  --color-surface-800: rgb(26 32 43);
+  --color-surface-950: rgb(13 19 29);
+  --color-roon-300: rgb(146 148 227);
+  --color-roon-400: rgb(107 110 217);
+  --color-roon-900: rgb(30 31 72);
+
+  --font-sans: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, monospace;
+}
+
+/* Body base color stays outside Tailwind utilities so it applies before
+   any critical CSS / before JS renders. */
+body {
+  background: #0d131d;
+  color: rgba(255, 255, 255, 0.87);
+}
+
+/* Skip-to-content link — invisible until a keyboard user tabs into it
+   at page load. Lets them bypass the header nav + Platform/Branch/Volumes
+   panels and land directly on the main configuration form. */
+.skip-link {
+  position: absolute;
+  top: -100px; left: 0;
+  background: #1a202b;
+  color: #fff;
+  padding: 0.5rem 1rem;
+  z-index: 100;
+  text-decoration: underline;
+  border-radius: 0 0 6px 0;
+}
+.skip-link:focus-visible { top: 0; }
+
+/* --- Focus visibility ---
+   Tailwind Preflight removes default browser outlines; the `focus:ring-*`
+   utilities only cover form controls. Without these rules every button
+   and link loses its focus indicator — a keyboard user tabbing through
+   has no idea where they are. These rules give every non-input a
+   visible focus ring, and the toggle-track sibling gets one via its
+   hidden checkbox. */
+a:focus-visible,
+button:focus-visible,
+[role="tab"]:focus-visible,
+summary:focus-visible {
+  outline: 2px solid var(--color-roon-300);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+/* Our custom toggle wraps a visually-hidden checkbox. Route its focus ring
+   to the visible track. */
+input.sr-only:focus-visible + .toggle-track {
+  outline: 2px solid var(--color-roon-300);
+  outline-offset: 2px;
+}
+
+/* Scrollbar inside the output viewer. */
+.code-scroll::-webkit-scrollbar { height: 6px; width: 6px; }
+.code-scroll::-webkit-scrollbar-track { background: transparent; }
+.code-scroll::-webkit-scrollbar-thumb { background: #2e3344; border-radius: 3px; }
+.code-scroll::-webkit-scrollbar-thumb:hover { background: #3b4155; }
+
+/* Toggle switches — visually-hidden <input type="checkbox"> with a styled
+   sibling that acts as the thumb/track. */
+.toggle-track {
+  width: 40px; height: 22px; border-radius: 11px;
+  background: #2e3344; position: relative; cursor: pointer;
+  transition: background 0.2s ease; flex-shrink: 0;
+}
+.toggle-track::after {
+  content: ''; position: absolute; top: 2px; left: 2px;
+  width: 18px; height: 18px; border-radius: 50%;
+  background: #64748b; transition: all 0.2s ease;
+}
+input:checked + .toggle-track { background: #6b6ed9; }
+input:checked + .toggle-track::after {
+  transform: translateX(18px); background: #fff;
+}
+
+/* Tabs — styling driven by aria-selected so JS only toggles one attribute. */
+.tab-btn {
+  padding: 0.375rem 1rem;
+  border-radius: 0.375rem;
+  font-size: 0.875rem; line-height: 1.25rem;
+  font-weight: 500;
+  /* Pull from the surface-300 token so the tab label matches the rest of
+     the de-emphasized text colour. Hardcoded #6b7280 here would fall below
+     4.5:1 on the tablist's semi-transparent background (~#1c222b). */
+  color: var(--color-surface-300);
+  transition: all 0.2s cubic-bezier(.4, 0, .2, 1);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.tab-btn:hover { color: #fff; }
+.tab-btn[aria-selected="true"] {
+  background: rgba(107, 110, 217, .15);
+  color: #fff;
+  box-shadow: inset 0 0 0 1px rgba(107, 110, 217, .4);
+}
+
+/* Syntax-highlighting color classes written by highlight.ts. */
+.hl-key     { color: #79c0ff; }
+.hl-string  { color: #a5d6ff; }
+.hl-comment { color: #8b949e; font-style: italic; }
+.hl-punct   { color: #8b949e; }
+.hl-number  { color: #d2a8ff; }
+.hl-keyword { color: #ff7b72; }
+.hl-flag    { color: #79c0ff; }
+.hl-cmd     { color: #d2a8ff; }
+
+/* Copy button green-flash animation (unused in JS today but kept available). */
+@keyframes copyFlash {
+  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
+  100% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
+}
+.copy-flash { animation: copyFlash 0.5s ease-out; }
+
+/* Coloured dots at the left of the editor title bar. */
+.editor-dot { width: 12px; height: 12px; border-radius: 50%; }
+
+/* Hover tooltip — triggers on any element carrying data-tooltip. */
+[data-tooltip] { position: relative; }
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
+  padding: 4px 8px; margin-bottom: 6px;
+  background: #1a202b; color: #e2e8f0; border: 1px solid #374151;
+  border-radius: 6px; font-size: 12px; white-space: nowrap;
+  opacity: 0; pointer-events: none; transition: opacity 0.15s;
+}
+[data-tooltip]:hover::after,
+[data-tooltip]:focus-visible::after { opacity: 1; }
+
+/* Honour the user's motion preference — the transitions above are decorative. */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    transition-duration: 0.01ms !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* Windows High Contrast / forced-colors support. In forced-colors mode the
+   browser replaces author colors with System keywords (CanvasText, Highlight,
+   ButtonText, etc.) and ignores `box-shadow`. Several of our visual signals
+   rely on box-shadow (Tailwind's `focus:ring-*`, the active-tab indicator),
+   so we restate them as outlines that HC respects. */
+@media (forced-colors: active) {
+  /* Paint a real outline on focus since box-shadow rings are dropped. */
+  a:focus-visible,
+  button:focus-visible,
+  [role="tab"]:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  input.sr-only:focus-visible + .toggle-track {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+  }
+
+  /* Toggle-track loses its custom colours; ensure it stays visible. */
+  .toggle-track {
+    border: 1px solid ButtonText;
+  }
+
+  /* Active tab's box-shadow is ignored — paint an outline instead. */
+  .tab-btn[aria-selected="true"] {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+  }
+}
diff --git a/configurator/src/types.ts b/configurator/src/types.ts
new file mode 100644
index 0000000..3d559de
--- /dev/null
+++ b/configurator/src/types.ts
@@ -0,0 +1,54 @@
+export type Branch = 'production' | 'earlyaccess';
+
+export type ExtraVolume = {
+  readonly host: string;
+  readonly container: string;
+};
+
+export type Config = {
+  image: string;
+  branch: Branch;
+  volRoon: string;
+  volMusic: string;
+  volBackup: string;
+  extraVolumes: readonly ExtraVolume[];
+  tz: boolean;
+  tzValue: string;
+  logging: boolean;
+  cifs: boolean;
+  usbAudio: boolean;
+  hdmiAudio: boolean;
+  // Optional container UID:GID override. Set by platforms that force a
+  // non-root default (e.g. TrueNAS Apps defaults to UID 568). Roon's image
+  // needs to run as root; setting "0:0" overrides the platform default.
+  // Absent entirely (not undefined) on platforms where the image's default
+  // is honored — see exactOptionalPropertyTypes behavior.
+  user?: string;
+};
+
+export type Platform = {
+  id: string;
+  label: string;
+  roon: string;
+  music: string;
+  backup: string;
+  prefix: string;
+  hint: string;
+  rootPattern?: string;
+  // Keeps the platform loaded (so validation still works if referenced) but
+  // omits it from the dropdown. Use for platforms that aren't ready for users.
+  hidden?: boolean;
+  // Forces the emitted compose/run output to override the container's
+  // effective user (e.g. "0:0" for TrueNAS Apps which defaults to UID 568).
+  // When absent, the image's default USER directive applies.
+  userOverride?: string;
+};
+
+export type PlatformMap = Record<string, Platform>;
+
+export type Severity = 'error' | 'warning';
+
+export type ValidationIssue = {
+  severity: Severity;
+  message: string;
+};
diff --git a/configurator/src/urlState.test.ts b/configurator/src/urlState.test.ts
new file mode 100644
index 0000000..160318b
--- /dev/null
+++ b/configurator/src/urlState.test.ts
@@ -0,0 +1,275 @@
+import { describe, it, expect } from 'vitest';
+import { encode, decode } from './urlState';
+import type { Config, PlatformMap } from './types';
+
+const platforms: PlatformMap = {
+  qnap: {
+    id: 'qnap', label: 'QNAP',
+    roon: '/share/Container/roon',
+    music: '/share/Music',
+    backup: '/share/Container/roon-backups',
+    prefix: '/share/',
+    hint: '',
+    rootPattern: '^/share/',
+  },
+  synology: {
+    id: 'synology', label: 'Synology',
+    roon: '/volume1/docker/roon',
+    music: '/volume1/music',
+    backup: '/volume1/roon-backups',
+    prefix: '/volume1/',
+    hint: '',
+    rootPattern: '^/volume\\d+/',
+  },
+};
+
+function baseConfig(overrides: Partial<Config> = {}): Config {
+  return {
+    image: 'ghcr.io/roonlabs/roonserver:latest',
+    branch: 'production',
+    volRoon: '/share/Container/roon',
+    volMusic: '/share/Music',
+    volBackup: '/share/Container/roon-backups',
+    extraVolumes: [],
+    tz: true,
+    tzValue: 'America/Denver',
+    logging: true,
+    cifs: false,
+    usbAudio: false,
+    hdmiAudio: false,
+    ...overrides,
+  };
+}
+
+describe('encode', () => {
+  it('emits only the tz value for a fresh QNAP default config', () => {
+    // The tz value is user-specific (whatever their browser detected), so
+    // we DO encode it. Nothing else should appear. Asserting the exact
+    // serialized form prevents a silent regression in keys we forgot to
+    // inspect — the original version of this test only checked a subset
+    // of keys and missed tz entirely.
+    const cfg = baseConfig();
+    const params = encode(cfg, 'qnap', platforms, 'qnap');
+    expect(params.toString()).toBe('tz=America%2FDenver');
+  });
+
+  it('emits only tzOff=1 when tz is disabled and everything else is default', () => {
+    // tz=false is the only non-default; the encoder serializes it explicitly
+    // (rather than omitting it) so a share link with no tz parameter still
+    // means "use the recipient's detected tz" rather than "tz disabled".
+    const cfg = baseConfig({ tz: false });
+    const params = encode(cfg, 'qnap', platforms, 'qnap');
+    expect(params.toString()).toBe('tzOff=1');
+  });
+
+  it('emits p when platform differs from the default', () => {
+    const cfg = baseConfig({
+      volRoon: '/volume1/docker/roon',
+      volMusic: '/volume1/music',
+      volBackup: '/volume1/roon-backups',
+    });
+    const params = encode(cfg, 'synology', platforms, 'qnap');
+    expect(params.get('p')).toBe('synology');
+    // Volume paths now match the Synology defaults, so nothing else needed.
+    expect(params.get('vr')).toBeNull();
+    expect(params.get('vm')).toBeNull();
+  });
+
+  it('emits b=e only for earlyaccess branch', () => {
+    expect(encode(baseConfig({ branch: 'production' }), 'qnap', platforms, 'qnap').get('b')).toBeNull();
+    expect(encode(baseConfig({ branch: 'earlyaccess' }), 'qnap', platforms, 'qnap').get('b')).toBe('e');
+  });
+
+  it('emits tzOff when the timezone toggle is off', () => {
+    const params = encode(baseConfig({ tz: false }), 'qnap', platforms, 'qnap');
+    expect(params.get('tzOff')).toBe('1');
+    // With the toggle off, the tz value is irrelevant and should be omitted.
+    expect(params.get('tz')).toBeNull();
+  });
+
+  it('emits logOff only when logging is explicitly disabled', () => {
+    expect(encode(baseConfig({ logging: true }), 'qnap', platforms, 'qnap').get('logOff')).toBeNull();
+    expect(encode(baseConfig({ logging: false }), 'qnap', platforms, 'qnap').get('logOff')).toBe('1');
+  });
+
+  it('emits single-char flags for the opt-in toggles', () => {
+    const params = encode(
+      baseConfig({ cifs: true, usbAudio: true, hdmiAudio: true }),
+      'qnap', platforms, 'qnap',
+    );
+    expect(params.get('c')).toBe('1');
+    expect(params.get('u')).toBe('1');
+    expect(params.get('h')).toBe('1');
+  });
+
+  it('emits vr/vm/vb only when the path diverges from the platform default', () => {
+    const params = encode(
+      baseConfig({ volMusic: '/share/AllMusic' }),
+      'qnap', platforms, 'qnap',
+    );
+    expect(params.get('vr')).toBeNull();
+    expect(params.get('vm')).toBe('/share/AllMusic');
+    expect(params.get('vb')).toBeNull();
+  });
+
+  it('encodes extras as host:container pairs joined by commas', () => {
+    const params = encode(
+      baseConfig({
+        extraVolumes: [
+          { host: '/a', container: '/Music/a' },
+          { host: '/b', container: '/Music/b' },
+        ],
+      }),
+      'qnap', platforms, 'qnap',
+    );
+    expect(params.get('x')).toBe('/a:/Music/a,/b:/Music/b');
+  });
+
+  it('skips half-filled extras', () => {
+    const params = encode(
+      baseConfig({
+        extraVolumes: [
+          { host: '/a', container: '' },
+          { host: '', container: '/b' },
+          { host: '/c', container: '/Music/c' },
+        ],
+      }),
+      'qnap', platforms, 'qnap',
+    );
+    expect(params.get('x')).toBe('/c:/Music/c');
+  });
+});
+
+describe('decode', () => {
+  it('returns an empty override for no params', () => {
+    expect(decode(new URLSearchParams(''))).toEqual({});
+  });
+
+  it('parses platform', () => {
+    expect(decode(new URLSearchParams('p=synology'))).toEqual({ platform: 'synology' });
+  });
+
+  it('parses branch=earlyaccess', () => {
+    expect(decode(new URLSearchParams('b=e'))).toEqual({ branch: 'earlyaccess' });
+  });
+
+  it('parses tzOff and tz value independently', () => {
+    expect(decode(new URLSearchParams('tzOff=1'))).toEqual({ tz: false });
+    expect(decode(new URLSearchParams('tz=Europe%2FLondon'))).toEqual({ tzValue: 'Europe/London' });
+  });
+
+  it('parses the boolean single-char flags', () => {
+    expect(decode(new URLSearchParams('c=1&u=1&h=1&logOff=1'))).toEqual({
+      cifs: true, usbAudio: true, hdmiAudio: true, logging: false,
+    });
+  });
+
+  it('parses volume path overrides', () => {
+    const state = decode(new URLSearchParams('vr=%2Fa&vm=%2Fb&vb=%2Fc'));
+    expect(state).toEqual({ volRoon: '/a', volMusic: '/b', volBackup: '/c' });
+  });
+
+  it('parses extras back into structured pairs', () => {
+    const state = decode(new URLSearchParams('x=%2Fa%3A%2FMusic%2Fa%2C%2Fb%3A%2FMusic%2Fb'));
+    expect(state.extraVolumes).toEqual([
+      { host: '/a', container: '/Music/a' },
+      { host: '/b', container: '/Music/b' },
+    ]);
+  });
+
+  it('drops malformed extras (no colon) but keeps valid siblings', () => {
+    const encoded = encodeURIComponent('malformed,/a:/Music/a');
+    const state = decode(new URLSearchParams('x=' + encoded));
+    expect(state.extraVolumes).toEqual([{ host: '/a', container: '/Music/a' }]);
+  });
+});
+
+describe('encode/decode roundtrip', () => {
+  it('preserves a fully customized config', () => {
+    const cfg = baseConfig({
+      branch: 'earlyaccess',
+      tz: true,
+      tzValue: 'UTC',
+      logging: false,
+      cifs: true,
+      usbAudio: true,
+      hdmiAudio: true,
+      volRoon: '/mnt/pool1/roon',
+      volMusic: '/mnt/pool1/music',
+      volBackup: '/mnt/pool1/backups',
+      extraVolumes: [{ host: '/mnt/extra', container: '/Music/extra' }],
+    });
+    const params = encode(cfg, 'synology', platforms, 'qnap');
+    const decoded = decode(params);
+
+    expect(decoded.platform).toBe('synology');
+    expect(decoded.branch).toBe('earlyaccess');
+    expect(decoded.tzValue).toBe('UTC');
+    expect(decoded.logging).toBe(false);
+    expect(decoded.cifs).toBe(true);
+    expect(decoded.usbAudio).toBe(true);
+    expect(decoded.hdmiAudio).toBe(true);
+    expect(decoded.volRoon).toBe('/mnt/pool1/roon');
+    expect(decoded.volMusic).toBe('/mnt/pool1/music');
+    expect(decoded.volBackup).toBe('/mnt/pool1/backups');
+    expect(decoded.extraVolumes).toEqual([{ host: '/mnt/extra', container: '/Music/extra' }]);
+  });
+
+  it('produces a URL that stays under 200 characters for a realistic config', () => {
+    // Target budget is ~300 for Slack/Discord pastability; a realistic
+    // config encodes to ~150, so 200 is a tight regression guard.
+    const cfg = baseConfig({
+      cifs: true,
+      extraVolumes: [
+        { host: '/share/Media/classical', container: '/Music/classical' },
+        { host: '/share/Media/jazz', container: '/Music/jazz' },
+      ],
+    });
+    const qs = encode(cfg, 'qnap', platforms, 'qnap').toString();
+    expect(qs.length).toBeLessThan(200);
+  });
+
+  it('roundtrips through a real serialized querystring (not the URLSearchParams object)', () => {
+    // The other roundtrip test passes the same URLSearchParams to decode;
+    // this one serializes to a string and re-parses, which catches any
+    // encodeURIComponent mishaps on values with %, &, =, or colons.
+    const cfg = baseConfig({
+      cifs: true,
+      volMusic: '/share/Special & Weird',
+      extraVolumes: [{ host: '/share/a=b', container: '/Music/a=b' }],
+    });
+    const serialized = encode(cfg, 'qnap', platforms, 'qnap').toString();
+    const parsed = decode(new URLSearchParams(serialized));
+    expect(parsed.cifs).toBe(true);
+    expect(parsed.volMusic).toBe('/share/Special & Weird');
+    expect(parsed.extraVolumes).toEqual([{ host: '/share/a=b', container: '/Music/a=b' }]);
+  });
+});
+
+describe('decode defensiveness', () => {
+  it('ignores unrecognized branch values', () => {
+    expect(decode(new URLSearchParams('b=production')).branch).toBeUndefined();
+    expect(decode(new URLSearchParams('b=xyz')).branch).toBeUndefined();
+  });
+
+  it('treats tzOff other than "1" as not-set (only "1" disables tz)', () => {
+    expect(decode(new URLSearchParams('tzOff=0')).tz).toBeUndefined();
+    expect(decode(new URLSearchParams('tzOff=true')).tz).toBeUndefined();
+  });
+
+  it('returns an empty array for x with only malformed entries', () => {
+    expect(decode(new URLSearchParams('x=nocolon,alsonone')).extraVolumes).toEqual([]);
+  });
+
+  it('handles x=""  as no extras rather than a half-filled row', () => {
+    expect(decode(new URLSearchParams('x=')).extraVolumes).toBeUndefined();
+  });
+
+  it('splits extras on the first colon per pair (first-colon-wins)', () => {
+    // Documents the current behavior: if a host path contains a colon,
+    // everything after the first colon is treated as the container path.
+    // This is a known limitation of the comma/colon format.
+    const state = decode(new URLSearchParams('x=%2Fhost%3Atricky%3A%2FMusic'));
+    expect(state.extraVolumes).toEqual([{ host: '/host', container: 'tricky:/Music' }]);
+  });
+});
diff --git a/configurator/src/urlState.ts b/configurator/src/urlState.ts
new file mode 100644
index 0000000..bde7a0f
--- /dev/null
+++ b/configurator/src/urlState.ts
@@ -0,0 +1,111 @@
+import type { Config, ExtraVolume, PlatformMap } from './types';
+import { BOOLEAN_OPTIONS, MAIN_VOLUME_OPTIONS } from './options';
+
+// URL-shareable subset of the configurator state. Only fields that deviate
+// from defaults are serialized, keeping share URLs short enough to paste
+// into Slack/Discord (target: under ~300 chars for a realistic config).
+//
+// Short keys are a readability trade-off — they're not self-describing, but
+// they halve the URL length and this is a one-off format rather than an API.
+//
+//   p       platform id (default: first visible manifest entry)
+//   b       branch; `e` means earlyaccess, omit for production
+//   tz      timezone value (IANA string)
+//   tzOff   "1" if the timezone toggle is off (default: on)
+//   logOff  "1" if the logging toggle is off (default: on)
+//   c       "1" if CIFS is on (default: off)
+//   u       "1" if USB audio is on (default: off)
+//   h       "1" if HDMI audio is on (default: off)
+//   vr/vm/vb  custom roon/music/backup host paths (omit if == platform default)
+//   x       extras: `host:container,host:container,…`
+
+// Derived from Config so adding a new user-facing field in one place
+// automatically widens the override shape. `platform` is URL-only (it's a
+// UI concept, not a Config field), so it's the only hand-written key.
+// Excluding `image` — it's a constant, never URL-driven.
+export type StateOverride = Partial<Omit<Config, 'image'>> & {
+  platform?: string;
+};
+
+function encodeExtras(extras: readonly ExtraVolume[]): string {
+  return extras
+    .filter((v) => v.host && v.container)
+    .map((v) => v.host + ':' + v.container)
+    .join(',');
+}
+
+function decodeExtras(encoded: string): ExtraVolume[] {
+  return encoded
+    .split(',')
+    .map((pair) => {
+      const idx = pair.indexOf(':');
+      if (idx < 0) return null;
+      const host = pair.substring(0, idx);
+      const container = pair.substring(idx + 1);
+      if (!host || !container) return null;
+      return { host, container };
+    })
+    .filter((v): v is ExtraVolume => v !== null);
+}
+
+export function encode(
+  config: Config,
+  platformId: string,
+  platforms: PlatformMap,
+  defaultPlatformId: string,
+): URLSearchParams {
+  const params = new URLSearchParams();
+
+  if (platformId !== defaultPlatformId) params.set('p', platformId);
+  if (config.branch === 'earlyaccess') params.set('b', 'e');
+  // tz value is stored separately; the toggle state goes through the table.
+  if (config.tz && config.tzValue) params.set('tz', config.tzValue);
+
+  // Every boolean toggle encodes only its deviation from the default.
+  for (const o of BOOLEAN_OPTIONS) {
+    if (config[o.configKey] !== o.defaultValue) params.set(o.urlKey, '1');
+  }
+
+  const platform = platforms[platformId];
+  if (platform) {
+    for (const o of MAIN_VOLUME_OPTIONS) {
+      if (config[o.configKey] !== platform[o.platformKey]) {
+        params.set(o.urlKey, config[o.configKey]);
+      }
+    }
+  }
+
+  if (config.extraVolumes.length) {
+    const encoded = encodeExtras(config.extraVolumes);
+    if (encoded) params.set('x', encoded);
+  }
+
+  return params;
+}
+
+export function decode(params: URLSearchParams): StateOverride {
+  const state: StateOverride = {};
+
+  const p = params.get('p');
+  if (p) state.platform = p;
+
+  if (params.get('b') === 'e') state.branch = 'earlyaccess';
+
+  const tz = params.get('tz');
+  if (tz) state.tzValue = tz;
+
+  // A URL key's presence means the toggle is in the non-default state.
+  for (const o of BOOLEAN_OPTIONS) {
+    if (params.get(o.urlKey) === '1') state[o.configKey] = !o.defaultValue;
+  }
+
+  for (const o of MAIN_VOLUME_OPTIONS) {
+    const v = params.get(o.urlKey);
+    if (v !== null) state[o.configKey] = v;
+  }
+
+  const x = params.get('x');
+  if (x) state.extraVolumes = decodeExtras(x);
+
+  return state;
+}
diff --git a/configurator/src/vite-env.d.ts b/configurator/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/configurator/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/configurator/tsconfig.json b/configurator/tsconfig.json
new file mode 100644
index 0000000..a338a6c
--- /dev/null
+++ b/configurator/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["node"],
+    "strict": true,
+    "noImplicitAny": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowImportingTsExtensions": false,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/configurator/vite.config.ts b/configurator/vite.config.ts
new file mode 100644
index 0000000..5f97aab
--- /dev/null
+++ b/configurator/vite.config.ts
@@ -0,0 +1,20 @@
+/// <reference types="vitest/config" />
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+// Relative base so the built site works whether it's deployed at the Pages
+// repo subpath (roonlabs.github.io/roon-docker/) or a custom domain root.
+export default defineConfig({
+  base: './',
+  plugins: [tailwindcss()],
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+    target: 'es2022',
+  },
+  test: {
+    // Keep Vitest scoped to the src/ unit tests. The Playwright specs under
+    // e2e/ are not meant to run in the Vitest runner.
+    include: ['src/**/*.test.ts'],
+  },
+});

From 0c9de2414a2fde2af2669b3a415f56b00d4b316b Mon Sep 17 00:00:00 2001
From: Stephen Shaw <sshaw@decriptor.com>
Date: Sat, 25 Apr 2026 02:00:23 -0600
Subject: [PATCH 2/2] ci: deploy configurator to GitHub Pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GitHub Actions workflow that runs typecheck → unit tests → e2e tests
→ build, then uploads configurator/dist as the Pages artifact and
deploys via actions/deploy-pages.

Triggers on push to main and pull_request — both with the same paths
filter (configurator/** + the workflow itself) so unrelated commits
don't burn a runner. The deploy job is gated on push-to-main so PR
runs validate the build but never publish PR contents to the live
site. Concurrency is per-PR for pull_request events (rapid PR pushes
cancel each other) and shared for push events (main-branch deploys
queue serially under a single 'pages' group).

Node pinned to 20.19.0 — vite@8 declares engines.node ^20.19.0 ||
>=22.12.0, so a runner image stuck on an earlier 20.x would fail
npm ci with EBADENGINE.

Playwright HTML report is uploaded on test failure for CI debugging.

Manual one-time step required: in repo Settings → Pages, change
Source from "Deploy from a branch" to "GitHub Actions". Until that
flip happens, this workflow runs successfully but the published site
keeps serving the existing root index.html.
---
 .github/workflows/pages.yml | 87 +++++++++++++++++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 .github/workflows/pages.yml

diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
new file mode 100644
index 0000000..cf3a90c
--- /dev/null
+++ b/.github/workflows/pages.yml
@@ -0,0 +1,87 @@
+name: Deploy Configurator to Pages
+
+on:
+  push:
+    branches: [main]
+    paths:
+      - 'configurator/**'
+      - '.github/workflows/pages.yml'
+  pull_request:
+    paths:
+      - 'configurator/**'
+      - '.github/workflows/pages.yml'
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# PR pushes cancel each other (avoid wasting runners on stale commits);
+# main-branch runs queue serially under the shared `pages` group so
+# Pages deploys never overlap.
+concurrency:
+  group: ${{ github.event_name == 'pull_request' && format('pages-pr-{0}', github.ref) || 'pages' }}
+  cancel-in-progress: ${{ github.event_name == 'pull_request' }}
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: configurator
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          # Pinned to 20.19.0 (not bare '20') because vite@8 declares
+          # engines.node = '^20.19.0 || >=22.12.0'. A runner image stuck on
+          # an earlier 20.x would fail npm ci with EBADENGINE.
+          node-version: '20.19.0'
+          cache: 'npm'
+          cache-dependency-path: configurator/package-lock.json
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Test (unit)
+        run: npm test
+
+      - name: Install Playwright browser
+        run: npx playwright install --with-deps chromium
+
+      - name: Test (e2e)
+        run: npm run test:e2e
+
+      - name: Build
+        run: npm run build
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: configurator/dist
+
+      - name: Upload Playwright report
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: configurator/playwright-report
+          retention-days: 7
+
+  deploy:
+    # Only deploy on push-to-main; PR runs validate the build but must not
+    # publish a PR's contents to the live site.
+    if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+    needs: build
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - id: deployment
+        uses: actions/deploy-pages@v4