fix: allow window destroy

Expand the theme editor with multi-select, snapping, context menus, draft
recovery and export validation; add theme backups and trust prompts. Add
in-app diagnostics and rotating log bundle viewing, hardware-accelerated
theme video playback on macOS, and refresh the settings, setup wizard and
theme gallery layouts.

.prettierrc

@@ -9,7 +9,7 @@
   "tabWidth": 2,
   "useTabs": false,
   "bracketSpacing": true,
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "@trivago/prettier-plugin-sort-imports"],
   "overrides": [
     {
       "files": "*.svelte",

.vscode/settings.json

@@ -1,7 +1,18 @@
 {
   "svelte.enable-ts-plugin": true,
+  "git.enableCommitSigning": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
   "[rust]": {
     "editor.defaultFormatter": "rust-lang.rust-analyzer"
+  },
+  "json.schemaDownload.trustedDomains": {
+    "https://schemastore.azurewebsites.net/": true,
+    "https://raw.githubusercontent.com/": true,
+    "https://www.schemastore.org/": true,
+    "https://json.schemastore.org/": true,
+    "https://json-schema.org/": true,
+    "https://schema.tauri.app/": true
   }
 }

README.md

@@ -14,26 +14,76 @@ It enhances the osu! experience with quality-of-life features and integration sp
 ## 🚀 Features
 
 - [x] Automatically updates osu! before launching
+- [x] Automatically start/stop the OpenTabletDriver Daemon (Windows)
 - [x] Automatic ingame login
-- [x] Patches the osu! client to show misses in Relax and Autopilot
+- [x] Patches the osu! client to show misses in Relax and Autopilot (Windows, Linux and macOS via Wine)
 - [x] Displays your EZPPFarm stats in the launcher
 - [x] Shows the number of imported beatmapsets
 - [x] Shows the number of imported skins
 - [x] Displays ping to the EZPPFarm server
 - [x] Discord Rich Presence
 - [x] Performance Display Overlay (currently in experimental patcher release stream)
+- [x] Launcher Theming (API 1.0 bundles and API 2.0 declarative themes)
+- [x] Advanced theme editor in its own window with freeform text/image/video/shape layers, multi-select and snapping, layer locks, draft recovery, validation and export
+- [x] Theme update backups with one-click rollback, plus a trust prompt before running executable API 1.0 themes
+- [x] In-app diagnostics for osu!, Wine, the patcher, and the experimental stream's .NET 8 runtime, plus a log-bundle viewer
 
 ---
 
 ## 💻 Supported Platforms
 
-| Platform | Status                                   |
-| -------- | ---------------------------------------- |
-| Windows  | ✅ Supported                             |
-| macOS    | ❌ Not supported                         |
-| Linux    | 🕧 Partially supported (via osu-winello) |
+| Platform | Status                                                 |
+| -------- | ------------------------------------------------------ |
+| Windows  | ✅ Supported                                           |
+| macOS    | 🕧 Partially supported (via Wineskin/Whisky/CrossOver) |
+| Linux    | 🕧 Partially supported (via osu-winello)               |
 
-> Currently, only **Windows** is fully supported. Support for other platforms may be considered in the future.
+> **Windows** remains the fully supported platform. OpenTabletDriver is Windows-only. On macOS,
+> in-game patching runs the Windows patcher through the same Wine prefix as osu!. The stable
+> patcher stream needs no extra runtime; the experimental stream needs the .NET 8 Desktop Runtime
+> installed in that prefix.
+
+### macOS
+
+osu! stable is a Windows build, so on macOS it runs inside a Wine wrapper. EZPPLauncher
+supports Wineskin wrappers (the usual `osu!.app` wine skin), Whisky bottles and CrossOver
+bottles.
+
+The setup wizard automatically looks for Wineskins in `/Applications` and `~/Applications`.
+If detection fails, choose **Browse** and pick the `osu!.app` wrapper itself (or a Wine prefix
+folder); the launcher resolves the osu! installation inside it, so there is no need to open the
+bundle's package contents.
+
+Large VP8/VP9/AV1 theme videos are transcoded once to a cached 720p H.264/AAC file so WebKit
+can use the Mac's hardware decoder. The first large video triggers a one-time (~63 MB) download
+of a signed static FFmpeg 9.0.2 build from `ffmpeg.martin-riedl.de` into `~/.ezpplauncher/bin`;
+the launcher verifies its pinned SHA-256 and makes it executable. The managed build requires
+macOS 12 or newer. If the download fails, a system FFmpeg (Homebrew or MacPorts) is used; without
+either, themes still load but large WebM videos remain on WebKit's software decoder and may
+stutter. Theme authors can also ship an H.264/MP4 version alongside the WebM.
+
+---
+
+## 🪵 Logs
+
+Launcher, osu! and patcher output is written to `.ezpplauncher/logs` in your home folder:
+
+| File           | Contents                                                       |
+| -------------- | -------------------------------------------------------------- |
+| `launcher.log` | Launcher lifecycle, webview console output and uncaught errors |
+| `osu.log`      | osu! and osu! updater output, including stdout/stderr          |
+| `patcher.log`  | Patcher output, including stdout/stderr                        |
+
+A file is only created when that stream actually writes a line. On each new session, or when
+any file reaches 5 MiB, all three active files are bundled into a single
+`logs_<date>_<time>.zip`; the five most recent bundles are kept. You can turn file logging off,
+open the folder, or browse and filter a bundle in the built-in viewer from **Settings → Logging**.
+On Windows the folder is `%USERPROFILE%\.ezpplauncher\logs`.
+
+**Settings → Diagnostics** checks the selected osu! install and write access, the macOS Wine
+prefix/runtime/version and (for the experimental patcher stream) its .NET 8 runtime, the FFmpeg
+theme-video transcoder, osu-winello/wmctrl on Linux, and whether the patcher is present. It can
+copy a plain-text support report or reopen the setup wizard for a guided repair.
 
 ---
 
@@ -43,7 +93,9 @@ It enhances the osu! experience with quality-of-life features and integration sp
 
 - **Rust** (installed via [rustup](https://rustup.rs/) – recommended for Windows)
 - **Cargo** (comes with rustup)
+- **[CMake](https://cmake.org/download/)**
 - **[Bun](https://bun.sh/)** (JavaScript runtime)
+- On macOS: **Xcode Command Line Tools** (`xcode-select --install`)
 
 ### Steps
 
@@ -58,7 +110,12 @@ bun run build
 After building, the launcher executable will be located at:
 
 ```
+# Windows
 src-tauri/target/release/ezpplauncher.exe
+
+# macOS
+src-tauri/target/release/bundle/macos/EZPPLauncher.app
+src-tauri/target/release/bundle/dmg/EZPPLauncher_*.dmg
 ```
 
 ---
@@ -66,9 +123,28 @@ src-tauri/target/release/ezpplauncher.exe
 ## 📁 Project Structure (Simplified)
 
 ```
-├── src/                    # Frontend (Svelte)
-├── src-tauri/              # Backend (Rust)
-│   ├── tauri.conf.json     # Tauri configuration
-├── package.json            # Bun project config
+├── src/                           # Frontend (Svelte)
+├── src-tauri/                     # Backend (Rust)
+│   ├── src/macos.rs               # Wine/Wineskin support for macOS
+│   ├── tauri.conf.json            # Tauri configuration
+│   └── tauri.macos.conf.json      # macOS bundle targets (app + dmg)
+├── package.json                   # Bun project config
 └── README.md
 ```
+
+---
+
+## 🎨 Launcher Themes
+
+By default, the launcher includes several downloadable themes. Themes can be created
+in two ways:
+
+- Use the built-in **advanced editor** on the Themes screen. It opens in its own
+  resizable window with a full launcher home canvas, freeform text/image/video/shape
+  layers, WebM support, `@fontsource` fonts and custom font imports. It creates API 2.0
+  themes and can export them as shareable `.ezpplauncher-theme` files.
+- Use the [create-ezpplauncher-theme](https://git.ez-pp.farm/EZPPFarm/create-ezpplauncher-theme)
+  CLI. It supports both API 1.0 Svelte themes and API 2.0 declarative themes.
+
+See [THEME_API_V2.md](THEME_API_V2.md) for the full API 2.0 schema, limits and packaging
+layout. API 1.0 themes continue to load unchanged.

THEME_API_V2.md

@@ -0,0 +1,440 @@
+# EZPPLauncher Theme API 2.0
+
+API 2.0 is a declarative theme format. Instead of shipping a JavaScript bundle that
+mounts its own UI, a theme describes its background, effects, audio, fonts and
+freeform layers in `theme.json`. The launcher renders it, and the built-in advanced
+editor can create and edit these themes without writing code.
+
+API 1.0 themes continue to work unchanged. Pick the API that fits the theme:
+
+|                         | API 1.0                                           | API 2.0                                        |
+| ----------------------- | ------------------------------------------------- | ---------------------------------------------- |
+| Rendering               | Svelte bundle (`entry`)                           | Launcher-rendered                              |
+| Files                   | `theme.json`, `bundle.js`, `style.css`, `assets/` | `theme.json`, `assets/`                        |
+| Created with            | `create-ezpplauncher-theme`                       | Launcher editor or `create-ezpplauncher-theme` |
+| Scripts / arbitrary DOM | Yes                                               | No (data only, optional CSS)                   |
+| Cross-platform          | Depends on the bundle                             | Yes                                            |
+
+---
+
+## Package layout
+
+A packaged `.ezpplauncher-theme` file is a zip with this structure:
+
+```
+theme.json
+assets/
+  background.webm
+  layer.png
+  music.mp3
+  font.woff2
+  preview.png        # optional thumbnail
+```
+
+An installed theme lives in:
+
+```
+# Windows
+C:\Users\<user>\.ezpplauncher\themes\<folder>\
+
+# macOS / Linux
+~/.ezpplauncher/themes/<folder>/
+```
+
+---
+
+## `theme.json`
+
+```json
+{
+  "name": "Midnight",
+  "version": "1.0.0",
+  "apiVersion": "2.0",
+  "author": "Your Name",
+  "description": "A dark gradient with drifting stars.",
+  "preview": "preview.png",
+  "background": {
+    "type": "gradient",
+    "from": "#181825",
+    "to": "#3b1d4f",
+    "angle": 135,
+    "opacity": 1
+  },
+  "overlay": {
+    "color": "#000000",
+    "opacity": 0.2,
+    "vignette": 0.35
+  },
+  "effects": {
+    "type": "stars",
+    "density": 40,
+    "speed": 1,
+    "color": "#ffd6f2"
+  },
+  "typography": {
+    "body": "Sora Variable",
+    "heading": "Bebas Neue"
+  },
+  "fonts": [
+    {
+      "family": "My Display Font",
+      "src": "display.woff2",
+      "weight": "400",
+      "style": "normal"
+    }
+  ],
+  "elements": [
+    {
+      "id": "tagline",
+      "type": "text",
+      "text": "MIDNIGHT",
+      "x": 640,
+      "y": 84,
+      "width": 300,
+      "height": 72,
+      "fontFamily": "Bebas Neue",
+      "fontSize": 46,
+      "fontWeight": 400,
+      "color": "#ffffff",
+      "align": "right",
+      "verticalAlign": "center",
+      "letterSpacing": 2
+    }
+  ],
+  "audio": {
+    "src": "music.mp3",
+    "loop": true
+  },
+  "accentColor": "#ff006e",
+  "css": ""
+}
+```
+
+### Metadata
+
+| Field         | Type   | Required | Notes                                               |
+| ------------- | ------ | -------- | --------------------------------------------------- |
+| `name`        | string | yes      | Display name; also used for the install folder      |
+| `version`     | string | yes      | Semver, used for update checks                      |
+| `apiVersion`  | string | yes      | Must start with `2` (use `"2.0"`)                   |
+| `author`      | string | yes      | Shown in the theme manager                          |
+| `description` | string | no       | Shown on the theme card                             |
+| `nsfw`        | bool   | no       | Marks the theme as adult content (`18+` badge)      |
+| `preview`     | string | no       | Card thumbnail; the editor generates `preview.png`  |
+| `accentColor` | string | no       | Hex color used for focus rings and active UI states |
+| `css`         | string | no       | Extra CSS injected while the theme is active        |
+
+### Background
+
+`background.type` selects the layer:
+
+```json
+{ "type": "color", "color": "#181825", "opacity": 1 }
+```
+
+```json
+{ "type": "gradient", "from": "#181825", "to": "#3b1d4f", "angle": 135, "opacity": 1 }
+```
+
+```json
+{ "type": "image", "src": "background.png", "fit": "cover", "opacity": 1, "blur": 0 }
+```
+
+```json
+{
+  "type": "video",
+  "src": "background.webm",
+  "fit": "cover",
+  "opacity": 1,
+  "blur": 0,
+  "muted": true
+}
+```
+
+- `src` is relative to the theme's `assets/` folder.
+- `fit` is `cover` (default) or `contain`.
+- `opacity` is clamped to `0`–`1`, `blur` to `0`–`40` pixels.
+- Background videos autoplay and loop. They are muted by default; set `muted` to `false`
+  to play their audio.
+- Prefer **WebM** for video backgrounds and video layers. It is supported by the
+  launcher and keeps theme packages much smaller than MP4. MP4, MOV and M4V also
+  work.
+
+### Overlay
+
+```json
+{ "color": "#000000", "opacity": 0.2, "vignette": 0.35 }
+```
+
+`opacity` controls the flat dim layer and `vignette` darkens the edges. Both are
+clamped to `0`–`1`.
+
+### Effects
+
+```json
+{ "type": "stars", "density": 40, "speed": 1, "color": "#ffd6f2" }
+```
+
+Supported types: `none`, `stars`, `snow`, `petals`, `bubbles`.
+
+- `density` is clamped to `0`–`120` particles.
+- `speed` is clamped to `0.2`–`3`.
+- Effects are disabled when the user turns on **Reduce animations**.
+
+### Audio
+
+```json
+{ "src": "music.mp3", "loop": true }
+```
+
+`src` is relative to `assets/`. Music uses the launcher's volume control and is
+silent in the theme editor preview.
+
+### Typography
+
+`typography.body` changes the font used by the launcher UI. `typography.heading`
+changes headings such as the launcher title.
+
+```json
+"typography": {
+  "body": "Montserrat Variable",
+  "heading": "Playfair Display Variable"
+}
+```
+
+These families ship with the launcher through `@fontsource` and can be used
+without adding any files:
+
+| Family                      | Style   |
+| --------------------------- | ------- |
+| `Sora Variable`             | Sans    |
+| `Montserrat Variable`       | Sans    |
+| `Bebas Neue`                | Display |
+| `Playfair Display Variable` | Serif   |
+| `Space Mono`                | Mono    |
+| `JetBrains Mono Variable`   | Mono    |
+
+Custom fonts can be packaged with the theme. The launcher generates the
+`@font-face` rules from `fonts`:
+
+```json
+"fonts": [
+  { "family": "My Display Font", "src": "display.woff2", "weight": "400", "style": "normal" }
+]
+```
+
+- `src` is relative to `assets/`.
+- Supported formats: WOFF2 (recommended), WOFF, TTF and OTF.
+- `weight` defaults to `400`; `style` defaults to `normal`.
+- Use the `family` value in `typography` and in text layers.
+
+The editor's **Fonts** tab browses the full Fontsource catalog (2,000+ families)
+and downloads the selected family, weight, style and subset as a WOFF2 into the
+theme's `assets/` folder. It adds the matching `fonts` entry automatically, so
+saved and exported themes stay self-contained.
+
+### Freeform layers
+
+`elements` are rendered above the launcher UI, but only on the **Home** screen.
+The launcher canvas is a fixed **1000 × 650** coordinate space. Elements can extend
+the home screen with text, images, videos and shapes, and they are
+pointer-transparent in the running launcher so they never block buttons.
+
+The order of the `elements` array controls stacking: the last element is drawn on
+top. Themes can contain up to 100 layers.
+
+Every layer supports:
+
+| Field      | Type    | Notes                                            |
+| ---------- | ------- | ------------------------------------------------ |
+| `id`       | string  | Unique within the theme                          |
+| `name`     | string? | Optional editor label; does not affect rendering |
+| `type`     | string  | `text`, `image`, `video` or `shape`              |
+| `x`, `y`   | number  | Position in the 1000 × 650 stage                 |
+| `width`    | number  | 24–1000                                          |
+| `height`   | number  | 24–650                                           |
+| `rotation` | number  | Degrees, `-360`–`360`                            |
+| `opacity`  | number  | `0`–`1`                                          |
+| `hidden`   | boolean | Keep the layer in the file but do not render it  |
+| `locked`   | boolean | Prevent moving/resizing the layer in the editor  |
+
+#### Text
+
+```json
+{
+  "id": "greeting",
+  "type": "text",
+  "text": "Welcome back!",
+  "x": 360,
+  "y": 220,
+  "width": 420,
+  "height": 90,
+  "fontFamily": "Bebas Neue",
+  "fontSize": 42,
+  "fontWeight": 600,
+  "color": "#ffffff",
+  "align": "center",
+  "verticalAlign": "center",
+  "lineHeight": 1.2,
+  "letterSpacing": 0
+}
+```
+
+`align` is `left`, `center` or `right`; `verticalAlign` is `top`, `center` or
+`bottom`. Font size is clamped to `6`–`240`.
+
+#### Image and video
+
+```json
+{
+  "id": "logo",
+  "type": "image",
+  "src": "logo.png",
+  "x": 700,
+  "y": 420,
+  "width": 220,
+  "height": 140,
+  "fit": "contain",
+  "radius": 18,
+  "opacity": 1
+}
+```
+
+```json
+{
+  "id": "ambient",
+  "type": "video",
+  "src": "ambient.webm",
+  "x": 0,
+  "y": 0,
+  "width": 1000,
+  "height": 650,
+  "fit": "cover",
+  "opacity": 0.35
+}
+```
+
+Video layers autoplay and loop. They are muted by default; set `muted` to `false` to
+play their audio. WebM is recommended for size. Use an `opacity` below `1` if the video
+should blend into the launcher UI.
+
+#### Shape
+
+```json
+{
+  "id": "glow",
+  "type": "shape",
+  "shape": "ellipse",
+  "x": 680,
+  "y": 60,
+  "width": 260,
+  "height": 260,
+  "fill": "#ff006e",
+  "opacity": 0.18,
+  "borderWidth": 0,
+  "borderColor": "#ffffff"
+}
+```
+
+`shape` is `rectangle`, `ellipse` or `line`. `radius` rounds rectangle corners.
+`borderWidth` is clamped to `0`–`40`.
+
+### Custom CSS
+
+The `css` field is appended while the theme is active. Theme authors can use it for
+small tweaks, but it is not required. Example:
+
+```css
+:root {
+  --radius: 1rem;
+}
+```
+
+---
+
+## Using the advanced editor
+
+1. Open **Themes** in the launcher.
+2. Select **Create theme**, or the pencil button on an installed API 2.0 theme.
+3. The editor opens in its **own resizable window**, not a modal. The center is a
+   full launcher home canvas at 1000 × 650.
+4. Use the left toolbar to add text, image, video and shape layers. Drag layers on
+   the canvas, resize with the corner handles, or edit exact values in the right
+   inspector. Shift/Cmd-click a layer or drag a marquee over empty canvas to
+   select several layers. Multi-selections can be dragged together and aligned
+   or distributed from the right panel. Layers snap to canvas edges, the canvas
+   center, and other layers while dragging; hold Alt to disable snapping.
+   Right-click a layer for quick duplicate, ordering, hide/lock and delete
+   actions, or right-click empty canvas to add a new layer.
+5. The layer list supports double-click rename, hide/show, lock/unlock and
+   drag-to-reorder. Hidden layers remain in the package, while locked layers
+   cannot be moved or resized on the canvas.
+6. Use the **Theme** tab for metadata, background, effects, typography and custom
+   CSS. Open the **Fonts** tab to search and download from every Fontsource
+   family, or import WOFF2, WOFF, TTF and OTF files. Downloaded fonts are copied
+   into the theme's `assets/` folder when you save.
+7. Select **Save theme** to write `theme.json` and copy new assets into
+   `~/.ezpplauncher/themes`. A fresh `assets/preview.png` thumbnail is rendered
+   from the theme and the launcher applies the saved theme immediately. Unsaved
+   edits are autosaved as a local draft and offered for recovery after a crash.
+8. Select **Export** to create a shareable `.ezpplauncher-theme` package. A theme
+   check runs first and reports missing assets, oversized media, missing fonts
+   and unused imports. Export saves and refreshes the preview, then reports the
+   final package size.
+
+Keyboard shortcuts:
+
+- `Cmd/Ctrl+Z` undoes the last change.
+- `Cmd/Ctrl+Shift+Z` or `Ctrl+Y` redoes it.
+- `Cmd/Ctrl+S` saves.
+- `Cmd/Ctrl+D` duplicates the selected layer or multi-selection.
+- `Cmd/Ctrl+A` selects every visible layer.
+- Shift/Cmd-click toggles a layer in the current selection.
+- Arrow keys nudge the selected layer(s) by 1 px; hold Shift for 10 px.
+- `Delete` removes the selected layer(s).
+- Hold Alt while dragging to skip snapping.
+- `Esc` clears the selection or closes an open editor dialog.
+
+---
+
+## Creating API 2.0 themes with the CLI
+
+The `create-ezpplauncher-theme` CLI includes a **declarative (API 2.0)** template:
+
+```bash
+npx git+https://git.ez-pp.farm/EZPPFarm/create-ezpplauncher-theme.git my-theme
+```
+
+Choose `declarative (API 2.0)`, edit `theme.json`, add files to `assets/`, then run:
+
+```bash
+npm run build
+```
+
+This produces `dist/my_theme.ezpplauncher-theme`. The template also includes
+`preview.html` for a standalone browser preview:
+
+```bash
+npx serve .
+```
+
+---
+
+## Compatibility and limits
+
+- API 2.0 packages must include `theme.json`; `entry` and `style` are not used.
+- Asset paths are resolved inside `assets/`; path traversal is rejected by the
+  import commands.
+- Exports include only `assets/` files referenced by `theme.json` (background,
+  audio, fonts, layers and preview). Orphaned files left in the folder are
+  omitted, which keeps packages small. API 1.0 themes are exported whole because
+  their bundles can load files dynamically.
+- The editor writes `preview.png` whenever you save or export. The generated
+  thumbnail renders the background, effects, launcher UI, theme fonts and
+  freeform layers; custom CSS is not applied to the thumbnail.
+- The theme editor only writes inside `~/.ezpplauncher/themes`.
+- API 1.0 themes are still loaded through their existing `mountTheme` bundle API.
+- API 2.0 themes cannot run JavaScript. Use custom CSS for small visual tweaks, or
+  use API 1.0 when a theme needs a fully custom UI.
+- Freeform layers are decorative, home-screen-only and pointer-transparent; they
+  cannot add interactive controls.

components.json

@@ -1,7 +1,7 @@
 {
-  "$schema": "https://next.shadcn-svelte.com/schema.json",
+  "$schema": "https://shadcn-svelte.com/schema.json",
   "tailwind": {
-    "css": "src\\app.css",
+    "css": "src/app.css",
     "baseColor": "gray"
   },
   "aliases": {
@@ -12,5 +12,5 @@
     "lib": "$lib"
   },
   "typescript": true,
-  "registry": "https://tw3.shadcn-svelte.com/registry/default"
+  "registry": "https://shadcn-svelte.com/registry"
 }

eslint.config.js

@@ -1,16 +1,20 @@
-import prettier from 'eslint-config-prettier';
+import svelteConfig from './svelte.config.js';
 import { includeIgnoreFile } from '@eslint/compat';
 import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
 import svelte from 'eslint-plugin-svelte';
 import globals from 'globals';
 import { fileURLToPath } from 'node:url';
 import ts from 'typescript-eslint';
-import svelteConfig from './svelte.config.js';
 
 const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
 
 export default ts.config(
   includeIgnoreFile(gitignorePath),
+  {
+    // Tauri build output is ignored by src-tauri/.gitignore, not the root file.
+    ignores: ['src-tauri/target/**', 'src-tauri/gen/**'],
+  },
   js.configs.recommended,
   ...ts.configs.recommended,
   ...svelte.configs.recommended,
@@ -36,5 +40,14 @@ export default ts.config(
         svelteConfig,
       },
     },
+  },
+  {
+    rules: {
+      'no-empty': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'error',
+        { argsIgnorePattern: '^_', varsIgnorePattern: '^\\$\\$(Props|Events|Slots|Generic)$' },
+      ],
+    },
   }
 );

package.json

@@ -1,13 +1,13 @@
 {
   "name": "ezpplauncher",
-  "version": "3.0.9",
+  "version": "3.2.7",
   "description": "",
   "type": "module",
   "scripts": {
     "debug": "bun run tauri dev",
-    "build": "bun ./scripts/sync-version.ts && bun run vite:build && bun run tauri:build",
+    "build": "bun ./scripts/build.ts",
     "vite:dev": "vite dev",
-    "vite:build": "vite build",
+    "vite:build": "vite build && exit 0",
     "tauri:build": "tauri build",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -18,59 +18,64 @@
   },
   "license": "GPL-3.0-only",
   "dependencies": {
-    "@better-fetch/fetch": "^1.1.18",
-    "@fontsource/sora": "^5.2.6",
-    "@fontsource/space-mono": "^5.2.8",
-    "@number-flow/svelte": "^0.3.9",
-    "@tailwindcss/typography": "^0.5.16",
-    "@tailwindcss/vite": "^4.1.11",
-    "@tauri-apps/api": "^2.8.0",
-    "@tauri-apps/plugin-dialog": "^2.4.0",
-    "@tauri-apps/plugin-fs": "^2.4.2",
-    "@tauri-apps/plugin-shell": "^2.3.1",
-    "@types/umami": "^2.10.1",
-    "animejs": "^4.1.3",
+    "@better-fetch/fetch": "^1.1.21",
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@fontsource-variable/montserrat": "^5.3.0",
+    "@fontsource-variable/playfair-display": "^5.3.0",
+    "@fontsource-variable/sora": "^5.2.8",
+    "@fontsource/bebas-neue": "^5.3.0",
+    "@fontsource/space-mono": "^5.2.9",
+    "@number-flow/svelte": "^0.4.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "@tauri-apps/api": "^2.11.0",
+    "@tauri-apps/plugin-dialog": "^2.7.1",
+    "@tauri-apps/plugin-fs": "^2.5.1",
+    "@tauri-apps/plugin-shell": "^2.3.5",
+    "@types/node": "^25.9.1",
+    "animejs": "^4.4.1",
     "buffer": "^6.0.3",
     "crypto-js": "^4.2.0",
-    "lucide-svelte": "^0.542.0",
-    "semver": "^7.7.2",
+    "jszip": "^3.10.1",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "semver": "^7.8.1",
+    "sileo": "^0.1.5",
     "svelte-confetti": "^2.3.2",
-    "tw-animate-css": "^1.3.8"
+    "torph": "^0.1.3",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.35.0",
+    "@eslint/compat": "^2.1.0",
+    "@eslint/js": "^10.0.1",
     "@iarna/toml": "2.2.5",
-    "@lucide/svelte": "^0.542.0",
-    "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.37.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.4",
-    "@tauri-apps/cli": "^2.8.4",
-    "@types/bun": "^1.2.21",
+    "@lucide/svelte": "^1.16.0",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.61.1",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@tauri-apps/cli": "^2.11.2",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "@types/bun": "^1.3.14",
     "@types/crypto-js": "^4.2.2",
+    "@types/react-dom": "^19.2.3",
     "@types/semver": "^7.7.1",
-    "autoprefixer": "10.4.21",
-    "bits-ui": "^2.9.6",
+    "bits-ui": "^2.18.1",
     "clsx": "^2.1.1",
-    "eslint": "^9.35.0",
+    "eslint": "^10.4.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.12.2",
-    "globals": "^16.3.0",
-    "mode-watcher": "^1.1.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "sass-embedded": "^1.92.1",
-    "svelte": "^5.38.7",
-    "svelte-check": "^4.3.1",
-    "svelte-sonner": "^1.0.5",
-    "tailwind-merge": "^3.3.1",
-    "tailwind-variants": "^3.1.0",
-    "tailwindcss": "^4.1.7",
-    "tailwindcss-animate": "^1.0.7",
+    "eslint-plugin-svelte": "^3.17.1",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "prettier-plugin-svelte": "^4.0.1",
+    "sass-embedded": "^1.100.0",
+    "svelte": "^5.55.9",
+    "svelte-check": "^4.4.8",
+    "tailwind-merge": "^3.6.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.3.0",
     "tslib": "^2.8.1",
-    "typescript": "^5.9.2",
-    "typescript-eslint": "^8.42.0",
-    "vite": "^7.1.5",
-    "vite-plugin-devtools-json": "^0.4.1"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.60.0",
+    "vite": "^8.0.14",
+    "vite-plugin-devtools-json": "^1.0.0"
   }
 }

scripts/build.ts

@@ -0,0 +1,40 @@
+import { spawn } from 'child_process';
+
+function runVite(): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const proc = spawn('bunx', ['--bun', 'vite', 'build'], { stdio: ['inherit', 'pipe', 'pipe'] });
+
+    proc.stdout?.on('data', (data: Buffer) => {
+      process.stdout.write(data);
+      if (data.toString().includes('✔ done')) {
+        setTimeout(() => {
+          proc.kill();
+          resolve();
+        }, 500);
+      }
+    });
+
+    proc.stderr?.on('data', (data: Buffer) => process.stderr.write(data));
+    proc.on('close', (code) => {
+      if (code === 0 || code === null) resolve();
+      else reject(new Error(`vite build exited with code ${code}`));
+    });
+  });
+}
+
+function run(cmd: string, args: string[]): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const proc = spawn(cmd, args, { stdio: 'inherit' });
+    proc.on('close', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${cmd} exited with code ${code}`));
+    });
+  });
+}
+
+await run('bun', ['./scripts/sync-version.ts']);
+await runVite();
+
+//set NO_STRIP=1 in env for linux to prevent stripping of debug symbols in tauri builds, which causes issues with source maps
+if (process.platform === 'linux') process.env.NO_STRIP = '1';
+await run('bunx', ['tauri', 'build']);

scripts/sync-version.ts

@@ -1,21 +1,28 @@
+import * as toml from '@iarna/toml';
 import fs from 'fs';
 import path from 'path';
-import * as toml from '@iarna/toml';
 import { cwd } from 'process';
 
+const packageJsonPath = path.join(cwd(), 'package.json');
 const cargoTomlPath = path.join(cwd(), 'src-tauri', 'Cargo.toml');
 const tauriConfPath = path.join(cwd(), 'src-tauri', 'tauri.conf.json');
 
-const cargoToml = fs.readFileSync(cargoTomlPath, 'utf8');
-const cargo = toml.parse(cargoToml) as Record<string, string>;
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+const version = packageJson.version;
+if (!version) throw new Error('Could not find version in package.json');
 
-const version = cargo.package['version'];
-if (!version) throw new Error('Could not find version in Cargo.toml');
+let cargoTomlContent = fs.readFileSync(cargoTomlPath, 'utf8');
+const cargo = toml.parse(cargoTomlContent) as { package: { version: string } };
+
+if (cargo.package.version !== version) {
+  cargoTomlContent = cargoTomlContent.replace(/version = ".*?"/, `version = "${version}"`);
+  fs.writeFileSync(cargoTomlPath, cargoTomlContent);
+  console.log(`✅ Synced Cargo.toml version to ${version}`);
+}
 
 const tauriConf = JSON.parse(fs.readFileSync(tauriConfPath, 'utf8'));
 if (tauriConf.version !== version) {
   tauriConf.version = version;
-
   fs.writeFileSync(tauriConfPath, JSON.stringify(tauriConf, null, 2));
   console.log(`✅ Synced tauri.conf.json version to ${version}`);
 }

scripts/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "types": ["@types/bun", "@types/node"]
+  },
+  "include": ["*.ts"]
+}

src-tauri/Cargo.toml

@@ -1,12 +1,22 @@
 [package]
 name = "ezpplauncher"
-version = "3.0.9"
+version = "3.2.7"
 description = "EZPPLauncher redefined."
 authors = ["HorizonCode"]
 edition = "2024"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
+[profile.dev]
+incremental = true # Compile your binary in smaller steps.
+
+[profile.release]
+codegen-units = 1 # Allows LLVM to perform better optimization.
+lto = true # Enables link-time-optimizations.
+opt-level = "s" # Prioritizes small binary size. Use `3` if you prefer speed.
+panic = "abort" # Higher performance by disabling panic handlers.
+strip = true # Ensures debug symbols are removed.
+
 [lib]
 # The `_lib` suffix may seem redundant but it is necessary
 # to make the lib name unique and wouldn't conflict with the bin name.
@@ -15,33 +25,57 @@ name = "ezpplauncher_lib"
 crate-type = ["staticlib", "cdylib", "rlib"]
 
 [build-dependencies]
-tauri-build = { version = "2.4.1", features = [] }
+tauri-build = { version = "2.6.2", features = [] }
 
 [dependencies]
-tauri = { version = "2.8.5", features = [] }
-tauri-plugin-shell = "2.3.1"
-serde = { version = "1.0.219", features = ["derive"] }
-serde_json = "1.0.143"
+tauri = { version = "2.11.2", features = ["protocol-asset"] }
+tauri-plugin-shell = "2.3.5"
+serde = { version = "1.0.228", features = ["derive"] }
+serde_json = "1.0.150"
 serde_repr = "0.1.20"
-tauri-plugin-dialog = "2.4.0"
-tauri-plugin-fs = "2.4.2"
+tauri-plugin-dialog = "2.7.1"
+tauri-plugin-fs = "2.5.1"
 hardware-id = "0.3.0"
-tauri-plugin-cors-fetch = "4.1.0"
-sysinfo = "0.37.0"
-reqwest = { version = "0.12.23", features = ["json", "stream"] }
+tauri-plugin-cors-fetch = "5.0.0"
+sysinfo = "0.39.2"
+reqwest = { version = "0.13.4", features = ["json", "stream", "query"] }
 md5 = "0.8.0"
-tokio = { version = "1.47.1", features = ["full"] }
-open = "5.3.2"
-windows-sys = "0.61.0"
-discord-rich-presence = "1.0.0"
-once_cell = "1.21.3"
+tokio = { version = "1.52.3", features = ["full"] }
+open = "5.3.5"
+presenceforge = { version = "0.2.1", features = ["tokio-runtime"] }
+once_cell = "1.21.4"
+futures-util = "0.3.32"
+byteorder = "1.5.0"
+anyhow = "1.0.102"
+url = "2.5.8"
+zip = "8.6.0"
+sha1 = "0.11.0"
+hex = "0.4.3"
+rusqlite = { version = "0.40.0", features = ["bundled"] }
+aes-gcm = "0.10.3"
+base64 = "0.22.1"
+sha2 = "0.11.0"
+thiserror = "2.0.18"
+tauri-plugin-log = "2"
+log = "0.4"
+time = { version = "0.3", features = ["local-offset"] }
+
+[target.'cfg(any(target_os = "linux", target_os = "macos"))'.dependencies]
+http-body-util = "0.1.3"
+http-range = "0.1.5"
+hyper = { version = "1.8.1", features = ["server", "http1"] }
+hyper-util = { version = "0.1.19", features = ["tokio"] }
+percent-encoding = "2.3.2"
+
+[target.'cfg(target_os = "macos")'.dependencies]
+objc2 = "0.6.3"
 
 [target.'cfg(windows)'.dependencies]
-winreg = "0.55.0"
-winapi = { version = "0.3", features = ["winuser", "wincrypt", "memoryapi", "winbase", "dpapi"] }
-base64 = "0.22.1"
-widestring = "1.0"
+winreg = "0.56.0"
+winapi = { version = "0.3.9", features = ["winuser", "wincrypt", "memoryapi", "winbase", "dpapi"] }
+widestring = "1.2.1"
+windows-sys = "0.61.2"
 
 [target.'cfg(not(any(target_os = "android", target_os = "ios")))'.dependencies]
-tauri-plugin-single-instance = "2.3.4"
+tauri-plugin-single-instance = "2.4.2"
 

src-tauri/capabilities/default.json

@@ -1,8 +1,11 @@
 {
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
-  "description": "Capability for the main window",
-  "windows": ["main"],
+  "description": "Capabilities for the main launcher and theme editor windows",
+  "windows": [
+    "main",
+    "theme-editor"
+  ],
   "permissions": [
     "core:default",
     "shell:allow-open",
@@ -12,6 +15,7 @@
     "core:window:allow-start-dragging",
     "core:window:allow-minimize",
     "core:window:allow-close",
+    "core:window:allow-destroy",
     "cors-fetch:default",
     "core:window:allow-hide",
     "core:window:allow-show",
@@ -19,57 +23,127 @@
     {
       "identifier": "fs:allow-read",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-write",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-exists",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-read-file",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-write-file",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-read-text-file",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     },
     {
       "identifier": "fs:allow-mkdir",
       "allow": [
-        { "path": "$HOME/.ezpplauncher" },
-        { "path": "$HOME/.ezpplauncher/*" },
-        { "path": "$HOME/.ezpplauncher/**/*" }
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
+      ]
+    },
+    {
+      "identifier": "fs:allow-read-dir",
+      "allow": [
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
+      ]
+    },
+    {
+      "identifier": "fs:allow-remove",
+      "allow": [
+        {
+          "path": "$HOME/.ezpplauncher"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/*"
+        },
+        {
+          "path": "$HOME/.ezpplauncher/**/*"
+        }
       ]
     }
   ]

src-tauri/nsis/nsis-hooks.nsh

@@ -4,3 +4,18 @@
         Exec '"$INSTDIR\${MAINBINARYNAME}.exe"'
     ${EndIf}
 !macroend
+
+!macro NSIS_HOOK_PREUNINSTALL
+    ${If} $DeleteAppDataCheckboxState = 1
+        MessageBox MB_YESNO "Do you want to remove all EZPPLauncher data and themes?" IDYES do_delete IDNO skip_delete
+        do_delete:
+            StrCpy $R9 1
+        skip_delete:
+    ${EndIf}
+!macroend
+
+!macro NSIS_HOOK_POSTUNINSTALL
+    ${If} $R9 = 1
+        RMDir /r "$PROFILE\.ezpplauncher"
+    ${EndIf}
+!macroend

src-tauri/src/config.rs

@@ -0,0 +1,219 @@
+use aes_gcm::aead::rand_core::RngCore;
+use aes_gcm::{
+    Aes256Gcm, Key, Nonce,
+    aead::{Aead, KeyInit, OsRng},
+};
+use base64::{Engine, engine::general_purpose::STANDARD as BASE64};
+use rusqlite::{Connection, OptionalExtension, params};
+use serde_json::Value;
+use sha2::{Digest, Sha256};
+use std::path::PathBuf;
+use thiserror::Error;
+
+#[derive(Error, Debug)]
+pub enum ConfigError {
+    #[error("SQLite error: {0}")]
+    Sqlite(#[from] rusqlite::Error),
+    #[error("Encryption error: {0}")]
+    Encryption(String),
+    #[error("JSON error: {0}")]
+    Json(#[from] serde_json::Error),
+    #[error("Base64 error: {0}")]
+    Base64(#[from] base64::DecodeError),
+    #[error("Config not initialized")]
+    NotInitialized,
+    #[error("IO error: {0}")]
+    Io(#[from] std::io::Error),
+}
+
+impl serde::Serialize for ConfigError {
+    fn serialize<S: serde::Serializer>(&self, s: S) -> Result<S::Ok, S::Error> {
+        s.serialize_str(&self.to_string())
+    }
+}
+
+pub struct Config {
+    db_path: PathBuf,
+    conn: Option<Connection>,
+    hwid_key: Option<[u8; 32]>,
+}
+
+impl Config {
+    pub fn new(db_path: impl Into<PathBuf>) -> Self {
+        Self {
+            db_path: db_path.into(),
+            conn: None,
+            hwid_key: None,
+        }
+    }
+
+    pub fn init(&mut self, hwid: &str) -> Result<bool, ConfigError> {
+        let mut hasher = Sha256::new();
+        hasher.update(hwid.as_bytes());
+        let key_bytes: [u8; 32] = hasher.finalize().into();
+        self.hwid_key = Some(key_bytes);
+
+        let is_new = !self.db_path.exists();
+
+        if let Some(parent) = self.db_path.parent() {
+            std::fs::create_dir_all(parent)?;
+        }
+
+        let conn = Connection::open(&self.db_path)?;
+
+        conn.execute_batch(
+            "
+            PRAGMA journal_mode=WAL;
+            CREATE TABLE IF NOT EXISTS config (
+                key       TEXT PRIMARY KEY,
+                value     TEXT NOT NULL,
+                encrypted INTEGER NOT NULL DEFAULT 0
+            );
+        ",
+        )?;
+
+        self.conn = Some(conn);
+        Ok(is_new)
+    }
+
+    pub fn get(&self, key: &str) -> Result<Option<Value>, ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+
+        let mut stmt = conn.prepare("SELECT value, encrypted FROM config WHERE key = ?1")?;
+
+        let row: Option<(String, bool)> = stmt
+            .query_row(params![key], |r| Ok((r.get(0)?, r.get(1)?)))
+            .optional()?;
+
+        match row {
+            None => Ok(None),
+            Some((raw, false)) => Ok(Some(serde_json::from_str::<Value>(&raw)?)),
+            Some((raw, true)) => {
+                let plaintext = self
+                    .decrypt_value(&raw)
+                    .map_err(|_| ConfigError::Encryption(format!("failed to decrypt '{}'", key)))?;
+
+                serde_json::from_str::<Value>(&plaintext)
+                    .map(Some)
+                    .map_err(|_| {
+                        ConfigError::Encryption(format!("decrypted '{}' is not valid JSON", key))
+                    })
+            }
+        }
+    }
+
+    pub fn exists(&self, key: &str) -> Result<bool, ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+        let count: i64 = conn.query_row(
+            "SELECT COUNT(*) FROM config WHERE key = ?1",
+            params![key],
+            |r| r.get(0),
+        )?;
+        Ok(count > 0)
+    }
+
+    /// Return all key/value pairs (decrypting encrypted ones).
+    pub fn all(&self) -> Result<Vec<(String, Value)>, ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+        let mut stmt = conn.prepare("SELECT key, value, encrypted FROM config")?;
+
+        let rows = stmt.query_map([], |r| {
+            Ok((
+                r.get::<_, String>(0)?,
+                r.get::<_, String>(1)?,
+                r.get::<_, bool>(2)?,
+            ))
+        })?;
+
+        let mut out = Vec::new();
+        for row in rows {
+            let (k, raw, enc) = row?;
+            let v: Value = if enc {
+                let pt = self.decrypt_value(&raw)?;
+                serde_json::from_str(&pt)?
+            } else {
+                serde_json::from_str(&raw)?
+            };
+            out.push((k, v));
+        }
+        Ok(out)
+    }
+
+    pub fn set<T: serde::Serialize>(
+        &self,
+        key: &str,
+        value: T,
+        encrypt: bool,
+    ) -> Result<(), ConfigError> {
+        let json = serde_json::to_string(&value)?;
+        if encrypt {
+            let blob = self.encrypt_value(&json)?;
+            self.upsert(key, &blob, true)
+        } else {
+            self.upsert(key, &json, false)
+        }
+    }
+
+    pub fn delete(&self, key: &str) -> Result<(), ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+        conn.execute("DELETE FROM config WHERE key = ?1", params![key])?;
+        Ok(())
+    }
+
+    pub fn clear(&self) -> Result<(), ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+        conn.execute("DELETE FROM config", [])?;
+        Ok(())
+    }
+
+    fn upsert(&self, key: &str, raw: &str, encrypted: bool) -> Result<(), ConfigError> {
+        let conn = self.conn.as_ref().ok_or(ConfigError::NotInitialized)?;
+        conn.execute(
+            "INSERT INTO config (key, value, encrypted)
+             VALUES (?1, ?2, ?3)
+             ON CONFLICT(key) DO UPDATE SET value = excluded.value,
+                                            encrypted = excluded.encrypted",
+            params![key, raw, encrypted as i32],
+        )?;
+        Ok(())
+    }
+
+    fn cipher(&self) -> Result<Aes256Gcm, ConfigError> {
+        let key_bytes = self.hwid_key.ok_or(ConfigError::NotInitialized)?;
+        let key = Key::<Aes256Gcm>::from_slice(&key_bytes);
+        Ok(Aes256Gcm::new(key))
+    }
+
+    fn encrypt_value(&self, plaintext: &str) -> Result<String, ConfigError> {
+        let cipher = self.cipher()?;
+        let mut nonce_bytes = [0u8; 12];
+        OsRng.fill_bytes(&mut nonce_bytes);
+        let nonce = Nonce::from_slice(&nonce_bytes);
+
+        let ciphertext = cipher
+            .encrypt(nonce, plaintext.as_bytes())
+            .map_err(|e| ConfigError::Encryption(e.to_string()))?;
+
+        let mut combined = nonce_bytes.to_vec();
+        combined.extend_from_slice(&ciphertext);
+        Ok(BASE64.encode(&combined))
+    }
+
+    fn decrypt_value(&self, blob: &str) -> Result<String, ConfigError> {
+        let cipher = self.cipher()?;
+        let combined = BASE64.decode(blob)?;
+
+        if combined.len() < 12 {
+            return Err(ConfigError::Encryption("blob too short".into()));
+        }
+
+        let (nonce_bytes, ciphertext) = combined.split_at(12);
+        let nonce = Nonce::from_slice(nonce_bytes);
+
+        let plaintext = cipher
+            .decrypt(nonce, ciphertext)
+            .map_err(|e| ConfigError::Encryption(e.to_string()))?;
+
+        String::from_utf8(plaintext).map_err(|e| ConfigError::Encryption(e.to_string()))
+    }
+}

src-tauri/src/lib.rs

@@ -1,45 +1,157 @@
 // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+use hardware_id::get_id;
+use std::path::PathBuf;
+use std::sync::Mutex;
 use tauri::Manager;
+use tauri_plugin_fs::FsExt;
 
 pub mod commands;
+pub mod config;
+pub mod logging;
+#[cfg(target_os = "macos")]
+pub mod macos;
+pub mod osudb;
 pub mod presence;
+pub mod state;
+#[cfg(any(target_os = "linux", target_os = "macos"))]
+pub mod theme_server;
 pub mod utils;
-use crate::commands::{
-    check_for_corruption, download_ezpp_launcher_update, download_ezpp_launcher_update_files,
-    encrypt_string, exit, find_osu_installation, get_beatmapsets_count,
-    get_ezpp_launcher_update_files, get_hwid, get_launcher_version, get_osu_release_stream,
-    get_osu_skin, get_osu_version, get_platform, get_skins_count, has_net8, has_osuwinello,
-    has_wmctrl, install_ezpp_launcher_update, is_osu_running, open_url_in_browser,
-    presence_connect, presence_disconnect, presence_is_connected, presence_update_status,
-    presence_update_user, replace_ui_files, run_osu, run_osu_updater, set_osu_config_values,
-    set_osu_user_config_values, valid_osu_folder,
+use crate::{
+    commands::{
+        backup_theme_folder, check_for_corruption, config_all, config_clear, config_delete,
+        config_exists, config_get, config_set, download_and_extract_theme,
+        download_ezpp_launcher_update, download_ezpp_launcher_update_files, encrypt_string, exit,
+        export_theme, extract_theme, file_size, find_osu_installation, get_beatmapsets_count,
+        get_ezpp_launcher_update_files, get_hwid, get_launcher_version, get_osu_release_stream,
+        get_osu_skin, get_osu_version, get_platform, get_skins_count, has_net8, has_osuwinello,
+        has_wmctrl, install_ezpp_launcher_update, installation_diagnostics,
+        is_open_tablet_driver_path_valid, is_open_tablet_driver_running, is_osu_running,
+        list_theme_backups, log_frontend, open_logs_folder, open_theme_editor, open_theme_folder,
+        open_url_in_browser, opened_urls, optimize_theme_media, pick_osu_installation,
+        presence_connect, presence_disconnect, presence_is_connected, presence_update_button,
+        presence_update_status, presence_update_user, read_theme_info, replace_ui_files,
+        resolve_osu_folder, restore_theme_backup, run_open_tablet_driver, run_osu, run_osu_updater,
+        save_theme_project, set_logging_enabled, set_osu_config_values, set_osu_user_config_values,
+        stop_open_tablet_driver, theme_asset_base, theme_editor_context, theme_preview_url,
+        valid_osu_folder,
+    },
+    state::AppState,
 };
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 pub fn run() {
-    #[cfg(target_os = "linux")]
-    unsafe {
-        std::env::set_var("WEBKIT_DISABLE_DMABUF_RENDERER", "1");
-    }
-
-    let mut builder = tauri::Builder::default();
+    let mut builder = tauri::Builder::default().plugin(logging::plugin());
     #[cfg(desktop)]
     {
-        builder = builder.plugin(tauri_plugin_single_instance::init(|app, _args, _cwd| {
+        builder = builder.plugin(tauri_plugin_single_instance::init(|app, args, _cwd| {
             let app_window = app.get_webview_window("main").expect("no main window");
             app_window.set_focus().expect("failed to focus");
+            if args.len() > 1 {
+                use tauri::Emitter;
+
+                let mut files = Vec::new();
+
+                for maybe_file in args.iter().skip(1) {
+                    if maybe_file.starts_with("-") {
+                        continue;
+                    }
+
+                    let path = PathBuf::from(maybe_file);
+
+                    if path.extension().and_then(|e| e.to_str()) == Some("ezpplauncher-theme") {
+                        app.fs_scope().allow_file(&path).ok();
+                        files.push(path);
+                    }
+                }
+
+                app.emit("opened", files.clone()).ok();
+            }
         }));
     }
 
     let app = builder
+        .setup(|app| {
+            log::info!(
+                target: "launcher",
+                "EZPPLauncher {} starting on {} ({}) — logs: {}",
+                env!("CARGO_PKG_VERSION"),
+                std::env::consts::OS,
+                std::env::consts::ARCH,
+                logging::logs_directory().display()
+            );
+
+            // ── Config ────────────────────────────────────────────────────────
+            let home = std::env::var("HOME")
+                .or_else(|_| std::env::var("USERPROFILE"))
+                .unwrap_or_else(|_| ".".into());
+            let db_path = PathBuf::from(home).join(".ezpplauncher").join("config.db");
+
+            let hwid = get_id().unwrap_or_else(|_| "recorderinsandybridge".into());
+
+            let mut cfg = config::Config::new(db_path);
+            cfg.init(&hwid)?;
+
+            // ── Opened files ──────────────────────────────────────────────────
+            let mut opened_files = Vec::new();
+            let args = std::env::args().collect::<Vec<_>>();
+            if args.len() > 1 {
+                for maybe_file in args.iter().skip(1) {
+                    if maybe_file.starts_with("-") {
+                        continue;
+                    }
+                    let path = PathBuf::from(maybe_file);
+                    if path.extension().and_then(|e| e.to_str()) == Some("ezpplauncher-theme") {
+                        app.fs_scope().allow_file(&path).ok();
+                        opened_files.push(path);
+                    }
+                }
+            }
+
+            app.manage(AppState {
+                config: Mutex::new(cfg),
+                opened_files: Mutex::new(opened_files),
+                editor_theme_folder: Mutex::new(None),
+            });
+
+            // WebKit's custom-protocol media pipeline is unreliable (and
+            // loads large WebMs into memory), so Linux and macOS use a real
+            // loopback HTTP server with byte-range support instead.
+            #[cfg(any(target_os = "linux", target_os = "macos"))]
+            match commands::theme_root().and_then(|root| {
+                let media = theme_server::media_root()?;
+                theme_server::start(root, media)
+            }) {
+                Ok(_) => {}
+                Err(error) => log::warn!(
+                    target: "launcher",
+                    "Could not start the theme asset server: {error}"
+                ),
+            }
+
+            #[cfg(target_os = "macos")]
+            if let Some(window) = app.get_webview_window("main") {
+                if let Err(error) = macos::round_window(&window, 12.0) {
+                    log::warn!(target: "launcher", "Could not round the launcher window: {error}");
+                }
+                if let Err(error) = macos::allow_media_autoplay(&window) {
+                    log::warn!(target: "launcher", "{error}");
+                }
+            }
+
+            Ok(())
+        })
         .invoke_handler(tauri::generate_handler![
+            opened_urls,
             get_hwid,
             find_osu_installation,
+            pick_osu_installation,
+            resolve_osu_folder,
             valid_osu_folder,
             get_beatmapsets_count,
             get_skins_count,
             get_osu_version,
             get_osu_release_stream,
+            installation_diagnostics,
             set_osu_config_values,
             set_osu_user_config_values,
             run_osu_updater,
@@ -53,18 +165,49 @@ pub fn run() {
             get_launcher_version,
             exit,
             get_platform,
+            file_size,
             check_for_corruption,
             presence_connect,
             presence_disconnect,
             presence_update_status,
             presence_update_user,
+            presence_update_button,
             presence_is_connected,
             has_osuwinello,
             has_wmctrl,
             has_net8,
             encrypt_string,
             download_ezpp_launcher_update,
-            install_ezpp_launcher_update
+            install_ezpp_launcher_update,
+            read_theme_info,
+            backup_theme_folder,
+            list_theme_backups,
+            restore_theme_backup,
+            extract_theme,
+            download_and_extract_theme,
+            save_theme_project,
+            export_theme,
+            open_theme_folder,
+            open_theme_editor,
+            theme_editor_context,
+            theme_asset_base,
+            theme_preview_url,
+            optimize_theme_media,
+            config_get,
+            config_set,
+            config_exists,
+            config_delete,
+            config_clear,
+            config_all,
+            run_open_tablet_driver,
+            stop_open_tablet_driver,
+            is_open_tablet_driver_running,
+            is_open_tablet_driver_path_valid,
+            log_frontend,
+            set_logging_enabled,
+            open_logs_folder,
+            logging::list_log_bundles,
+            logging::read_log_bundle
         ])
         .plugin(tauri_plugin_fs::init())
         .plugin(tauri_plugin_dialog::init())
@@ -73,12 +216,21 @@ pub fn run() {
         .build(tauri::generate_context!())
         .expect("error while building tauri application");
 
-    app.run(|_app_handle, event| {
-        if let tauri::RunEvent::ExitRequested { api, .. } = event {
-            api.prevent_exit();
-
-            tauri::async_runtime::block_on(presence::disconnect());
-            std::process::exit(0);
+    app.run(|app, event| {
+        // The content view can be replaced again while the webview is being
+        // built, so re-apply the corner mask once the app is ready.
+        #[cfg(target_os = "macos")]
+        if let tauri::RunEvent::Ready = &event {
+            if let Some(window) = app.get_webview_window("main") {
+                if let Err(error) = macos::round_window(&window, 12.0) {
+                    log::warn!(target: "launcher", "Could not round the launcher window: {error}");
+                }
+                if let Err(error) = macos::allow_media_autoplay(&window) {
+                    log::warn!(target: "launcher", "{error}");
+                }
+            }
         }
+
+        presence::handle_run_event(app, &event);
     });
 }

src-tauri/src/logging.rs

@@ -0,0 +1,637 @@
+//! Rotating file logs for the launcher, osu! and the patcher.
+//!
+//! Each stream writes to `~/.ezpplauncher/logs`:
+//!
+//! - `launcher.log` receives everything, including frontend console output.
+//! - `osu.log` receives osu! and its updater, including stdout/stderr.
+//! - `patcher.log` receives patcher output.
+//!
+//! A stream's file is only created when it actually has a line to write, so a
+//! launch without osu!/patcher output never leaves empty files behind. When a
+//! new session starts, or any stream reaches 5 MiB, all three active files are
+//! bundled into one `logs_<date>_<time>.zip` and fresh files are started. The
+//! five most recent bundles are kept, so a support report only needs one file.
+//! `launcher.log` intentionally includes the osu!/patcher entries too. File
+//! logging can be disabled from Settings → Logging; stdout output is unchanged.
+
+use std::fs::{self, File, OpenOptions};
+use std::io::{self, Read, Write};
+use std::path::{Path, PathBuf};
+use std::sync::atomic::{AtomicBool, Ordering};
+use std::sync::{Arc, Mutex};
+
+use log::Level;
+use serde::Serialize;
+use tauri::Runtime;
+use tauri::plugin::TauriPlugin;
+use tauri_plugin_log::{Target, TargetKind, TimezoneStrategy};
+use tokio::io::{AsyncBufReadExt, AsyncRead, BufReader};
+use tokio::process::Child;
+
+const MAX_LOG_SIZE: u64 = 5 * 1024 * 1024;
+const KEPT_LOG_BUNDLES: usize = 5;
+const MAX_LINE_CHARS: usize = 16_000;
+
+static ENABLED: AtomicBool = AtomicBool::new(true);
+
+pub fn set_logging_enabled(enabled: bool) {
+    ENABLED.store(enabled, Ordering::Relaxed);
+}
+
+fn logging_enabled() -> bool {
+    ENABLED.load(Ordering::Relaxed)
+}
+
+/// Read the persisted setting before the config database is initialized, so a
+/// disabled logger does not write a startup file before the frontend loads.
+fn initial_logging_enabled() -> bool {
+    let Some(home) = std::env::var_os("HOME").or_else(|| std::env::var_os("USERPROFILE")) else {
+        return true;
+    };
+    let db_path = PathBuf::from(home).join(".ezpplauncher").join("config.db");
+
+    if !db_path.exists() {
+        return true;
+    }
+
+    let Ok(connection) =
+        rusqlite::Connection::open_with_flags(&db_path, rusqlite::OpenFlags::SQLITE_OPEN_READ_ONLY)
+    else {
+        return true;
+    };
+
+    let Ok(raw) = connection.query_row(
+        "SELECT value FROM config WHERE key = 'logging_enabled'",
+        [],
+        |row| row.get::<_, String>(0),
+    ) else {
+        return true;
+    };
+
+    serde_json::from_str::<bool>(&raw).unwrap_or(true)
+}
+
+pub fn logs_directory() -> PathBuf {
+    let home = std::env::var_os("HOME")
+        .or_else(|| std::env::var_os("USERPROFILE"))
+        .map(PathBuf::from)
+        .unwrap_or_else(|| PathBuf::from("."));
+
+    home.join(".ezpplauncher").join("logs")
+}
+
+#[derive(Clone, Copy)]
+enum Stream {
+    Launcher,
+    Osu,
+    Patcher,
+}
+
+impl Stream {
+    const ALL: [Stream; 3] = [Stream::Launcher, Stream::Osu, Stream::Patcher];
+
+    fn index(self) -> usize {
+        match self {
+            Stream::Launcher => 0,
+            Stream::Osu => 1,
+            Stream::Patcher => 2,
+        }
+    }
+
+    fn file_name(self) -> &'static str {
+        match self {
+            Stream::Launcher => "launcher.log",
+            Stream::Osu => "osu.log",
+            Stream::Patcher => "patcher.log",
+        }
+    }
+}
+
+/// Shared state for the three log files. Rotating any stream closes and
+/// bundles all of them, so every bundle always holds the same session.
+struct LogSet {
+    dir: PathBuf,
+    state: Mutex<LogState>,
+}
+
+struct LogState {
+    started: bool,
+    files: [Option<File>; 3],
+    sizes: [u64; 3],
+}
+
+impl LogSet {
+    fn new(dir: PathBuf) -> Self {
+        Self {
+            dir,
+            state: Mutex::new(LogState {
+                started: false,
+                files: [None, None, None],
+                sizes: [0; 3],
+            }),
+        }
+    }
+
+    fn write(&self, stream: Stream, buf: &[u8]) -> io::Result<usize> {
+        if buf.is_empty() {
+            return Ok(0);
+        }
+
+        let mut state = self
+            .state
+            .lock()
+            .unwrap_or_else(|poisoned| poisoned.into_inner());
+
+        if !state.started {
+            state.started = true;
+            bundle_active_logs(&self.dir)?;
+            prune_bundles(&self.dir)?;
+        }
+
+        let index = stream.index();
+
+        if state.files[index].is_none() {
+            self.open_stream(&mut state, stream)?;
+        }
+
+        if state.sizes[index] > 0
+            && state.sizes[index].saturating_add(buf.len() as u64) > MAX_LOG_SIZE
+        {
+            self.rotate(&mut state, stream)?;
+        }
+
+        let file = state.files[index].as_mut().expect("stream log is open");
+        file.write_all(buf)?;
+        state.sizes[index] += buf.len() as u64;
+        Ok(buf.len())
+    }
+
+    fn flush(&self, stream: Stream) -> io::Result<()> {
+        let mut state = self
+            .state
+            .lock()
+            .unwrap_or_else(|poisoned| poisoned.into_inner());
+
+        match state.files[stream.index()].as_mut() {
+            Some(file) => file.flush(),
+            None => Ok(()),
+        }
+    }
+
+    fn open_stream(&self, state: &mut LogState, stream: Stream) -> io::Result<()> {
+        fs::create_dir_all(&self.dir)?;
+
+        let file = OpenOptions::new()
+            .create(true)
+            .append(true)
+            .open(self.dir.join(stream.file_name()))?;
+        let index = stream.index();
+        state.sizes[index] = file.metadata()?.len();
+        state.files[index] = Some(file);
+        Ok(())
+    }
+
+    fn rotate(&self, state: &mut LogState, stream: Stream) -> io::Result<()> {
+        for file in state.files.iter_mut() {
+            if let Some(mut file) = file.take() {
+                let _ = file.flush();
+            }
+        }
+
+        bundle_active_logs(&self.dir)?;
+        prune_bundles(&self.dir)?;
+
+        let index = stream.index();
+        state.sizes[index] = 0;
+        self.open_stream(state, stream)
+    }
+}
+
+struct SessionWriter {
+    logs: Arc<LogSet>,
+    stream: Stream,
+}
+
+impl Write for SessionWriter {
+    fn write(&mut self, buf: &[u8]) -> io::Result<usize> {
+        if !logging_enabled() {
+            return Ok(buf.len());
+        }
+
+        self.logs.write(self.stream, buf)
+    }
+
+    fn flush(&mut self) -> io::Result<()> {
+        if !logging_enabled() {
+            return Ok(());
+        }
+
+        self.logs.flush(self.stream)
+    }
+}
+
+/// Zip the active logs that have content and remove them afterwards.
+fn bundle_active_logs(dir: &Path) -> io::Result<()> {
+    let mut entries = Vec::new();
+
+    for stream in Stream::ALL {
+        let path = dir.join(stream.file_name());
+
+        match path.metadata() {
+            Ok(metadata) if metadata.len() > 0 => {
+                entries.push((path, stream.file_name().to_string()));
+            }
+            Ok(_) => {}
+            Err(error) if error.kind() == io::ErrorKind::NotFound => {}
+            Err(error) => return Err(error),
+        }
+    }
+
+    if entries.is_empty() {
+        return Ok(());
+    }
+
+    fs::create_dir_all(dir)?;
+    let bundle_path = unique_bundle_path(dir);
+
+    let result = (|| -> io::Result<()> {
+        let file = File::create(&bundle_path)?;
+        let mut zip = zip::ZipWriter::new(file);
+        let options = zip::write::SimpleFileOptions::default()
+            .compression_method(zip::CompressionMethod::Deflated);
+
+        for (path, name) in &entries {
+            zip.start_file(name.clone(), options).map_err(|error| {
+                io::Error::other(format!("Could not add {name} to the log bundle: {error}"))
+            })?;
+            let mut source = File::open(path)?;
+            io::copy(&mut source, &mut zip)?;
+        }
+
+        zip.finish().map_err(|error| {
+            io::Error::other(format!("Could not finish the log bundle: {error}"))
+        })?;
+        Ok(())
+    })();
+
+    if let Err(error) = result {
+        let _ = fs::remove_file(&bundle_path);
+        return Err(error);
+    }
+
+    for (path, _) in entries {
+        fs::remove_file(path)?;
+    }
+
+    Ok(())
+}
+
+fn unique_bundle_path(dir: &Path) -> PathBuf {
+    let stamp = archive_timestamp();
+    let mut path = dir.join(format!("logs_{stamp}.zip"));
+    let mut suffix = 1;
+
+    while path.exists() {
+        path = dir.join(format!("logs_{stamp}-{suffix}.zip"));
+        suffix += 1;
+    }
+
+    path
+}
+
+fn archive_timestamp() -> String {
+    let now = time::OffsetDateTime::now_local().unwrap_or_else(|_| time::OffsetDateTime::now_utc());
+
+    format!(
+        "{:04}-{:02}-{:02}_{:02}-{:02}-{:02}",
+        now.year(),
+        u8::from(now.month()),
+        now.day(),
+        now.hour(),
+        now.minute(),
+        now.second()
+    )
+}
+
+fn prune_bundles(dir: &Path) -> io::Result<()> {
+    let mut bundles = fs::read_dir(dir)?
+        .filter_map(|entry| {
+            let entry = entry.ok()?;
+            let path = entry.path();
+            let file_name = path.file_name()?.to_str()?;
+
+            if !file_name.starts_with("logs_") || !file_name.ends_with(".zip") {
+                return None;
+            }
+
+            let modified = entry.metadata().ok()?.modified().ok()?;
+            Some((path, modified))
+        })
+        .collect::<Vec<_>>();
+
+    bundles.sort_by_key(|(_, modified)| *modified);
+
+    if bundles.len() > KEPT_LOG_BUNDLES {
+        for (path, _) in bundles.iter().take(bundles.len() - KEPT_LOG_BUNDLES) {
+            fs::remove_file(path)?;
+        }
+    }
+
+    Ok(())
+}
+
+fn file_target(set: &Arc<LogSet>, stream: Stream) -> Target {
+    let writer = SessionWriter {
+        logs: Arc::clone(set),
+        stream,
+    };
+    let dispatch = tauri_plugin_log::fern::Dispatch::new().chain(
+        tauri_plugin_log::fern::Output::writer(Box::new(writer), "\n"),
+    );
+
+    Target::new(TargetKind::Dispatch(dispatch))
+}
+
+/// Build the log plugin. File targets are filtered by logging target so osu!
+/// and patcher output stay separate while still being copied to the main log.
+pub fn plugin<R: Runtime>() -> TauriPlugin<R> {
+    set_logging_enabled(initial_logging_enabled());
+
+    let logs_dir = logs_directory();
+    let set = Arc::new(LogSet::new(logs_dir));
+
+    let launcher = file_target(&set, Stream::Launcher);
+    let osu =
+        file_target(&set, Stream::Osu).filter(|metadata| metadata.target().starts_with("osu"));
+    let patcher = file_target(&set, Stream::Patcher)
+        .filter(|metadata| metadata.target().starts_with("patcher"));
+
+    tauri_plugin_log::Builder::new()
+        .targets([Target::new(TargetKind::Stdout), launcher, osu, patcher])
+        .level(if cfg!(debug_assertions) {
+            log::LevelFilter::Debug
+        } else {
+            log::LevelFilter::Info
+        })
+        .timezone_strategy(TimezoneStrategy::UseLocal)
+        .build()
+}
+
+#[derive(Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct LogBundleInfo {
+    pub path: String,
+    pub name: String,
+    pub size: u64,
+    pub modified: u64,
+}
+
+#[derive(Serialize, Clone)]
+#[serde(rename_all = "camelCase")]
+pub struct LogBundleEntry {
+    pub name: String,
+    pub content: String,
+}
+
+/// List the rotating ZIP bundles, newest first, for the in-app log viewer.
+#[tauri::command]
+pub fn list_log_bundles() -> Result<Vec<LogBundleInfo>, String> {
+    let dir = logs_directory();
+    if !dir.is_dir() {
+        return Ok(Vec::new());
+    }
+
+    let mut bundles = fs::read_dir(&dir)
+        .map_err(|error| format!("Could not read the logs folder: {error}"))?
+        .filter_map(|entry| entry.ok())
+        .filter_map(|entry| {
+            let path = entry.path();
+            let name = path.file_name()?.to_str()?.to_string();
+            if !name.starts_with("logs_") || !name.ends_with(".zip") {
+                return None;
+            }
+            let metadata = entry.metadata().ok()?;
+            let modified = metadata
+                .modified()
+                .ok()
+                .and_then(|time| time.duration_since(std::time::UNIX_EPOCH).ok())
+                .map(|duration| duration.as_millis() as u64)
+                .unwrap_or(0);
+            Some(LogBundleInfo {
+                path: path.to_string_lossy().into_owned(),
+                name,
+                size: metadata.len(),
+                modified,
+            })
+        })
+        .collect::<Vec<_>>();
+
+    bundles.sort_by(|a, b| b.modified.cmp(&a.modified));
+    Ok(bundles)
+}
+
+/// Read the launcher/osu/patcher logs out of one bundle.
+#[tauri::command]
+pub fn read_log_bundle(path: String) -> Result<Vec<LogBundleEntry>, String> {
+    let dir = logs_directory();
+    let requested = fs::canonicalize(&path)
+        .map_err(|error| format!("Could not open the log bundle: {error}"))?;
+    let root = fs::canonicalize(&dir)
+        .map_err(|error| format!("Could not resolve the logs folder: {error}"))?;
+    if !requested.starts_with(&root) {
+        return Err("The log bundle is outside the logs folder".to_string());
+    }
+
+    let file = File::open(&requested)
+        .map_err(|error| format!("Could not read the log bundle: {error}"))?;
+    let mut archive =
+        zip::ZipArchive::new(file).map_err(|error| format!("Invalid log bundle: {error}"))?;
+    let mut entries = Vec::new();
+
+    for index in 0..archive.len() {
+        let mut entry = archive
+            .by_index(index)
+            .map_err(|error| format!("Could not read a log entry: {error}"))?;
+        if !entry.name().ends_with(".log") {
+            continue;
+        }
+
+        let mut bytes = Vec::new();
+        entry
+            .by_ref()
+            .take(2 * 1024 * 1024)
+            .read_to_end(&mut bytes)
+            .map_err(|error| format!("Could not read a log entry: {error}"))?;
+        let mut content = String::from_utf8_lossy(&bytes).into_owned();
+        if entry.size() > bytes.len() as u64 {
+            content.push_str("\n… log truncated in the viewer …\n");
+        }
+        entries.push(LogBundleEntry {
+            name: entry.name().to_string(),
+            content,
+        });
+    }
+
+    entries.sort_by(|a, b| a.name.cmp(&b.name));
+    Ok(entries)
+}
+
+/// Start reading a child's stdout/stderr and write every line to `target`.
+pub fn capture_osu_output(child: &mut Child) {
+    capture_output(child, "osu");
+}
+
+/// Start reading a child's stdout/stderr and write every line to `target`.
+pub fn capture_patcher_output(child: &mut Child) {
+    capture_output(child, "patcher");
+}
+
+fn capture_output(child: &mut Child, target: &'static str) {
+    if let Some(stdout) = child.stdout.take() {
+        stream_lines(stdout, "stdout", target);
+    }
+    if let Some(stderr) = child.stderr.take() {
+        stream_lines(stderr, "stderr", target);
+    }
+}
+
+fn stream_lines<R>(reader: R, stream: &'static str, target: &'static str)
+where
+    R: AsyncRead + Unpin + Send + 'static,
+{
+    tauri::async_runtime::spawn(async move {
+        let mut lines = BufReader::new(reader).lines();
+
+        loop {
+            match lines.next_line().await {
+                Ok(Some(line)) => {
+                    let line = truncate(line.trim_end_matches(['\r', '\n']));
+                    if !line.is_empty() {
+                        log::log!(target: target, Level::Info, "[{stream}] {line}");
+                    }
+                }
+                Ok(None) => break,
+                Err(error) => {
+                    log::log!(
+                        target: target,
+                        Level::Warn,
+                        "Could not read {stream} output: {error}"
+                    );
+                    break;
+                }
+            }
+        }
+    });
+}
+
+fn truncate(mut value: &str) -> String {
+    if value.chars().count() <= MAX_LINE_CHARS {
+        return value.to_string();
+    }
+
+    value = &value[..value
+        .char_indices()
+        .nth(MAX_LINE_CHARS)
+        .map(|(index, _)| index)
+        .unwrap_or(value.len())];
+    format!("{value}…")
+}
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+    use std::io::Read;
+    use std::sync::atomic::{AtomicUsize, Ordering};
+
+    static COUNTER: AtomicUsize = AtomicUsize::new(0);
+
+    fn temp_dir(name: &str) -> PathBuf {
+        let id = COUNTER.fetch_add(1, Ordering::Relaxed);
+        let dir =
+            std::env::temp_dir().join(format!("ezpp-logging-{}-{name}-{id}", std::process::id()));
+        let _ = fs::remove_dir_all(&dir);
+        fs::create_dir_all(&dir).unwrap();
+        dir
+    }
+
+    fn write_line(logs: &Arc<LogSet>, stream: Stream, line: &str) {
+        let mut writer = SessionWriter {
+            logs: Arc::clone(logs),
+            stream,
+        };
+        writer.write_all(line.as_bytes()).unwrap();
+        writer.flush().unwrap();
+    }
+
+    #[test]
+    fn creates_file_only_after_first_line() {
+        let dir = temp_dir("lazy");
+        let logs = Arc::new(LogSet::new(dir.clone()));
+
+        assert!(!dir.join("osu.log").exists());
+
+        write_line(&logs, Stream::Osu, "[stdout] first\n");
+
+        assert_eq!(
+            fs::read_to_string(dir.join("osu.log")).unwrap(),
+            "[stdout] first\n"
+        );
+        assert!(!dir.join("launcher.log").exists());
+        assert!(!dir.join("patcher.log").exists());
+
+        drop(logs);
+        fs::remove_dir_all(dir).unwrap();
+    }
+
+    #[test]
+    fn bundles_all_streams_when_a_new_session_starts() {
+        let dir = temp_dir("bundle");
+
+        let previous = Arc::new(LogSet::new(dir.clone()));
+        write_line(&previous, Stream::Launcher, "launcher previous\n");
+        write_line(&previous, Stream::Osu, "osu previous\n");
+        write_line(&previous, Stream::Patcher, "patcher previous\n");
+        drop(previous);
+
+        let current = Arc::new(LogSet::new(dir.clone()));
+        write_line(&current, Stream::Launcher, "launcher current\n");
+
+        // Active files only contain the new session.
+        assert_eq!(
+            fs::read_to_string(dir.join("launcher.log")).unwrap(),
+            "launcher current\n"
+        );
+        assert!(!dir.join("osu.log").exists());
+        assert!(!dir.join("patcher.log").exists());
+
+        let bundles = fs::read_dir(&dir)
+            .unwrap()
+            .filter_map(|entry| entry.ok())
+            .map(|entry| entry.path())
+            .filter(|path| path.extension().and_then(|ext| ext.to_str()) == Some("zip"))
+            .collect::<Vec<_>>();
+
+        assert_eq!(bundles.len(), 1);
+
+        let file = File::open(&bundles[0]).unwrap();
+        let mut zip = zip::ZipArchive::new(file).unwrap();
+        assert_eq!(zip.len(), 3);
+
+        let mut names = (0..zip.len())
+            .map(|index| zip.by_index(index).unwrap().name().to_string())
+            .collect::<Vec<_>>();
+        names.sort();
+        assert_eq!(names, ["launcher.log", "osu.log", "patcher.log"]);
+
+        let mut launcher = String::new();
+        zip.by_name("launcher.log")
+            .unwrap()
+            .read_to_string(&mut launcher)
+            .unwrap();
+        assert_eq!(launcher, "launcher previous\n");
+
+        drop(zip);
+        drop(current);
+        fs::remove_dir_all(dir).unwrap();
+    }
+}

src-tauri/src/macos.rs

@@ -0,0 +1,907 @@
+//! macOS support for osu! stable running inside a Wine wrapper.
+//!
+//! osu! stable is a Windows application, so on macOS it has to run through a
+//! Wine-based wrapper. The launcher supports Wineskin wrappers (the common
+//! `osu!.app` wine skin), Whisky bottles and CrossOver bottles.
+
+use std::ffi::OsStr;
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::process::Stdio;
+use std::time::{Duration as StdDuration, Instant};
+use tokio::process::{Child, Command};
+use tokio::time::{Duration, sleep};
+
+use crate::utils::is_valid_osu_folder;
+
+/// Round the borderless launcher window and make its corners transparent.
+///
+/// macOS does not round undecorated windows on its own, so the webview has to
+/// be clipped with the content view's layer. The window itself is made
+/// transparent so the area outside that clip shows the desktop instead of a
+/// square background.
+pub fn round_window(window: &tauri::WebviewWindow, radius: f64) -> Result<(), String> {
+    use objc2::msg_send;
+    use objc2::runtime::AnyObject;
+
+    let ns_window = window.ns_window().map_err(|error| error.to_string())? as *mut AnyObject;
+    if ns_window.is_null() {
+        return Err("The native window is not available".into());
+    }
+
+    unsafe {
+        let _: () = msg_send![ns_window, setOpaque: false];
+        let clear: *mut AnyObject = msg_send![objc2::class!(NSColor), clearColor];
+        let _: () = msg_send![ns_window, setBackgroundColor: clear];
+        let _: () = msg_send![ns_window, setHasShadow: true];
+
+        let content_view: *mut AnyObject = msg_send![ns_window, contentView];
+        if content_view.is_null() {
+            return Err("The native content view is not available".into());
+        }
+
+        let _: () = msg_send![content_view, setWantsLayer: true];
+        let layer: *mut AnyObject = msg_send![content_view, layer];
+        if layer.is_null() {
+            return Err("The native content view has no layer".into());
+        }
+
+        let _: () = msg_send![layer, setCornerRadius: radius];
+        let _: () = msg_send![layer, setMasksToBounds: true];
+        let _: () = msg_send![ns_window, invalidateShadow];
+    }
+
+    Ok(())
+}
+
+/// Allow theme media to start without a click. WKWebView otherwise blocks
+/// autoplay for anything with an audio track, which makes a theme's background
+/// video sit frozen until the user interacts with the launcher.
+pub fn allow_media_autoplay(window: &tauri::WebviewWindow) -> Result<(), String> {
+    use objc2::msg_send;
+    use objc2::runtime::AnyObject;
+
+    window
+        .with_webview(|webview| unsafe {
+            let webview = webview.inner() as *mut AnyObject;
+            if webview.is_null() {
+                return;
+            }
+
+            let configuration: *mut AnyObject = msg_send![webview, configuration];
+            if configuration.is_null() {
+                return;
+            } // WKAudiovisualMediaTypesNone. This is a public WKWebView setting.
+            let _: () =
+                msg_send![configuration, setMediaTypesRequiringUserActionForPlayback: 0usize];
+            let current: usize = msg_send![configuration, mediaTypesRequiringUserActionForPlayback];
+            log::debug!(
+                target: "launcher",
+                "Theme media autoplay policy: {current}"
+            );
+        })
+        .map_err(|error| format!("Could not enable theme media autoplay: {error}"))
+}
+
+/// Show a native open panel that accepts `.app` bundles as well as folders.
+///
+/// AppKit treats application bundles as packages (directories) by default, so a
+/// regular folder picker descends into `osu!.app` instead of selecting it. This
+/// panel turns that behaviour off, letting the user pick the wrapper itself,
+/// while still allowing a plain Wine prefix folder to be selected.
+pub fn pick_osu_installation() -> Result<Option<PathBuf>, String> {
+    use objc2::msg_send;
+    use objc2::rc::autoreleasepool;
+    use objc2::runtime::AnyObject;
+    use std::ffi::{CStr, CString};
+
+    unsafe fn ns_string(value: &str) -> Result<*mut AnyObject, String> {
+        let value = CString::new(value).map_err(|_| "The path contains a NUL byte".to_string())?;
+        let string: *mut AnyObject =
+            unsafe { msg_send![objc2::class!(NSString), stringWithUTF8String: value.as_ptr()] };
+        if string.is_null() {
+            return Err("Could not create the native dialog text".to_string());
+        }
+        Ok(string)
+    }
+
+    autoreleasepool(|_| unsafe {
+        let panel: *mut AnyObject = msg_send![objc2::class!(NSOpenPanel), openPanel];
+        if panel.is_null() {
+            return Err("Could not create the native file picker".to_string());
+        }
+
+        let _: () = msg_send![panel, setCanChooseFiles: true];
+        let _: () = msg_send![panel, setCanChooseDirectories: true];
+        // Keep `.app` bundles selectable instead of navigating into them.
+        let _: () = msg_send![panel, setTreatsFilePackagesAsDirectories: false];
+        let _: () = msg_send![panel, setAllowsMultipleSelection: false];
+        let _: () = msg_send![panel, setCanCreateDirectories: false];
+
+        let title = ns_string("Select osu!.app")?;
+        let _: () = msg_send![panel, setTitle: title];
+        let message = ns_string("Pick your osu!.app wrapper, or a Wine prefix folder.")?;
+        let _: () = msg_send![panel, setMessage: message];
+        let prompt = ns_string("Select")?;
+        let _: () = msg_send![panel, setPrompt: prompt];
+
+        let applications = ns_string("/Applications")?;
+        let directory_url: *mut AnyObject =
+            msg_send![objc2::class!(NSURL), fileURLWithPath: applications];
+        if !directory_url.is_null() {
+            let _: () = msg_send![panel, setDirectoryURL: directory_url];
+        }
+
+        // NSModalResponseOK
+        let response: i64 = msg_send![panel, runModal];
+        if response != 1 {
+            return Ok(None);
+        }
+
+        let url: *mut AnyObject = msg_send![panel, URL];
+        if url.is_null() {
+            return Ok(None);
+        }
+        let path: *mut AnyObject = msg_send![url, path];
+        if path.is_null() {
+            return Ok(None);
+        }
+        let utf8: *const std::os::raw::c_char = msg_send![path, UTF8String];
+        if utf8.is_null() {
+            return Ok(None);
+        }
+
+        let path = CStr::from_ptr(utf8).to_string_lossy().into_owned();
+        Ok(Some(PathBuf::from(path)))
+    })
+}
+
+pub struct WineRuntime {
+    prefix: PathBuf,
+    wine_bin: PathBuf,
+    wine_root: Option<PathBuf>,
+}
+
+#[derive(Clone)]
+pub struct WineDiagnostics {
+    pub prefix: PathBuf,
+    pub wine_bin: PathBuf,
+    pub app_bundle: Option<PathBuf>,
+    pub net8_installed: bool,
+    pub wine_version: Option<String>,
+    pub prefix_arch: Option<String>,
+}
+
+impl WineDiagnostics {
+    /// Inspect the wrapper without starting it, for the launcher's diagnostics panel.
+    pub fn for_osu_folder(osu_folder: &Path) -> Result<Self, String> {
+        let runtime = WineRuntime::for_osu_folder(osu_folder)?;
+        let net8_installed = [
+            runtime
+                .prefix
+                .join("drive_c/Program Files/dotnet/shared/Microsoft.WindowsDesktop.App"),
+            runtime
+                .prefix
+                .join("drive_c/Program Files (x86)/dotnet/shared/Microsoft.WindowsDesktop.App"),
+        ]
+        .iter()
+        .any(|path| {
+            fs::read_dir(path)
+                .ok()
+                .map(|entries| {
+                    entries.filter_map(|entry| entry.ok()).any(|entry| {
+                        entry
+                            .file_name()
+                            .to_str()
+                            .map(|name| name.starts_with("8."))
+                            .unwrap_or(false)
+                    })
+                })
+                .unwrap_or(false)
+        });
+
+        Ok(Self {
+            prefix: runtime.prefix.clone(),
+            wine_bin: runtime.wine_bin.clone(),
+            app_bundle: app_bundle_for(&runtime.prefix),
+            net8_installed,
+            wine_version: wine_version_for(&runtime.wine_bin),
+            prefix_arch: prefix_architecture(&runtime.prefix),
+        })
+    }
+}
+
+impl WineRuntime {
+    /// Build a runtime description for an osu! folder inside a Wine prefix.
+    pub fn for_osu_folder(osu_folder: &Path) -> Result<Self, String> {
+        if !osu_folder.join("osu!.exe").is_file() {
+            return Err(format!(
+                "osu!.exe was not found in {}",
+                osu_folder.display()
+            ));
+        }
+
+        let prefix = prefix_for(osu_folder).ok_or_else(|| {
+            "This osu! installation is not inside a Wine prefix. On macOS, choose the osu! folder inside your Wineskin, Whisky or CrossOver wrapper.".to_string()
+        })?;
+
+        let app = app_bundle_for(&prefix);
+        let (wine_bin, wine_root) = find_wine_bin(&prefix, app.as_deref()).ok_or_else(|| {
+            "Could not find a Wine runtime for this osu! installation. Make sure the Wineskin/Whisky/CrossOver wrapper is still installed.".to_string()
+        })?;
+
+        Ok(Self {
+            prefix,
+            wine_bin,
+            wine_root,
+        })
+    }
+
+    /// Spawn a Windows executable through the wrapper's Wine runtime.
+    pub fn spawn(&self, exe: &Path, args: &[&str]) -> Result<Child, String> {
+        let loader = self.loader_for(exe);
+        if !loader.is_file() {
+            return Err(format!(
+                "Wine loader not found at {}. The wrapper may be incomplete.",
+                loader.display()
+            ));
+        }
+
+        let mut command = Command::new(&loader);
+        command.arg(exe).args(args);
+        command.current_dir(exe.parent().unwrap_or(&self.prefix));
+        command
+            .stdin(Stdio::null())
+            .stdout(Stdio::piped())
+            .stderr(Stdio::piped());
+
+        command.env("WINEPREFIX", &self.prefix);
+        command.env("WINEDEBUG", "-all");
+        command.env("WINEDLLOVERRIDES", "mscoree,mshtml=");
+        command.env("FREETYPE_PROPERTIES", "truetype:interpreter-version=35");
+
+        if let Some(wine_root) = &self.wine_root {
+            let mut library_paths = vec![
+                wine_root.join("lib"),
+                wine_root.join("lib64"),
+                wine_root.join("lib32on64"),
+                wine_root.clone(),
+                PathBuf::from("/opt/local/lib"),
+                PathBuf::from("/usr/lib"),
+                PathBuf::from("/usr/libexec"),
+                PathBuf::from("/usr/lib/system"),
+                PathBuf::from("/opt/X11/lib"),
+            ];
+            if let Some(existing) = std::env::var_os("DYLD_FALLBACK_LIBRARY_PATH") {
+                library_paths.extend(std::env::split_paths(&existing));
+            }
+            if let Ok(library_path) = std::env::join_paths(library_paths) {
+                command.env("DYLD_FALLBACK_LIBRARY_PATH", &library_path);
+                command.env("WINESKIN_LIB_PATH_FOR_FALLBACK", &library_path);
+            }
+        }
+
+        let mut paths = vec![self.wine_bin.clone()];
+        if let Some(existing) = std::env::var_os("PATH") {
+            paths.extend(std::env::split_paths(&existing));
+        }
+        if let Ok(path) = std::env::join_paths(paths) {
+            command.env("PATH", path);
+        }
+
+        let executable_name = exe
+            .file_name()
+            .map(|name| name.to_string_lossy().into_owned())
+            .unwrap_or_else(|| "the Windows application".to_string());
+
+        command.spawn().map_err(|error| {
+            format!(
+                "Failed to start {executable_name} through Wine ({}): {}",
+                loader.display(),
+                error
+            )
+        })
+    }
+
+    /// Stop every process that belongs to this Wine prefix.
+    pub async fn kill_prefix(&self) {
+        let wineserver = self.wine_bin.join("wineserver");
+        if !wineserver.is_file() {
+            return;
+        }
+
+        let _ = Command::new(wineserver)
+            .arg("-k")
+            .env("WINEPREFIX", &self.prefix)
+            .stdin(Stdio::null())
+            .stdout(Stdio::null())
+            .stderr(Stdio::null())
+            .status()
+            .await;
+    }
+
+    fn loader_for(&self, exe: &Path) -> PathBuf {
+        let is_64_bit = pe_machine(exe) == Some(0x8664);
+        let candidates: &[&str] = if is_64_bit {
+            &["wine64", "wine"]
+        } else {
+            &["wine32on64", "wine", "wine64"]
+        };
+
+        candidates
+            .iter()
+            .map(|candidate| self.wine_bin.join(candidate))
+            .find(|candidate| candidate.is_file())
+            .unwrap_or_else(|| self.wine_bin.join(candidates[0]))
+    }
+}
+
+/// Run osu! (`-devserver ez-pp.farm`) and wait until the game exits.
+pub async fn run_osu(osu_folder: &str, patch: bool) -> Result<(), String> {
+    let folder = Path::new(osu_folder);
+    let runtime = WineRuntime::for_osu_folder(folder).map_err(|error| {
+        log::error!(target: "osu", "Could not prepare the Wine runtime: {error}");
+        error
+    })?;
+    let mut game = runtime
+        .spawn(&folder.join("osu!.exe"), &["-devserver", "ez-pp.farm"])
+        .map_err(|error| {
+            log::error!(target: "osu", "Could not start osu!: {error}");
+            error
+        })?;
+
+    if let Some(pid) = game.id() {
+        log::info!(target: "osu", "osu! started through Wine (pid {pid})");
+    }
+    crate::logging::capture_osu_output(&mut game);
+
+    if patch {
+        if let Err(error) = start_patcher(&runtime, folder).await {
+            log::warn!(target: "patcher", "Could not start the patcher: {error}");
+        }
+    }
+
+    match game.wait().await {
+        Ok(status) => log::info!(target: "osu", "osu! exited with {status}"),
+        Err(error) => {
+            log::warn!(target: "osu", "Could not wait for osu!: {error}");
+            return Err(format!("Failed to wait for osu!: {}", error));
+        }
+    }
+
+    Ok(())
+}
+
+/// Start the Windows patcher through the same Wine prefix as osu!.
+async fn start_patcher(runtime: &WineRuntime, osu_folder: &Path) -> Result<(), String> {
+    let patcher_exe = osu_folder
+        .join("EZPPLauncher")
+        .join("patcher")
+        .join("osu!.patcher.exe");
+
+    if !patcher_exe.is_file() {
+        return Err(format!(
+            "Patcher was requested but {} does not exist",
+            patcher_exe.display()
+        ));
+    }
+
+    wait_for_osu_game().await;
+
+    log::info!(
+        target: "patcher",
+        "Starting the patcher from {}",
+        patcher_exe.display()
+    );
+
+    let mut patcher = runtime.spawn(&patcher_exe, &[])?;
+    if let Some(pid) = patcher.id() {
+        log::info!(target: "patcher", "Patcher started through Wine (pid {pid})");
+    }
+    crate::logging::capture_patcher_output(&mut patcher);
+
+    tauri::async_runtime::spawn(async move {
+        match patcher.wait().await {
+            Ok(status) => log::info!(target: "patcher", "Patcher exited with {status}"),
+            Err(error) => log::warn!(target: "patcher", "Could not wait for the patcher: {error}"),
+        }
+    });
+
+    Ok(())
+}
+
+/// Wait until the Wine-hosted osu! process exists, then give it time to create
+/// its game window. Wine does not expose the window title to the launcher here,
+/// so the process is the best signal available.
+async fn wait_for_osu_game() {
+    let mut system = sysinfo::System::new_all();
+    let deadline = Instant::now() + StdDuration::from_secs(30);
+    let mut detected = false;
+
+    while Instant::now() < deadline {
+        system.refresh_processes(sysinfo::ProcessesToUpdate::All, true);
+        if system
+            .processes()
+            .values()
+            .any(crate::utils::is_osu_game_process)
+        {
+            detected = true;
+            break;
+        }
+
+        sleep(Duration::from_millis(500)).await;
+    }
+
+    if !detected {
+        log::warn!(
+            target: "patcher",
+            "Could not detect the osu! process; starting the patcher anyway"
+        );
+    }
+
+    // Wine gives no reliable window-ready signal, so leave the game a moment
+    // to finish initializing before the patcher attaches to it.
+    sleep(Duration::from_secs(8)).await;
+}
+
+/// Run `osu!.exe -repair`, wait for the updater and close the game it starts.
+pub async fn run_osu_updater(osu_folder: &str) -> Result<(), String> {
+    let folder = Path::new(osu_folder);
+    let runtime = WineRuntime::for_osu_folder(folder).map_err(|error| {
+        log::error!(target: "osu", "Could not prepare the Wine runtime: {error}");
+        error
+    })?;
+    let mut updater = runtime
+        .spawn(&folder.join("osu!.exe"), &["-repair"])
+        .map_err(|error| {
+            log::error!(target: "osu", "Could not start the osu! updater: {error}");
+            error
+        })?;
+
+    if let Some(pid) = updater.id() {
+        log::info!(target: "osu", "osu! updater started through Wine (pid {pid})");
+    }
+    crate::logging::capture_osu_output(&mut updater);
+
+    let mut system = sysinfo::System::new_all();
+    let deadline = Instant::now() + StdDuration::from_secs(300);
+
+    loop {
+        if updater
+            .try_wait()
+            .map_err(|error| format!("Failed to check the osu! updater: {}", error))?
+            .is_some()
+        {
+            log::info!(target: "osu", "The osu! updater exited");
+            break;
+        }
+
+        system.refresh_processes(sysinfo::ProcessesToUpdate::All, true);
+        if system
+            .processes()
+            .values()
+            .any(crate::utils::is_osu_game_process)
+        {
+            // The updater relaunched osu! to finish the update. Close it so the
+            // launcher can start the game itself with the correct server.
+            log::info!(target: "osu", "The updater relaunched osu!; closing the Wine prefix");
+            runtime.kill_prefix().await;
+            break;
+        }
+
+        if Instant::now() >= deadline {
+            log::warn!(target: "osu", "Timed out waiting for the osu! updater; closing the Wine prefix");
+            runtime.kill_prefix().await;
+            break;
+        }
+
+        sleep(Duration::from_millis(500)).await;
+    }
+
+    match updater.wait().await {
+        Ok(status) => log::info!(target: "osu", "osu! updater exited with {status}"),
+        Err(error) => log::warn!(target: "osu", "Could not wait for the osu! updater: {error}"),
+    }
+    Ok(())
+}
+
+/// Resolve a user-selected path (osu! folder, `.app` bundle, prefix or drive_c)
+/// to a valid osu! installation folder.
+pub fn resolve_osu_folder(folder: &Path) -> Option<PathBuf> {
+    if is_valid_osu_folder(folder) {
+        return Some(folder.to_path_buf());
+    }
+
+    let mut prefixes = Vec::new();
+
+    if folder.file_name() == Some(OsStr::new("drive_c")) {
+        if let Some(parent) = canonical_prefix(folder) {
+            prefixes.push(parent);
+        }
+    }
+
+    if folder.join("drive_c").is_dir() {
+        if let Some(parent) = canonical_prefix(&folder.join("drive_c")) {
+            prefixes.push(parent);
+        }
+    }
+
+    if folder.extension() == Some(OsStr::new("app")) || folder.join("Contents").is_dir() {
+        for drive_c in [
+            folder.join("Contents/Resources/drive_c"),
+            folder.join("Contents/SharedSupport/drive_c"),
+            folder.join("Contents/SharedSupport/prefix/drive_c"),
+        ] {
+            if drive_c.is_dir() {
+                if let Some(parent) = canonical_prefix(&drive_c) {
+                    prefixes.push(parent);
+                }
+            }
+        }
+
+        let mut drive_dirs = Vec::new();
+        find_drive_c_dirs(folder, 5, &mut drive_dirs);
+        prefixes.extend(
+            drive_dirs
+                .iter()
+                .filter_map(|drive_c| drive_c.parent().map(Path::to_path_buf)),
+        );
+    }
+
+    if let Some(prefix) = prefix_for(folder) {
+        prefixes.push(prefix);
+    }
+
+    prefixes.sort();
+    prefixes.dedup();
+
+    prefixes
+        .into_iter()
+        .find_map(|prefix| find_osu_folder_in_prefix(&prefix))
+}
+
+/// Auto-detect an osu! installation in the usual macOS wrapper locations.
+pub fn find_osu_installation() -> Option<String> {
+    for app in app_bundles() {
+        if let Some(folder) = resolve_osu_folder(&app) {
+            return Some(folder.to_string_lossy().into_owned());
+        }
+    }
+
+    for prefix in bottle_prefixes() {
+        if let Some(folder) = find_osu_folder_in_prefix(&prefix) {
+            return Some(folder.to_string_lossy().into_owned());
+        }
+    }
+
+    None
+}
+
+fn find_osu_folder_in_prefix(prefix: &Path) -> Option<PathBuf> {
+    let drive_c = prefix.join("drive_c");
+    if !drive_c.is_dir() {
+        return None;
+    }
+
+    if let Some(folder) = common_osu_folders(&drive_c)
+        .into_iter()
+        .find(|folder| is_valid_osu_folder(folder))
+    {
+        return Some(folder);
+    }
+
+    let mut candidates = Vec::new();
+    collect_osu_folders(&drive_c, 0, 6, &mut candidates);
+    candidates
+        .into_iter()
+        .find(|folder| is_valid_osu_folder(folder))
+}
+
+fn common_osu_folders(drive_c: &Path) -> Vec<PathBuf> {
+    let mut folders = vec![
+        drive_c.join("osu!"),
+        drive_c.join("Program Files").join("osu!"),
+        drive_c.join("Program Files (x86)").join("osu!"),
+    ];
+
+    if let Ok(users) = fs::read_dir(drive_c.join("users")) {
+        for user in users.flatten() {
+            let user_path = user.path();
+            if user_path.is_dir() {
+                folders.push(user_path.join("AppData").join("Local").join("osu!"));
+                folders.push(user_path.join("AppData").join("Roaming").join("osu!"));
+            }
+        }
+    }
+
+    folders
+}
+
+fn collect_osu_folders(dir: &Path, depth: usize, max_depth: usize, out: &mut Vec<PathBuf>) {
+    if depth > max_depth {
+        return;
+    }
+
+    if dir.join("osu!.exe").is_file() {
+        out.push(dir.to_path_buf());
+        return;
+    }
+
+    let Ok(entries) = fs::read_dir(dir) else {
+        return;
+    };
+
+    for entry in entries.flatten() {
+        let path = entry.path();
+        let Ok(metadata) = fs::symlink_metadata(&path) else {
+            continue;
+        };
+        if metadata.file_type().is_symlink() || !metadata.is_dir() {
+            continue;
+        }
+
+        let name = path
+            .file_name()
+            .unwrap_or_default()
+            .to_string_lossy()
+            .to_ascii_lowercase();
+        if matches!(
+            name.as_str(),
+            "windows" | "programdata" | "$recycle.bin" | "system volume information"
+        ) {
+            continue;
+        }
+
+        collect_osu_folders(&path, depth + 1, max_depth, out);
+    }
+}
+
+fn find_drive_c_dirs(dir: &Path, depth: usize, out: &mut Vec<PathBuf>) {
+    if depth == 0 {
+        return;
+    }
+
+    let Ok(entries) = fs::read_dir(dir) else {
+        return;
+    };
+
+    for entry in entries.flatten() {
+        let path = entry.path();
+        let Ok(metadata) = fs::symlink_metadata(&path) else {
+            continue;
+        };
+
+        if metadata.file_type().is_symlink() {
+            // Wineskin wrappers often add a convenience drive_c symlink at
+            // the app root. Resolve it to the real prefix so WINEPREFIX points
+            // at Contents/Resources instead of the bundle itself.
+            if path.file_name() == Some(OsStr::new("drive_c")) {
+                if let Ok(canonical) = fs::canonicalize(&path) {
+                    out.push(canonical);
+                }
+            }
+            continue;
+        }
+
+        if !metadata.is_dir() {
+            continue;
+        }
+
+        if path.file_name() == Some(OsStr::new("drive_c")) {
+            out.push(path);
+            continue;
+        }
+
+        // Do not descend into nested apps (for example Wineskin.app).
+        if path.extension() == Some(OsStr::new("app")) {
+            continue;
+        }
+
+        find_drive_c_dirs(&path, depth - 1, out);
+    }
+}
+
+fn prefix_for(osu_folder: &Path) -> Option<PathBuf> {
+    let drive_c = osu_folder
+        .ancestors()
+        .find(|ancestor| ancestor.file_name() == Some(OsStr::new("drive_c")))?;
+    canonical_prefix(drive_c)
+}
+
+fn canonical_prefix(drive_c: &Path) -> Option<PathBuf> {
+    let canonical = fs::canonicalize(drive_c).ok()?;
+    canonical.parent().map(Path::to_path_buf)
+}
+
+fn app_bundle_for(prefix: &Path) -> Option<PathBuf> {
+    prefix
+        .ancestors()
+        .find(|ancestor| ancestor.extension() == Some(OsStr::new("app")))
+        .map(Path::to_path_buf)
+}
+
+fn home_dir() -> Option<PathBuf> {
+    std::env::var_os("HOME").map(PathBuf::from)
+}
+
+fn app_bundles() -> Vec<PathBuf> {
+    let mut roots = vec![PathBuf::from("/Applications")];
+    if let Some(home) = home_dir() {
+        roots.push(home.join("Applications"));
+    }
+
+    let mut apps = Vec::new();
+    for root in roots {
+        let Ok(entries) = fs::read_dir(root) else {
+            continue;
+        };
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.extension() == Some(OsStr::new("app")) {
+                apps.push(path);
+            }
+        }
+    }
+
+    apps.sort();
+    apps
+}
+
+fn bottle_prefixes() -> Vec<PathBuf> {
+    let Some(home) = home_dir() else {
+        return Vec::new();
+    };
+
+    let bottle_roots = [
+        home.join("Library/Containers/com.isaacmarovitz.Whisky/Bottles"),
+        home.join("Library/Application Support/CrossOver/Bottles"),
+        home.join("Library/Application Support/Whisky/Bottles"),
+    ];
+
+    let mut prefixes = Vec::new();
+    for root in bottle_roots {
+        let Ok(entries) = fs::read_dir(root) else {
+            continue;
+        };
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.join("drive_c").is_dir() {
+                prefixes.push(path);
+            }
+        }
+    }
+
+    prefixes.sort();
+    prefixes
+}
+
+fn find_wine_bin(prefix: &Path, app: Option<&Path>) -> Option<(PathBuf, Option<PathBuf>)> {
+    let mut candidates: Vec<(PathBuf, Option<PathBuf>)> = Vec::new();
+
+    if let Some(app) = app {
+        for root in [
+            app.join("Contents/SharedSupport/wine"),
+            app.join("Contents/Resources/WineskinEngine.bundle/Wine"),
+            app.join("Contents/Frameworks/wswine.bundle"),
+        ] {
+            push_wine_root(&mut candidates, root);
+        }
+    }
+
+    for root in [
+        prefix.join("WineskinEngine.bundle/Wine"),
+        prefix.join("Wine"),
+    ] {
+        push_wine_root(&mut candidates, root);
+    }
+
+    if let Some(home) = home_dir() {
+        for root in [
+            home.join("Applications/Whisky.app/Contents/Resources/wine"),
+            home.join("Applications/Whisky.app/Contents/Libraries/Wine"),
+        ] {
+            push_wine_root(&mut candidates, root);
+        }
+    }
+
+    for root in [
+        PathBuf::from("/Applications/Whisky.app/Contents/Resources/wine"),
+        PathBuf::from("/Applications/Whisky.app/Contents/Libraries/Wine"),
+        PathBuf::from("/Applications/CrossOver.app/Contents/SharedSupport/CrossOver"),
+    ] {
+        push_wine_root(&mut candidates, root);
+    }
+
+    for bin in [
+        PathBuf::from("/opt/homebrew/bin"),
+        PathBuf::from("/usr/local/bin"),
+    ] {
+        if has_wine_loader(&bin) {
+            candidates.push((bin, None));
+        }
+    }
+
+    for binary in ["wine64", "wine32on64", "wine"] {
+        if let Some(path) = find_in_path(binary) {
+            if let Some(bin) = path.parent() {
+                candidates.push((bin.to_path_buf(), None));
+                break;
+            }
+        }
+    }
+
+    candidates.into_iter().find(|(bin, _)| has_wine_loader(bin))
+}
+
+fn push_wine_root(candidates: &mut Vec<(PathBuf, Option<PathBuf>)>, root: PathBuf) {
+    let bin = root.join("bin");
+    if has_wine_loader(&bin) {
+        candidates.push((bin, Some(root)));
+    }
+}
+
+fn has_wine_loader(bin: &Path) -> bool {
+    ["wine32on64", "wine64", "wine"]
+        .iter()
+        .any(|loader| bin.join(loader).is_file())
+}
+
+fn wine_version_for(bin: &Path) -> Option<String> {
+    let loader = ["wine64", "wine", "wine32on64"]
+        .iter()
+        .map(|name| bin.join(name))
+        .find(|path| path.is_file())?;
+    let output = std::process::Command::new(loader)
+        .arg("--version")
+        .env("WINEDEBUG", "-all")
+        .output()
+        .ok()?;
+    if !output.status.success() {
+        return None;
+    }
+
+    let version = String::from_utf8_lossy(&output.stdout).trim().to_string();
+    (!version.is_empty()).then_some(version)
+}
+
+fn prefix_architecture(prefix: &Path) -> Option<String> {
+    if prefix.join("drive_c/windows/syswow64").is_dir() {
+        Some("win64".to_string())
+    } else if prefix.join("drive_c/windows/system32").is_dir() {
+        Some("win32".to_string())
+    } else {
+        None
+    }
+}
+
+fn find_in_path(binary: &str) -> Option<PathBuf> {
+    let path = std::env::var_os("PATH")?;
+    std::env::split_paths(&path)
+        .map(|dir| dir.join(binary))
+        .find(|candidate| candidate.is_file())
+}
+
+fn pe_machine(exe: &Path) -> Option<u16> {
+    use std::io::{Read, Seek, SeekFrom};
+
+    let mut file = fs::File::open(exe).ok()?;
+    let mut signature = [0u8; 2];
+    file.read_exact(&mut signature).ok()?;
+    if &signature != b"MZ" {
+        return None;
+    }
+
+    file.seek(SeekFrom::Start(0x3c)).ok()?;
+    let mut offset = [0u8; 4];
+    file.read_exact(&mut offset).ok()?;
+    file.seek(SeekFrom::Start(u32::from_le_bytes(offset) as u64))
+        .ok()?;
+
+    let mut header = [0u8; 6];
+    file.read_exact(&mut header).ok()?;
+    if &header[..4] != b"PE\0\0" {
+        return None;
+    }
+
+    Some(u16::from_le_bytes([header[4], header[5]]))
+}

src-tauri/src/osudb.rs

@@ -0,0 +1,370 @@
+use std::io::{Cursor, Read};
+
+use anyhow::{Result, anyhow};
+use byteorder::{LittleEndian, ReadBytesExt};
+use std::collections::HashMap;
+
+pub struct OsuReader {
+    cursor: Cursor<Vec<u8>>,
+}
+
+impl OsuReader {
+    pub fn new(data: Vec<u8>) -> Self {
+        Self {
+            cursor: Cursor::new(data),
+        }
+    }
+
+    fn read_i16(&mut self) -> Result<i16> {
+        Ok(self.cursor.read_i16::<LittleEndian>()?)
+    }
+
+    fn read_i32(&mut self) -> Result<i32> {
+        Ok(self.cursor.read_i32::<LittleEndian>()?)
+    }
+
+    fn read_i64(&mut self) -> Result<i64> {
+        Ok(self.cursor.read_i64::<LittleEndian>()?)
+    }
+
+    fn read_u8(&mut self) -> Result<u8> {
+        Ok(self.cursor.read_u8()?)
+    }
+
+    fn read_f32(&mut self) -> Result<f32> {
+        Ok(self.cursor.read_f32::<LittleEndian>()?)
+    }
+
+    fn read_f64(&mut self) -> Result<f64> {
+        Ok(self.cursor.read_f64::<LittleEndian>()?)
+    }
+
+    fn read_bool(&mut self) -> Result<bool> {
+        Ok(self.read_u8()? != 0)
+    }
+
+    fn read_string(&mut self) -> Result<Option<String>> {
+        let indicator = self.read_u8()?;
+
+        if indicator == 0 {
+            return Ok(None);
+        }
+
+        if indicator != 0x0B {
+            return Err(anyhow!("Invalid osu string indicator"));
+        }
+
+        let len = self.read_uleb128()? as usize;
+        let mut buf = vec![0; len];
+        self.cursor.read_exact(&mut buf)?;
+
+        Ok(Some(String::from_utf8(buf)?))
+    }
+
+    fn read_uleb128(&mut self) -> Result<u64> {
+        let mut result = 0;
+        let mut shift = 0;
+
+        loop {
+            let byte = self.read_u8()?;
+            result |= ((byte & 0x7F) as u64) << shift;
+
+            if (byte & 0x80) == 0 {
+                break;
+            }
+
+            shift += 7;
+        }
+
+        Ok(result)
+    }
+}
+
+#[derive(Debug)]
+pub struct TimingPoint {
+    pub bpm: f64,
+    pub offset: f64,
+    pub inherited: bool,
+}
+
+#[derive(Debug)]
+pub struct Beatmap {
+    pub artist_name: Option<String>,
+    pub artist_unicode: Option<String>,
+    pub song_title: Option<String>,
+    pub song_title_unicode: Option<String>,
+    pub creator: Option<String>,
+    pub difficulty: Option<String>,
+    pub audio: Option<String>,
+    pub md5: Option<String>,
+    pub osu_file_name: Option<String>,
+
+    pub ranked_status: u8,
+    pub hitcircles: i16,
+    pub slider_count: i16,
+    pub spinner_count: i16,
+    pub last_modification: i64,
+
+    pub approach_rate: f32,
+    pub circle_size: f32,
+    pub hp_drain: f32,
+    pub overall_difficulty: f32,
+    pub slider_velocity: f64,
+
+    pub difficulties: HashMap<i32, f64>,
+
+    pub drain_time: i32,
+    pub total_time: i32,
+    pub preview_offset: i32,
+
+    pub beatmap_id: i32,
+    pub beatmapset_id: i32,
+    pub thread_id: i32,
+
+    pub grade_standard: u8,
+    pub grade_taiko: u8,
+    pub grade_catch: u8,
+    pub grade_mania: u8,
+
+    pub local_beatmap_offset: i16,
+    pub stack_leniency: f32,
+
+    pub mode: u8,
+    pub song_source: Option<String>,
+    pub song_tags: Option<String>,
+
+    pub online_beatmap_offset: i16,
+    pub title_font: Option<String>,
+
+    pub unplayed: bool,
+    pub last_played: i64,
+    pub osz2: bool,
+    pub folder_name: Option<String>,
+    pub last_checked_against_repository: i64,
+
+    pub ignore_sound: bool,
+    pub ignore_skin: bool,
+    pub disable_storyboard: bool,
+    pub disable_video: bool,
+    pub visual_override: bool,
+
+    pub last_modification_time: i32,
+    pub mania_scroll_speed: u8,
+
+    pub timing_points: Vec<TimingPoint>,
+}
+
+#[derive(Debug)]
+pub struct OsuDbData {
+    pub osuver: i32,
+    pub folder_count: i32,
+    pub is_unlocked: bool,
+    pub date_unlock_ticks: i64,
+    pub username: Option<String>,
+    pub beatmaps: Vec<Beatmap>,
+    pub userperms: i32,
+}
+
+//
+// =========================
+//         PARSER
+// =========================
+//
+
+pub fn parse_osudb(bytes: Vec<u8>) -> Result<OsuDbData> {
+    let mut reader = OsuReader::new(bytes);
+
+    let osuver = reader.read_i32()?;
+    let folder_count = reader.read_i32()?;
+    let is_unlocked = reader.read_bool()?;
+    let date_unlock_ticks = reader.read_i64()?;
+    let username = reader.read_string()?;
+    let beatmaps_count = reader.read_i32()?;
+
+    let mut beatmaps = Vec::new();
+
+    for _ in 0..beatmaps_count {
+        if osuver < 20191107 {
+            reader.read_i32()?; // entry size
+        }
+
+        let artist_name = reader.read_string()?;
+        let artist_unicode = reader.read_string()?;
+        let song_title = reader.read_string()?;
+        let song_title_unicode = reader.read_string()?;
+        let creator = reader.read_string()?;
+        let difficulty = reader.read_string()?;
+        let audio = reader.read_string()?;
+        let md5 = reader.read_string()?;
+        let osu_file_name = reader.read_string()?;
+
+        let ranked_status = reader.read_u8()?;
+        let hitcircles = reader.read_i16()?;
+        let slider_count = reader.read_i16()?;
+        let spinner_count = reader.read_i16()?;
+        let last_modification = reader.read_i64()?;
+
+        let approach_rate = if osuver < 20140609 {
+            reader.read_u8()? as f32
+        } else {
+            reader.read_f32()?
+        };
+
+        let circle_size = if osuver < 20140609 {
+            reader.read_u8()? as f32
+        } else {
+            reader.read_f32()?
+        };
+
+        let hp_drain = if osuver < 20140609 {
+            reader.read_u8()? as f32
+        } else {
+            reader.read_f32()?
+        };
+
+        let overall_difficulty = if osuver < 20140609 {
+            reader.read_u8()? as f32
+        } else {
+            reader.read_f32()?
+        };
+
+        let slider_velocity = reader.read_f64()?;
+
+        let mut difficulties: HashMap<i32, f64> = HashMap::new();
+
+        if osuver >= 20140609 {
+            for _ in 0..4 {
+                let len = reader.read_i32()?;
+                for _ in 0..len {
+                    reader.read_u8()?;
+                    let mode = reader.read_i32()?;
+                    reader.read_u8()?;
+                    let diff = if osuver > 20250107 {
+                        reader.read_f32()? as f64
+                    } else {
+                        reader.read_f64()?
+                    };
+
+                    difficulties.insert(mode, diff);
+                }
+            }
+        }
+
+        let drain_time = reader.read_i32()?;
+        let total_time = reader.read_i32()?;
+        let preview_offset = reader.read_i32()?;
+
+        let timing_len = reader.read_i32()?;
+        let mut timing_points = Vec::new();
+        for _ in 0..timing_len {
+            timing_points.push(TimingPoint {
+                bpm: reader.read_f64()?,
+                offset: reader.read_f64()?,
+                inherited: reader.read_bool()?,
+            });
+        }
+
+        let beatmap_id = reader.read_i32()?;
+        let beatmapset_id = reader.read_i32()?;
+        let thread_id = reader.read_i32()?;
+
+        let grade_standard = reader.read_u8()?;
+        let grade_taiko = reader.read_u8()?;
+        let grade_catch = reader.read_u8()?;
+        let grade_mania = reader.read_u8()?;
+
+        let local_beatmap_offset = reader.read_i16()?;
+        let stack_leniency = reader.read_f32()?;
+
+        let mode = reader.read_u8()?;
+        let song_source = reader.read_string()?;
+        let song_tags = reader.read_string()?;
+
+        let online_beatmap_offset = reader.read_i16()?;
+        let title_font = reader.read_string()?;
+
+        let unplayed = reader.read_bool()?;
+        let last_played = reader.read_i64()?;
+        let osz2 = reader.read_bool()?;
+        let folder_name = reader.read_string()?;
+        let last_checked_against_repository = reader.read_i64()?;
+
+        let ignore_sound = reader.read_bool()?;
+        let ignore_skin = reader.read_bool()?;
+        let disable_storyboard = reader.read_bool()?;
+        let disable_video = reader.read_bool()?;
+        let visual_override = reader.read_bool()?;
+
+        if osuver < 20140609 {
+            reader.read_i16()?;
+        }
+
+        let last_modification_time = reader.read_i32()?;
+        let mania_scroll_speed = reader.read_u8()?;
+
+        beatmaps.push(Beatmap {
+            artist_name,
+            artist_unicode,
+            song_title,
+            song_title_unicode,
+            creator,
+            difficulty,
+            audio,
+            md5,
+            osu_file_name,
+            ranked_status,
+            hitcircles,
+            slider_count,
+            spinner_count,
+            last_modification,
+            approach_rate,
+            circle_size,
+            hp_drain,
+            overall_difficulty,
+            slider_velocity,
+            difficulties,
+            drain_time,
+            total_time,
+            preview_offset,
+            beatmap_id,
+            beatmapset_id,
+            thread_id,
+            grade_standard,
+            grade_taiko,
+            grade_catch,
+            grade_mania,
+            local_beatmap_offset,
+            stack_leniency,
+            mode,
+            song_source,
+            song_tags,
+            online_beatmap_offset,
+            title_font,
+            unplayed,
+            last_played,
+            osz2,
+            folder_name,
+            last_checked_against_repository,
+            ignore_sound,
+            ignore_skin,
+            disable_storyboard,
+            disable_video,
+            visual_override,
+            last_modification_time,
+            mania_scroll_speed,
+            timing_points,
+        });
+    }
+
+    let userperms = reader.read_i32()?;
+
+    Ok(OsuDbData {
+        osuver,
+        folder_count,
+        is_unlocked,
+        date_unlock_ticks,
+        username,
+        beatmaps,
+        userperms,
+    })
+}

src-tauri/src/presence.rs

@@ -1,13 +1,17 @@
-use discord_rich_presence::{
-    DiscordIpc, DiscordIpcClient,
-    activity::{Activity, Assets, Button, Timestamps},
-};
 use once_cell::sync::Lazy;
+use presenceforge::{ActivityBuilder, AsyncDiscordIpcClient};
 use std::sync::Mutex as StdMutex;
 use std::time::{SystemTime, UNIX_EPOCH};
+use tauri::{AppHandle, RunEvent};
 use tokio::sync::{mpsc, oneshot};
 use tokio::time::{Duration, interval};
 
+#[derive(Clone, Debug)]
+pub struct PresenceButton {
+    pub label: String,
+    pub url: String,
+}
+
 #[derive(Clone, Debug)]
 pub struct PresenceData {
     pub state: String,
@@ -16,6 +20,21 @@ pub struct PresenceData {
     pub large_image_text: String,
     pub small_image_key: Option<String>,
     pub small_image_text: Option<String>,
+    pub dynamic_button: Option<PresenceButton>,
+}
+
+impl Default for PresenceData {
+    fn default() -> Self {
+        Self {
+            state: "Idle in Launcher...".to_string(),
+            details: "  ".to_string(),
+            large_image_key: "ezppfarm".to_string(),
+            large_image_text: "EZPPFarm".to_string(),
+            small_image_key: None,
+            small_image_text: None,
+            dynamic_button: None,
+        }
+    }
 }
 
 #[derive(Debug)]
@@ -26,11 +45,19 @@ enum PresenceCommand {
     IsConnected(oneshot::Sender<bool>),
 }
 
+enum ReconnectResult {
+    Connected(AsyncDiscordIpcClient),
+    Failed,
+}
+
 struct PresenceActor {
     receiver: mpsc::Receiver<PresenceCommand>,
-    client: Option<DiscordIpcClient>,
+    reconnect_rx: mpsc::Receiver<ReconnectResult>,
+    reconnect_tx: mpsc::Sender<ReconnectResult>,
+    client: Option<AsyncDiscordIpcClient>,
     data: PresenceData,
     start_timestamp: i64,
+    reconnecting: bool,
 }
 
 impl PresenceActor {
@@ -40,137 +67,193 @@ impl PresenceActor {
             .unwrap()
             .as_secs() as i64;
 
-        let data = PresenceData {
-            state: "Idle in Launcher...".to_string(),
-            details: "  ".to_string(),
-            large_image_key: "ezppfarm".to_string(),
-            large_image_text: "EZPPFarm".to_string(),
-            small_image_key: None,
-            small_image_text: None,
-        };
+        let (reconnect_tx, reconnect_rx) = mpsc::channel(1);
 
-        PresenceActor {
+        Self {
             receiver,
+            reconnect_rx,
+            reconnect_tx,
             client: None,
-            data,
+            data: PresenceData::default(),
             start_timestamp: start,
+            reconnecting: false,
         }
     }
 
     async fn run(&mut self) {
-        let mut update_interval = interval(Duration::from_millis(2500));
+        let mut heartbeat = interval(Duration::from_secs(5));
+        heartbeat.tick().await;
 
         loop {
             tokio::select! {
                 Some(cmd) = self.receiver.recv() => {
                     match cmd {
-                        PresenceCommand::Connect(responder) => self.handle_connect(responder).await,
-                        PresenceCommand::Disconnect(responder) => {
-                            self.handle_disconnect(responder).await;
-                        },
-                        PresenceCommand::UpdateData(new_data) => {
-                            self.data = new_data;
-                        },
-                        PresenceCommand::IsConnected(responder) => {
-                            let _ = responder.send(self.client.is_some());
+                        PresenceCommand::Connect(resp) => self.cmd_connect(resp).await,
+                        PresenceCommand::Disconnect(resp) => self.cmd_disconnect(resp).await,
+                        PresenceCommand::UpdateData(data) => {
+                            self.data = data;
+                            self.push_presence().await;
+                        }
+                        PresenceCommand::IsConnected(resp) => {
+                            let _ = resp.send(self.client.is_some());
                         }
                     }
                 }
-                _ = update_interval.tick() => {
-                    if self.client.is_some() {
-                        self.handle_update().await;
+
+                Some(result) = self.reconnect_rx.recv() => {
+                    self.reconnecting = false;
+                    match result {
+                        ReconnectResult::Connected(client) => {
+                            log::info!(target: "launcher", "Presence: reconnect succeeded");
+                            self.client = Some(client);
+                            self.push_presence().await;
+                        }
+                        ReconnectResult::Failed => {
+                            log::warn!(target: "launcher", "Presence: all reconnect attempts exhausted");
+                        }
                     }
                 }
+
+                _ = heartbeat.tick() => {
+                    self.push_presence().await;
+                }
             }
         }
     }
 
-    async fn handle_connect(&mut self, responder: oneshot::Sender<bool>) {
+    async fn cmd_connect(&mut self, resp: oneshot::Sender<bool>) {
         if self.client.is_some() {
-            let _ = responder.send(true);
+            let _ = resp.send(true);
             return;
         }
 
-        println!("Actor: Connecting to Discord...");
-        let mut dc_client = DiscordIpcClient::new("1032772293220384808");
-        match dc_client.connect() {
-            Ok(()) => {
-                self.client = Some(dc_client);
-                println!("Actor: Connected successfully.");
-                self.handle_update().await;
-                let _ = responder.send(true);
+        match try_connect_once().await {
+            Some(client) => {
+                self.client = Some(client);
+                self.reconnecting = false;
+                self.push_presence().await;
+                let _ = resp.send(true);
             }
-            Err(e) => {
-                eprintln!("Failed to create Discord client: {:?}", e);
-                let _ = responder.send(false);
+            None => {
+                log::warn!(
+                    target: "launcher",
+                    "Presence: initial connect failed; spawning reconnect task"
+                );
+                let _ = resp.send(false);
+                self.spawn_reconnect_task();
             }
         }
     }
 
-    async fn handle_disconnect(&mut self, responder: oneshot::Sender<()>) {
+    async fn cmd_disconnect(&mut self, resp: oneshot::Sender<()>) {
         if let Some(mut client) = self.client.take() {
-            println!("Actor: Disconnecting...");
-            let _ = client.clear_activity().map_err(|e| e.to_string());
-            let _ = client.close().map_err(|e| e.to_string());
-            println!("Actor: Disconnected successfully.");
+            let _ = client.clear_activity().await;
+            log::info!(target: "launcher", "Presence: disconnected");
         }
-        let _ = responder.send(());
+        let _ = resp.send(());
     }
 
-    async fn handle_update(&mut self) {
-        if let Some(client) = self.client.as_mut() {
-            let mut assets = Assets::new()
-                .large_image(&self.data.large_image_key)
-                .large_text(&self.data.large_image_text);
+    async fn push_presence(&mut self) {
+        let client = match self.client.as_mut() {
+            Some(c) => c,
+            None => return,
+        };
 
-            if let Some(key) = &self.data.small_image_key {
-                assets = assets.small_image(key);
-            }
-            if let Some(text) = &self.data.small_image_text {
-                assets = assets.small_text(text);
-            }
+        let mut builder = ActivityBuilder::new()
+            .state(&self.data.state)
+            .details(&self.data.details)
+            .start_timestamp(self.start_timestamp as u64)
+            .large_image(&self.data.large_image_key)
+            .large_text(&self.data.large_image_text);
 
-            let activity = Activity::new()
-                .state(&self.data.state)
-                .details(&self.data.details)
-                .timestamps(Timestamps::new().start(self.start_timestamp))
-                .assets(assets)
-                .buttons(vec![
-                    Button::new(
-                        "Download the Launcher",
-                        "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest",
-                    ),
-                    Button::new("Join EZPPFarm", "https://ez-pp.farm/discord"),
-                ]);
+        if let Some(key) = &self.data.small_image_key {
+            builder = builder.small_image(key);
+        }
+        if let Some(text) = &self.data.small_image_text {
+            builder = builder.small_text(text);
+        }
 
-            if let Err(e) = client.set_activity(activity).map_err(|e| e.to_string()) {
-                eprintln!("Failed to set activity, disconnecting: {:?}", e);
-                if let Some(mut client) = self.client.take() {
-                    let _ = client.clear_activity();
-                    let _ = client.close();
+        if let Some(btn) = &self.data.dynamic_button {
+            builder = builder.button(&btn.label, &btn.url);
+        } else {
+            builder = builder.button(
+                "Download the Launcher",
+                "https://git.ez-pp.farm/EZPPFarm/EZPPLauncher/releases/latest",
+            );
+        }
+        builder = builder.button("Join EZPPFarm", "https://ez-pp.farm/discord");
+
+        let activity = builder.build();
+
+        if let Err(e) = client.set_activity(&activity).await {
+            log::warn!(
+                target: "launcher",
+                "Presence: set_activity failed ({:?}); will reconnect",
+                e
+            );
+            self.client = None;
+            self.spawn_reconnect_task();
+        }
+    }
+
+    fn spawn_reconnect_task(&mut self) {
+        if self.reconnecting {
+            return;
+        }
+        self.reconnecting = true;
+
+        let tx = self.reconnect_tx.clone();
+        tokio::spawn(async move {
+            const MAX_ATTEMPTS: u32 = 5;
+            for attempt in 1..=MAX_ATTEMPTS {
+                let delay = Duration::from_secs(5 * attempt as u64);
+                log::info!(
+                    target: "launcher",
+                    "Presence: reconnect attempt {}/{} in {:?}…",
+                    attempt,
+                    MAX_ATTEMPTS,
+                    delay
+                );
+                tokio::time::sleep(delay).await;
+
+                if let Some(client) = try_connect_once().await {
+                    let _ = tx.send(ReconnectResult::Connected(client)).await;
+                    return;
                 }
             }
+            let _ = tx.send(ReconnectResult::Failed).await;
+        });
+    }
+}
+
+async fn try_connect_once() -> Option<AsyncDiscordIpcClient> {
+    match AsyncDiscordIpcClient::new("1032772293220384808").await {
+        Ok(mut client) => match client.connect().await {
+            Ok(_) => {
+                log::info!(target: "launcher", "Presence: IPC connected");
+                Some(client)
+            }
+            Err(e) => {
+                log::warn!(target: "launcher", "Presence: IPC connect error: {:?}", e);
+                None
+            }
+        },
+        Err(e) => {
+            log::warn!(target: "launcher", "Presence: failed to create client: {:?}", e);
+            None
         }
     }
 }
 
 static PRESENCE_TX: Lazy<mpsc::Sender<PresenceCommand>> = Lazy::new(|| {
-    let (tx, rx) = mpsc::channel(10);
+    let (tx, rx) = mpsc::channel(32);
     let mut actor = PresenceActor::new(rx);
     tokio::spawn(async move { actor.run().await });
     tx
 });
 
-pub static PRESENCE_DATA: Lazy<StdMutex<PresenceData>> = Lazy::new(|| {
-    StdMutex::new(PresenceData {
-        state: "Idle in Launcher...".to_string(),
-        details: "  ".to_string(),
-        large_image_key: "ezppfarm".to_string(),
-        large_image_text: "EZPPFarm".to_string(),
-        small_image_key: None,
-        small_image_text: None,
-    })
-});
+pub static PRESENCE_DATA: Lazy<StdMutex<PresenceData>> =
+    Lazy::new(|| StdMutex::new(PresenceData::default()));
 
 pub async fn connect() -> bool {
     let (tx, rx) = oneshot::channel();
@@ -187,9 +270,7 @@ pub async fn disconnect() {
         .await
         .is_ok()
     {
-        let _ = rx.await;
-    } else {
-        println!("Could not send disconnect command; actor may not be running.");
+        let _ = tokio::time::timeout(Duration::from_secs(2), rx).await;
     }
 }
 
@@ -206,30 +287,73 @@ pub async fn has_presence() -> bool {
 }
 
 pub fn update_status(state: Option<&str>, details: Option<&str>, large_image_key: Option<&str>) {
-    let mut data = PRESENCE_DATA.lock().unwrap();
-    if let Some(s) = state {
-        data.state = s.to_string();
-    }
-    if let Some(d) = details {
-        data.details = d.to_string();
-    }
-    if let Some(img) = large_image_key {
-        data.large_image_key = img.to_string();
-    }
-    let data_clone = data.clone();
+    let data = {
+        let mut guard = PRESENCE_DATA.lock().unwrap();
+        if let Some(s) = state {
+            guard.state = s.to_string();
+        }
+        if let Some(d) = details {
+            guard.details = d.to_string();
+        }
+        if let Some(img) = large_image_key {
+            guard.large_image_key = img.to_string();
+        }
+        guard.clone()
+    };
+
     let tx = PRESENCE_TX.clone();
     tokio::spawn(async move {
-        let _ = tx.send(PresenceCommand::UpdateData(data_clone)).await;
+        let _ = tx.send(PresenceCommand::UpdateData(data)).await;
     });
 }
 
 pub fn update_user(username: Option<&str>, id: Option<&str>) {
-    let mut data = PRESENCE_DATA.lock().unwrap();
-    data.small_image_key = id.map(|id_str| format!("https://a.ez-pp.farm/{}", id_str));
-    data.small_image_text = username.map(|s| s.to_string());
-    let data_clone = data.clone();
+    let data = {
+        let mut guard = PRESENCE_DATA.lock().unwrap();
+        guard.small_image_key = id.map(|s| format!("https://a.ez-pp.farm/{}", s));
+        guard.small_image_text = username.map(str::to_string);
+        guard.clone()
+    };
+
     let tx = PRESENCE_TX.clone();
     tokio::spawn(async move {
-        let _ = tx.send(PresenceCommand::UpdateData(data_clone)).await;
+        let _ = tx.send(PresenceCommand::UpdateData(data)).await;
     });
 }
+
+pub fn set_button(label: &str, url: &str) {
+    let data = {
+        let mut guard = PRESENCE_DATA.lock().unwrap();
+        guard.dynamic_button = Some(PresenceButton {
+            label: label.to_string(),
+            url: url.to_string(),
+        });
+        guard.clone()
+    };
+
+    let tx = PRESENCE_TX.clone();
+    tokio::spawn(async move {
+        let _ = tx.send(PresenceCommand::UpdateData(data)).await;
+    });
+}
+
+pub fn clear_button() {
+    let data = {
+        let mut guard = PRESENCE_DATA.lock().unwrap();
+        guard.dynamic_button = None;
+        guard.clone()
+    };
+
+    let tx = PRESENCE_TX.clone();
+    tokio::spawn(async move {
+        let _ = tx.send(PresenceCommand::UpdateData(data)).await;
+    });
+}
+
+pub fn handle_run_event(_app: &AppHandle, event: &RunEvent) {
+    if let RunEvent::ExitRequested { .. } | RunEvent::Exit = event {
+        tauri::async_runtime::block_on(async {
+            disconnect().await;
+        });
+    }
+}

src-tauri/src/state.rs

@@ -0,0 +1,11 @@
+// state.rs
+use crate::config::Config;
+use std::path::PathBuf;
+use std::sync::Mutex;
+
+pub struct AppState {
+    pub config: Mutex<Config>,
+    pub opened_files: Mutex<Vec<PathBuf>>,
+    /// Theme folder requested by the main window when it opens the editor.
+    pub editor_theme_folder: Mutex<Option<String>>,
+}

src-tauri/src/theme_server.rs

@@ -0,0 +1,493 @@
+//! Loopback HTTP server for theme assets on Linux and macOS.
+//!
+//! WebKitGTK cannot play audio or video through Tauri's custom `asset:`
+//! protocol, and WKWebView's range handling makes large media stall there.
+//! A real loopback HTTP server gives WebKit normal status codes, range
+//! responses and MIME types, so v1 and v2 theme assets load the same way they
+//! do in a browser without loading a whole video into a blob first.
+
+use http_body_util::Full;
+use http_range::HttpRange;
+use hyper::body::{Bytes, Incoming};
+use hyper::header::{
+    ACCEPT_RANGES, ACCESS_CONTROL_ALLOW_HEADERS, ACCESS_CONTROL_ALLOW_METHODS,
+    ACCESS_CONTROL_ALLOW_ORIGIN, ACCESS_CONTROL_EXPOSE_HEADERS, ACCESS_CONTROL_MAX_AGE,
+    CONTENT_LENGTH, CONTENT_RANGE, CONTENT_TYPE, ORIGIN, RANGE, VARY,
+};
+use hyper::server::conn::http1;
+use hyper::service::service_fn;
+use hyper::{Method, Request, Response, StatusCode};
+use hyper_util::rt::TokioIo;
+use sha2::{Digest, Sha256};
+use std::collections::HashMap;
+use std::convert::Infallible;
+use std::path::{Path, PathBuf};
+use std::sync::{Arc, Mutex, OnceLock};
+use tokio::io::{AsyncReadExt, AsyncSeekExt, SeekFrom};
+use tokio::net::TcpListener;
+
+type Body = Full<Bytes>;
+
+/// Keep individual responses small enough that a media seek cannot allocate
+/// an unbounded buffer. WebKit asks for the next range as it plays.
+const MAX_RANGE_BYTES: u64 = 8 * 1024 * 1024;
+
+struct ThemeServer {
+    port: u16,
+    root: PathBuf,
+    previews: Arc<Mutex<HashMap<String, PathBuf>>>,
+}
+
+static SERVER: OnceLock<ThemeServer> = OnceLock::new();
+
+/// Bind the server on a random loopback port. The root is the themes folder.
+pub fn start(root: PathBuf, media_root: PathBuf) -> Result<u16, String> {
+    if let Some(server) = SERVER.get() {
+        return Ok(server.port);
+    }
+
+    let root = std::fs::canonicalize(&root)
+        .map_err(|error| format!("Could not resolve the themes folder: {error}"))?;
+    let media_root = std::fs::canonicalize(&media_root)
+        .map_err(|error| format!("Could not resolve the theme media cache: {error}"))?;
+    let listener = std::net::TcpListener::bind(("127.0.0.1", 0))
+        .map_err(|error| format!("Could not start the theme asset server: {error}"))?;
+    listener
+        .set_nonblocking(true)
+        .map_err(|error| format!("Could not configure the theme asset server: {error}"))?;
+    let port = listener
+        .local_addr()
+        .map_err(|error| format!("Could not read the theme asset server address: {error}"))?
+        .port();
+
+    let previews = Arc::new(Mutex::new(HashMap::new()));
+    let server = ThemeServer {
+        port,
+        root: root.clone(),
+        previews: previews.clone(),
+    };
+    let _ = SERVER.set(server);
+
+    let root = Arc::new(root);
+    let media_root = Arc::new(media_root);
+    tauri::async_runtime::spawn(async move {
+        let listener = match TcpListener::from_std(listener) {
+            Ok(listener) => listener,
+            Err(error) => {
+                log::error!(target: "launcher", "Theme asset server failed: {error}");
+                return;
+            }
+        };
+
+        log::info!(
+            target: "launcher",
+            "Theme asset server listening on http://127.0.0.1:{port}/themes"
+        );
+
+        loop {
+            let (stream, _) = match listener.accept().await {
+                Ok(connection) => connection,
+                Err(error) => {
+                    log::debug!(target: "launcher", "Theme asset server accept error: {error}");
+                    continue;
+                }
+            };
+
+            let root = root.clone();
+            let media_root = media_root.clone();
+            let previews = previews.clone();
+            tokio::spawn(async move {
+                let service = service_fn(move |request| {
+                    handle(request, root.clone(), media_root.clone(), previews.clone())
+                });
+
+                if let Err(error) = http1::Builder::new()
+                    .serve_connection(TokioIo::new(stream), service)
+                    .await
+                {
+                    log::debug!(target: "launcher", "Theme asset connection ended: {error}");
+                }
+            });
+        }
+    });
+
+    Ok(port)
+}
+
+pub fn base_url() -> Option<String> {
+    SERVER
+        .get()
+        .map(|server| format!("http://127.0.0.1:{}/themes", server.port))
+}
+
+/// The cache folder for optimized theme media, next to the themes folder.
+pub fn media_root() -> Result<PathBuf, String> {
+    let home = std::env::var("HOME")
+        .or_else(|_| std::env::var("USERPROFILE"))
+        .map_err(|_| "Could not locate the home directory".to_string())?;
+    let root = PathBuf::from(home)
+        .join(".ezpplauncher")
+        .join("media-cache");
+    std::fs::create_dir_all(&root)
+        .map_err(|error| format!("Failed to create the theme media cache: {error}"))?;
+    std::fs::canonicalize(&root)
+        .map_err(|error| format!("Failed to resolve the theme media cache: {error}"))
+}
+
+/// Map a loopback theme URL back to the file it serves. Only paths inside the
+/// configured themes folder are accepted.
+pub fn resolve_theme_url(value: &str) -> Option<PathBuf> {
+    let server = SERVER.get()?;
+    let url = url::Url::parse(value).ok()?;
+    if url.scheme() != "http"
+        || url.host_str() != Some("127.0.0.1")
+        || url.port() != Some(server.port)
+    {
+        return None;
+    }
+
+    let path = percent_encoding::percent_decode_str(url.path())
+        .decode_utf8_lossy()
+        .to_string();
+    let relative = path.strip_prefix("/themes/")?;
+    safe_path(&server.root, relative)
+}
+
+/// Public URL for a file in the optimized media cache.
+pub fn media_url(file_name: &str) -> Option<String> {
+    let server = SERVER.get()?;
+    Some(format!(
+        "http://127.0.0.1:{}/media/{}",
+        server.port, file_name
+    ))
+}
+
+/// Register a file picked in the theme editor so its preview can be served
+/// over HTTP too. The token is only a lookup key; unregistered paths are never
+/// readable through the server.
+pub fn preview_url(path: &Path) -> Result<String, String> {
+    let server = SERVER
+        .get()
+        .ok_or_else(|| "The theme asset server is not running".to_string())?;
+    let path = std::fs::canonicalize(path)
+        .map_err(|error| format!("Could not resolve the preview asset: {error}"))?;
+    if !path.is_file() {
+        return Err("The preview asset is not a file".to_string());
+    }
+
+    let mut hasher = Sha256::new();
+    hasher.update(path.to_string_lossy().as_bytes());
+    hasher.update(
+        std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap_or_default()
+            .as_nanos()
+            .to_le_bytes(),
+    );
+    let token = hex::encode(&hasher.finalize()[..16]);
+
+    server
+        .previews
+        .lock()
+        .map_err(|_| "Could not register the preview asset".to_string())?
+        .insert(token.clone(), path);
+
+    Ok(format!("http://127.0.0.1:{}/preview/{token}", server.port))
+}
+
+async fn handle(
+    request: Request<Incoming>,
+    root: Arc<PathBuf>,
+    media_root: Arc<PathBuf>,
+    previews: Arc<Mutex<HashMap<String, PathBuf>>>,
+) -> Result<Response<Body>, Infallible> {
+    let origin = request
+        .headers()
+        .get(ORIGIN)
+        .and_then(|value| value.to_str().ok())
+        .and_then(allowed_origin);
+
+    if request.method() == Method::OPTIONS {
+        return Ok(preflight_response(origin.as_deref()));
+    }
+
+    if request.method() != Method::GET && request.method() != Method::HEAD {
+        return Ok(text_response(
+            StatusCode::METHOD_NOT_ALLOWED,
+            "Method not allowed",
+            origin.as_deref(),
+        ));
+    }
+
+    let range = request
+        .headers()
+        .get(RANGE)
+        .and_then(|value| value.to_str().ok())
+        .map(ToOwned::to_owned);
+
+    let path = percent_encoding::percent_decode_str(request.uri().path())
+        .decode_utf8_lossy()
+        .to_string();
+
+    log::debug!(
+        target: "launcher",
+        "Theme asset request: {path} range={range:?}"
+    );
+
+    let file = if let Some(relative) = path.strip_prefix("/themes/") {
+        safe_path(&root, relative)
+    } else if let Some(relative) = path.strip_prefix("/media/") {
+        safe_path(&media_root, relative)
+    } else if let Some(token) = path.strip_prefix("/preview/") {
+        previews
+            .lock()
+            .ok()
+            .and_then(|previews| previews.get(token).cloned())
+    } else {
+        None
+    };
+
+    let response = match file {
+        Some(file) => {
+            serve_file(request.method(), &file, range.as_deref(), origin.as_deref()).await
+        }
+        None => Ok(text_response(
+            StatusCode::NOT_FOUND,
+            "Not found",
+            origin.as_deref(),
+        )),
+    };
+
+    Ok(response.unwrap_or_else(|message| {
+        log::warn!(target: "launcher", "Theme asset request failed: {message}");
+        text_response(
+            StatusCode::INTERNAL_SERVER_ERROR,
+            &message,
+            origin.as_deref(),
+        )
+    }))
+}
+
+fn safe_path(root: &Path, relative: &str) -> Option<PathBuf> {
+    let relative = relative.trim_start_matches('/');
+    if relative.is_empty()
+        || relative
+            .split('/')
+            .any(|part| part.is_empty() || part == "." || part == "..")
+    {
+        return None;
+    }
+
+    let candidate = root.join(relative);
+    let canonical = std::fs::canonicalize(candidate).ok()?;
+    canonical.starts_with(root).then_some(canonical)
+}
+
+async fn serve_file(
+    method: &Method,
+    path: &Path,
+    range_header: Option<&str>,
+    origin: Option<&str>,
+) -> Result<Response<Body>, String> {
+    let metadata = tokio::fs::metadata(path)
+        .await
+        .map_err(|error| format!("Could not read theme asset: {error}"))?;
+    if !metadata.is_file() {
+        return Ok(text_response(StatusCode::NOT_FOUND, "Not found", origin));
+    }
+
+    let length = metadata.len();
+    let range = match range_header {
+        Some(header) => match parse_range(header, length) {
+            Ok(range) => range,
+            Err(()) => return Ok(range_not_satisfiable(length, origin)),
+        },
+        None => None,
+    };
+
+    let (status, start, end) = match range {
+        Some((start, end)) => (StatusCode::PARTIAL_CONTENT, start, end),
+        None => (StatusCode::OK, 0, length.saturating_sub(1)),
+    };
+
+    let body_length = if length == 0 {
+        0
+    } else {
+        end.saturating_sub(start) + 1
+    };
+
+    let body = if method == Method::HEAD || body_length == 0 {
+        Vec::new()
+    } else {
+        let mut file = tokio::fs::File::open(path)
+            .await
+            .map_err(|error| format!("Could not open theme asset: {error}"))?;
+        if start > 0 {
+            file.seek(SeekFrom::Start(start))
+                .await
+                .map_err(|error| format!("Could not seek theme asset: {error}"))?;
+        }
+        let mut buffer = vec![0_u8; body_length as usize];
+        file.read_exact(&mut buffer)
+            .await
+            .map_err(|error| format!("Could not read theme asset: {error}"))?;
+        buffer
+    };
+
+    let mut builder = Response::builder()
+        .status(status)
+        .header(CONTENT_TYPE, content_type(path))
+        .header(CONTENT_LENGTH, body_length.to_string())
+        .header(ACCEPT_RANGES, "bytes")
+        .header("Cache-Control", "no-store")
+        .header("X-Content-Type-Options", "nosniff")
+        .header("Cross-Origin-Resource-Policy", "cross-origin");
+
+    if status == StatusCode::PARTIAL_CONTENT {
+        builder = builder.header(CONTENT_RANGE, format!("bytes {start}-{end}/{length}"));
+    }
+
+    if let Some(origin) = origin {
+        builder = builder
+            .header(ACCESS_CONTROL_ALLOW_ORIGIN, origin)
+            .header(VARY, "Origin")
+            .header(
+                ACCESS_CONTROL_EXPOSE_HEADERS,
+                "Content-Range, Content-Length, Accept-Ranges",
+            );
+    }
+
+    builder
+        .body(Full::new(body.into()))
+        .map_err(|error| format!("Could not build theme asset response: {error}"))
+}
+
+fn parse_range(header: &str, length: u64) -> Result<Option<(u64, u64)>, ()> {
+    if length == 0 {
+        return Ok(None);
+    }
+
+    let ranges = HttpRange::parse(header, length).map_err(|_| ())?;
+    if ranges.len() != 1 {
+        return Err(());
+    }
+
+    let range = &ranges[0];
+    let start = range.start;
+    let end = (start + range.length - 1).min(length - 1);
+    if start >= length || end < start {
+        return Err(());
+    }
+
+    // Don't allocate the entire file for a single open-ended range request.
+    Ok(Some((start, end.min(start + MAX_RANGE_BYTES - 1))))
+}
+
+fn range_not_satisfiable(length: u64, origin: Option<&str>) -> Response<Body> {
+    let mut builder = Response::builder()
+        .status(StatusCode::RANGE_NOT_SATISFIABLE)
+        .header(CONTENT_RANGE, format!("bytes */{length}"))
+        .header(CONTENT_TYPE, "text/plain; charset=utf-8")
+        .header(CONTENT_LENGTH, "0");
+
+    if let Some(origin) = origin {
+        builder = builder
+            .header(ACCESS_CONTROL_ALLOW_ORIGIN, origin)
+            .header(VARY, "Origin");
+    }
+
+    builder
+        .body(Full::new(Bytes::new()))
+        .expect("range response is valid")
+}
+
+fn preflight_response(origin: Option<&str>) -> Response<Body> {
+    let mut builder = Response::builder()
+        .status(StatusCode::NO_CONTENT)
+        .header(ACCESS_CONTROL_ALLOW_METHODS, "GET, HEAD, OPTIONS")
+        .header(ACCESS_CONTROL_ALLOW_HEADERS, "Range, Content-Type")
+        .header(
+            ACCESS_CONTROL_EXPOSE_HEADERS,
+            "Content-Range, Content-Length, Accept-Ranges",
+        )
+        .header(ACCESS_CONTROL_MAX_AGE, "600");
+
+    if let Some(origin) = origin {
+        builder = builder
+            .header(ACCESS_CONTROL_ALLOW_ORIGIN, origin)
+            .header(VARY, "Origin");
+    }
+
+    builder
+        .body(Full::new(Bytes::new()))
+        .expect("preflight response is valid")
+}
+
+fn text_response(status: StatusCode, message: &str, origin: Option<&str>) -> Response<Body> {
+    let mut builder = Response::builder()
+        .status(status)
+        .header(CONTENT_TYPE, "text/plain; charset=utf-8")
+        .header(CONTENT_LENGTH, message.len().to_string())
+        .header("X-Content-Type-Options", "nosniff");
+
+    if let Some(origin) = origin {
+        builder = builder
+            .header(ACCESS_CONTROL_ALLOW_ORIGIN, origin)
+            .header(VARY, "Origin");
+    }
+
+    builder
+        .body(Full::new(Bytes::copy_from_slice(message.as_bytes())))
+        .expect("text response is valid")
+}
+
+fn allowed_origin(origin: &str) -> Option<String> {
+    if origin == "tauri://localhost"
+        || origin == "http://tauri.localhost"
+        || origin == "https://tauri.localhost"
+        || origin == "null"
+        || origin.starts_with("http://localhost:")
+        || origin.starts_with("http://127.0.0.1:")
+    {
+        Some(origin.to_string())
+    } else {
+        None
+    }
+}
+
+fn content_type(path: &Path) -> &'static str {
+    match path
+        .extension()
+        .and_then(|extension| extension.to_str())
+        .unwrap_or_default()
+        .to_ascii_lowercase()
+        .as_str()
+    {
+        "html" | "htm" => "text/html; charset=utf-8",
+        "js" | "mjs" => "text/javascript; charset=utf-8",
+        "css" => "text/css; charset=utf-8",
+        "json" => "application/json; charset=utf-8",
+        "svg" => "image/svg+xml",
+        "png" => "image/png",
+        "jpg" | "jpeg" => "image/jpeg",
+        "gif" => "image/gif",
+        "webp" => "image/webp",
+        "avif" => "image/avif",
+        "ico" => "image/x-icon",
+        "webm" => "video/webm",
+        "mp4" | "m4v" => "video/mp4",
+        "mov" => "video/quicktime",
+        "ogv" => "video/ogg",
+        "mp3" => "audio/mpeg",
+        "ogg" | "oga" => "audio/ogg",
+        "wav" => "audio/wav",
+        "m4a" => "audio/mp4",
+        "flac" => "audio/flac",
+        "woff2" => "font/woff2",
+        "woff" => "font/woff",
+        "ttf" => "font/ttf",
+        "otf" => "font/otf",
+        "wasm" => "application/wasm",
+        _ => "application/octet-stream",
+    }
+}

src-tauri/src/utils.rs

@@ -1,7 +1,112 @@
 use std::fs;
-use std::path::Path;
+use std::path::{Path, PathBuf};
+use std::time::SystemTime;
 use sysinfo::Pid;
 
+pub const OSU_FOLDER_FILES: &[&str] = &[
+    "avcodec-51.dll",
+    "avformat-52.dll",
+    "avutil-49.dll",
+    "bass.dll",
+    "bass_fx.dll",
+    "collection.db",
+    "d3dcompiler_47.dll",
+    "libEGL.dll",
+    "libGLESv2.dll",
+    "Microsoft.Ink.dll",
+    "OpenTK.dll",
+    "osu!.cfg",
+    "osu!.db",
+    "osu!.exe",
+    "osu!auth.dll",
+    "osu!gameplay.dll",
+    "osu!seasonal.dll",
+    "osu!ui.dll",
+    "presence.db",
+    "pthreadGC2.dll",
+    "scores.db",
+];
+
+pub fn is_valid_osu_folder<P: AsRef<Path>>(folder_path: P) -> bool {
+    let folder_path = folder_path.as_ref();
+    folder_path.join("osu!.exe").is_file()
+        && check_folder_completeness(folder_path, OSU_FOLDER_FILES) >= 70.0
+}
+
+/// True if the process is osu! (either running natively or through Wine/Proton).
+pub fn is_osu_process(process: &sysinfo::Process) -> bool {
+    let name = process.name().to_string_lossy().to_ascii_lowercase();
+    if name.ends_with("osu!.exe") {
+        return true;
+    }
+
+    if let Some(exe) = process.exe() {
+        if exe
+            .file_name()
+            .map(|file_name| file_name.to_string_lossy().to_ascii_lowercase() == "osu!.exe")
+            .unwrap_or(false)
+        {
+            return true;
+        }
+    }
+
+    process.cmd().iter().any(|arg| {
+        arg.to_string_lossy()
+            .to_ascii_lowercase()
+            .contains("osu!.exe")
+    })
+}
+
+/// Like [`is_osu_process`], but excludes the osu! updater started with `-repair`.
+pub fn is_osu_game_process(process: &sysinfo::Process) -> bool {
+    is_osu_process(process)
+        && !process.cmd().iter().any(|arg| {
+            arg.to_string_lossy()
+                .to_ascii_lowercase()
+                .contains("-repair")
+        })
+}
+
+fn find_osu_user_config_path<P: AsRef<Path>>(folder_path: P) -> Option<PathBuf> {
+    let folder_path = folder_path.as_ref();
+    if !folder_path.is_dir() {
+        return None;
+    }
+
+    if let Ok(current_user) = std::env::var("USERNAME").or_else(|_| std::env::var("USER")) {
+        let config_path = folder_path.join(format!("osu!.{}.cfg", current_user));
+        if config_path.is_file() {
+            return Some(config_path);
+        }
+    }
+
+    // The Windows username inside a Wine prefix does not always match the host
+    // username (especially on macOS), so fall back to the most recent osu!.*.cfg.
+    let mut candidates = fs::read_dir(folder_path)
+        .ok()?
+        .flatten()
+        .filter_map(|entry| {
+            let path = entry.path();
+            let file_name = path.file_name()?.to_string_lossy().to_ascii_lowercase();
+            if !file_name.starts_with("osu!.") || !file_name.ends_with(".cfg") {
+                return None;
+            }
+            if file_name == "osu!.cfg" {
+                return None;
+            }
+
+            let modified = entry
+                .metadata()
+                .and_then(|metadata| metadata.modified())
+                .unwrap_or(SystemTime::UNIX_EPOCH);
+            Some((modified, path))
+        })
+        .collect::<Vec<_>>();
+
+    candidates.sort_by(|a, b| b.0.cmp(&a.0));
+    candidates.into_iter().next().map(|(_, path)| path)
+}
+
 pub fn check_folder_completeness<P: AsRef<Path>>(folder_path: P, required_files: &[&str]) -> f32 {
     let mut found = 0;
     for file in required_files {
@@ -20,17 +125,7 @@ pub fn check_folder_completeness<P: AsRef<Path>>(folder_path: P, required_files:
 pub fn get_osu_user_config<P: AsRef<Path>>(
     osu_folder_path: P,
 ) -> Option<std::collections::HashMap<String, String>> {
-    if !osu_folder_path.as_ref().exists() {
-        return None;
-    }
-
-    let current_user = std::env::var("USERNAME").unwrap_or_else(|_| "Admin".to_string());
-    let osu_config_path = osu_folder_path
-        .as_ref()
-        .join(format!("osu!.{}.cfg", current_user));
-    if !osu_config_path.exists() {
-        return None;
-    }
+    let osu_config_path = find_osu_user_config_path(osu_folder_path)?;
 
     let mut config_map = std::collections::HashMap::new();
     if let Ok(contents) = std::fs::read_to_string(osu_config_path) {
@@ -41,19 +136,15 @@ pub fn get_osu_user_config<P: AsRef<Path>>(
         }
     }
 
-    return Some(config_map);
+    Some(config_map)
 }
 
 pub fn set_osu_user_config_vals(
     osu_folder_path: &str,
     key_values: &[(&str, Option<&str>)],
 ) -> Result<bool, String> {
-    let current_user = std::env::var("USERNAME").unwrap_or_else(|_| "Admin".to_string());
-    let osu_config_path = Path::new(osu_folder_path).join(format!("osu!.{}.cfg", current_user));
-
-    if !osu_config_path.exists() {
-        return Err("osu! user config file does not exist".to_string());
-    }
+    let osu_config_path = find_osu_user_config_path(osu_folder_path)
+        .ok_or_else(|| "osu! user config file does not exist".to_string())?;
 
     let mut lines = fs::read_to_string(&osu_config_path)
         .map_err(|e| e.to_string())?
@@ -173,23 +264,47 @@ pub fn get_osu_config<P: AsRef<Path>>(
     return Some(config_map);
 }
 
-#[cfg(not(windows))]
-pub fn is_osuwinello_available() -> bool {
-    use std::process::Command;
-    Command::new("osu-wine")
-        .arg("--info")
-        .stdout(std::process::Stdio::null())
-        .stderr(std::process::Stdio::null())
-        .status()
-        .is_ok()
+#[cfg(target_os = "linux")]
+pub fn get_osuwinello_path() -> Option<PathBuf> {
+    let mut search_paths =
+        std::env::split_paths(&std::env::var_os("PATH").unwrap_or_default()).collect::<Vec<_>>();
+
+    for path in ["/usr/local/bin", "/usr/bin", "/bin"] {
+        let path = PathBuf::from(path);
+        if !search_paths.contains(&path) {
+            search_paths.push(path);
+        }
+    }
+
+    if let Some(home) = std::env::var_os("HOME") {
+        let path = Path::new(&home).join(".local/bin");
+        if !search_paths.contains(&path) {
+            search_paths.push(path);
+        }
+    }
+
+    search_paths
+        .into_iter()
+        .map(|path| path.join("osu-wine"))
+        .find(|path| path.is_file())
 }
 
-#[cfg(windows)]
+#[cfg(not(target_os = "linux"))]
+pub fn get_osuwinello_path() -> Option<PathBuf> {
+    None
+}
+
+#[cfg(target_os = "linux")]
+pub fn is_osuwinello_available() -> bool {
+    get_osuwinello_path().is_some()
+}
+
+#[cfg(not(target_os = "linux"))]
 pub fn is_osuwinello_available() -> bool {
     false
 }
 
-#[cfg(not(windows))]
+#[cfg(target_os = "linux")]
 pub fn is_wmctrl_available() -> bool {
     use std::process::Command;
     Command::new("wmctrl")
@@ -200,12 +315,12 @@ pub fn is_wmctrl_available() -> bool {
         .is_ok()
 }
 
-#[cfg(windows)]
+#[cfg(not(target_os = "linux"))]
 pub fn is_wmctrl_available() -> bool {
     false
 }
 
-#[cfg(not(windows))]
+#[cfg(target_os = "linux")]
 pub fn get_window_title_by_pid(target_pid: Pid) -> String {
     use std::process::Command;
     let find_title = || -> Option<String> {
@@ -237,6 +352,11 @@ pub fn get_window_title_by_pid(target_pid: Pid) -> String {
     find_title().unwrap_or_default()
 }
 
+#[cfg(target_os = "macos")]
+pub fn get_window_title_by_pid(_pid: Pid) -> String {
+    String::new()
+}
+
 #[cfg(windows)]
 pub fn get_window_title_by_pid(pid: Pid) -> String {
     use std::ffi::OsString;
@@ -301,16 +421,23 @@ pub async fn is_net8_installed() -> bool {
     match output_result {
         Ok(output) => {
             if !output.status.success() {
-                eprintln!(
-                    "Error: `dotnet --list-runtimes` failed with status: {}",
+                log::warn!(
+                    target: "launcher",
+                    "`dotnet --list-runtimes` failed with status: {}",
                     output.status
                 );
-                eprintln!("stderr: {}", String::from_utf8_lossy(&output.stderr));
+                log::warn!(
+                    target: "launcher",
+                    "dotnet stderr: {}",
+                    String::from_utf8_lossy(&output.stderr)
+                );
                 return false;
             }
 
             let stdout_str = String::from_utf8_lossy(&output.stdout);
-            stdout_str.lines().any(|line| line.starts_with("Microsoft.WindowsDesktop.App 8."))
+            stdout_str
+                .lines()
+                .any(|line| line.starts_with("Microsoft.WindowsDesktop.App 8."))
         }
         Err(_) => false,
     }

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "EZPPLauncher",
-  "version": "3.0.9",
+  "version": "3.2.7",
   "identifier": "farm.EZPPFarm.Launcher",
   "mainBinaryName": "ezpplauncher",
   "build": {
@@ -15,20 +15,49 @@
       {
         "title": "EZPPLauncher",
         "width": 1000,
-        "height": 737,
+        "height": 650,
+        "minWidth": 1000,
+        "minHeight": 650,
         "decorations": false,
         "resizable": false,
-        "maximizable": false
+        "maximizable": false,
+        "shadow": true
       }
     ],
     "withGlobalTauri": true,
     "security": {
-      "csp": null
+      "csp": {
+        "default-src": "'self' tauri: customprotocol: asset:",
+        "script-src": "'self' 'unsafe-inline' asset: http://asset.localhost https://asset.localhost http://127.0.0.1:* https://analytics.ez-pp.farm",
+        "style-src": "'self' 'unsafe-inline' asset: http://asset.localhost https://asset.localhost http://127.0.0.1:*",
+        "img-src": "'self' asset: http://asset.localhost https://asset.localhost blob: data: http://127.0.0.1:* https://assets.ppy.sh https://a.ez-pp.farm https://git.ez-pp.farm https://osu.direct",
+        "connect-src": "'self' ipc: http://ipc.localhost asset: http://asset.localhost https://asset.localhost http://127.0.0.1:* https://ez-pp.farm https://api.ez-pp.farm https://c.ez-pp.farm https://analytics.ez-pp.farm https://git.ez-pp.farm https://osu.direct https://osu.ppy.sh https://api.fontsource.org https://cdn.jsdelivr.net",
+        "media-src": "'self' asset: http://asset.localhost https://asset.localhost http://127.0.0.1:* blob:",
+        "font-src": [
+          "'self'",
+          "asset:",
+          "blob:",
+          "data:",
+          "http://asset.localhost",
+          "https://asset.localhost",
+          "http://127.0.0.1:*",
+          "https://cdn.jsdelivr.net"
+        ]
+      },
+      "assetProtocol": {
+        "enable": true,
+        "scope": [
+          "$HOME/.ezpplauncher/themes/**",
+          "$HOME/.ezpplauncher/font-cache/**"
+        ]
+      }
     }
   },
   "bundle": {
     "publisher": "EZPPFarm",
     "copyright": "EZPPFarm",
+    "shortDescription": "osu! launcher for EZPPFarm",
+    "longDescription": "EZPPLauncher is a custom osu! launcher for the EZPPFarm server, featuring automatic updates, ingame login, stat tracking and launcher theming.",
     "homepage": "https://ez-pp.farm",
     "license": "GPL-3.0",
     "active": true,
@@ -36,6 +65,17 @@
       "nsis",
       "appimage"
     ],
+    "fileAssociations": [
+      {
+        "ext": [
+          "ezpplauncher-theme"
+        ],
+        "name": "EZPPLauncher Theme",
+        "description": "EZPPLauncher Theme File",
+        "role": "Viewer",
+        "mimeType": "application/x-ezpplauncher-theme"
+      }
+    ],
     "windows": {
       "webviewInstallMode": {
         "silent": true,
@@ -44,6 +84,7 @@
       "nsis": {
         "installMode": "currentUser",
         "compression": "lzma",
+        "installerIcon": "icons/icon.ico",
         "installerHooks": "./nsis/nsis-hooks.nsh"
       }
     },

src-tauri/tauri.macos.conf.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "bundle": {
+    "targets": ["app", "dmg"],
+    "macOS": {
+      "minimumSystemVersion": "10.15"
+    }
+  }
+}

src/app.css

@@ -4,6 +4,13 @@
 
 @custom-variant dark (&:where(.dark, .dark *));
 
+@import "@fontsource-variable/sora";
+@import "@fontsource/space-mono";
+@import "@fontsource/bebas-neue";
+@import "@fontsource-variable/montserrat";
+@import "@fontsource-variable/playfair-display";
+@import "@fontsource-variable/jetbrains-mono";
+
 :root {
   --radius: 0.625rem;
   --background: oklch(95.36% 0.017 256.57);
@@ -41,7 +48,7 @@
   --sidebar-ring: oklch(60.7% 0.226 299.68);
 
   --font-sans:
-    "Sora", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Sora Variable", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
     "Segoe UI Symbol", "Noto Color Emoji";
   --font-mono:
     "Space Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
@@ -55,7 +62,7 @@
   --card-foreground: oklch(89.24% 0.079 263.24);
   --popover: oklch(20.3% 0.05 282.86);
   --popover-foreground: oklch(89.24% 0.079 263.24);
-  --primary: oklch(81.45% 0.159 300.53);
+  --primary: oklch(72.08% 0.196 356.34);
   --primary-foreground: oklch(20.22% 0.048 282.86);
   --secondary: oklch(42.99% 0.031 270.49);
   --secondary-foreground: oklch(89.24% 0.079 263.24);
@@ -67,8 +74,8 @@
   --destructive-foreground: oklch(20.22% 0.048 282.86);
   --border: oklch(27.7% 0.041 276.87);
   --input: oklch(27.7% 0.041 276.87);
-  --ring: oklch(81.45% 0.159 300.53);
-  --chart-1: oklch(81.45% 0.159 300.53);
+  --ring: oklch(72.08% 0.196 356.34);
+  --chart-1: oklch(72.08% 0.196 356.34);
   --chart-2: oklch(77.19% 0.121 223.01);
   --chart-3: oklch(79.1% 0.119 150.21);
   --chart-4: oklch(79.74% 0.167 57.97);
@@ -76,12 +83,12 @@
   --sidebar: oklch(13.29% 0.036 282.86);
   --sidebar-background: oklch(13.29% 0.036 282.86);
   --sidebar-foreground: oklch(89.24% 0.079 263.24);
-  --sidebar-primary: oklch(81.45% 0.159 300.53);
+  --sidebar-primary: oklch(72.08% 0.196 356.34);
   --sidebar-primary-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-accent: oklch(75.21% 0.121 293.01);
   --sidebar-accent-foreground: oklch(20.22% 0.048 282.86);
   --sidebar-border: oklch(35.13% 0.03 273.31);
-  --sidebar-ring: oklch(81.45% 0.159 300.53);
+  --sidebar-ring: oklch(72.08% 0.196 356.34);
 }
 
 @theme inline {
@@ -108,20 +115,18 @@
   --color-popover: var(--popover);
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
-  --color-primary-50: #fefdff;
-  --color-primary-100: #faf6fe;
-  --color-primary-200: #f2e9fc;
-  --color-primary-300: #e9dbfa;
-  --color-primary-400: #e1cef9;
-  --color-primary-500: #d9c0f7;
-  --color-primary-600: #c6a0f3;
-  --color-primary-700: #b381ef;
-  --color-primary-800: #a061eb;
-  --color-primary-900: #8d41e7;
-  --color-primary-950: #8331e5;
+  --color-primary-50: #ffe5f1;
+  --color-primary-100: #ffcce2;
+  --color-primary-200: #ff99c5;
+  --color-primary-300: #ff66a8;
+  --color-primary-400: #ff338b;
+  --color-primary-500: #ff006e;
+  --color-primary-600: #cc0058;
+  --color-primary-700: #990042;
+  --color-primary-800: #66002c;
+  --color-primary-900: #330016;
+  --color-primary-950: #24000f;
   --color-primary-foreground: var(--primary-foreground);
-  --color-primary-50: #fefdff;
-  --color-primary-100: #faf6fe;
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);

src/app.html

@@ -1,15 +1,13 @@
 <!doctype html>
 <html lang="en" class="dark">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>EZPPLauncher</title>
+    %sveltekit.head%
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>EZPPLauncher</title>
-  %sveltekit.head%
-</head>
-
-<body class="bg-theme-950" data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
-</body>
-
+  <body class="bg-theme-950" data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>

src/lib/api/ezpp.ts

@@ -3,9 +3,11 @@ import type {
   EZPPUserInfoResponse,
   EZPPUserResponse,
   EZPPUSerStatusResponse,
-} from '@/types';
+  StreamsResult,
+} from '$lib/types';
 import { betterFetch } from '@better-fetch/fetch';
 
+const VERSION_ENDPOINT = 'https://version.ez-pp.farm/';
 const BANCHO_ENDPOINT = 'https://c.ez-pp.farm/';
 const API_ENDPOINT = 'https://api.ez-pp.farm/';
 const ENDPOINT = 'https://ez-pp.farm/';
@@ -89,4 +91,31 @@ export const ezppfarm = {
     );
     return request.error ? undefined : request.data;
   },
+  latestBuildVersion: async (releaseStream: string): Promise<string | undefined> => {
+    const request = await betterFetch<StreamsResult>(`${VERSION_ENDPOINT}api/changelog`, {
+      timeout,
+      query: {
+        stream: 'none',
+      },
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'User-Agent': 'EZPPLauncher',
+      },
+    });
+    if (request.error) {
+      return undefined;
+    }
+    const releaseData = request.data;
+    if (!releaseData || !releaseData.streams) {
+      return undefined;
+    }
+    if (releaseData.streams.length === 0) return undefined;
+    const selectedRelease = releaseData.streams.find(
+      (releaseBuild) =>
+        releaseBuild.name.toLowerCase() === releaseStream.replaceAll(' ', '').toLowerCase()
+    );
+    if (!selectedRelease) return undefined;
+    return selectedRelease.latest_build.display_version;
+  },
 };

src/lib/api/git.ts

@@ -1,4 +1,4 @@
-import type { Release } from '@/types';
+import type { Release } from '$lib/types';
 import { betterFetch } from '@better-fetch/fetch';
 import semver from 'semver';
 

src/lib/api/osuapi.ts

@@ -1,35 +0,0 @@
-import type { StreamsResult } from '@/types';
-import { betterFetch } from '@better-fetch/fetch';
-
-const API_ENDPOINT = 'https://osu.ppy.sh/api/';
-
-const timeout = 5000; // 5 seconds;
-
-export const osuapi = {
-  latestBuildVersion: async (releaseStream: string): Promise<string | undefined> => {
-    const request = await betterFetch<StreamsResult>(`${API_ENDPOINT}v2/changelog`, {
-      timeout,
-      query: {
-        stream: 'none',
-      },
-      headers: {
-        'Content-Type': 'application/json',
-        'User-Agent': 'EZPPLauncher',
-      },
-    });
-    if (request.error) {
-      return undefined;
-    }
-    const releaseData = request.data;
-    if (!releaseData || !releaseData.streams) {
-      return undefined;
-    }
-    if (releaseData.streams.length === 0) return undefined;
-    const selectedRelease = releaseData.streams.find(
-      (releaseBuild) =>
-        releaseBuild.name.toLowerCase() === releaseStream.replaceAll(' ', '').toLowerCase()
-    );
-    if (!selectedRelease) return undefined;
-    return selectedRelease.latest_build.display_version;
-  },
-};

src/lib/components/confetti/ConfettiCannon.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type ConfettiCannonProps = {
+    colors?: string[];
+    count?: number;
+  };
+
+  let { colors = ['#ff006e', '#a78bfa', '#7dd3fc', '#fbbf24'], count = 820 }: ConfettiCannonProps =
+    $props();
+
+  let canvas = $state<HTMLCanvasElement>();
+
+  type Particle = {
+    x: number;
+    y: number;
+    vx: number;
+    vy: number;
+    width: number;
+    height: number;
+    rotation: number;
+    spin: number;
+    flutterPhase: number;
+    flutterSpeed: number;
+    swayPhase: number;
+    swaySpeed: number;
+    swayAmount: number;
+    terminalVelocity: number;
+    wind: number;
+    color: string;
+    delay: number;
+    age: number;
+    lifetime: number;
+  };
+
+  onMount(() => {
+    const element = canvas;
+    if (!element) return;
+
+    const context = element.getContext('2d');
+    if (!context) return;
+
+    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+
+    const random = (min: number, max: number) => Math.random() * (max - min) + min;
+
+    let width = 0;
+    let height = 0;
+    let dpr = 1;
+    let frame = 0;
+    let lastTime = 0;
+    let elapsed = 0;
+    let particles: Particle[] = [];
+
+    const spawn = () => {
+      const rect = element.getBoundingClientRect();
+      width = rect.width || window.innerWidth;
+      height = rect.height || window.innerHeight;
+      dpr = Math.min(window.devicePixelRatio || 1, 2);
+
+      element.width = Math.max(1, Math.round(width * dpr));
+      element.height = Math.max(1, Math.round(height * dpr));
+      context.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+      particles = Array.from({ length: count }, (_, index) => {
+        const fromLeft = index % 2 === 0;
+        const direction = fromLeft ? 1 : -1;
+        const streamer = Math.random() < 0.35;
+        const pieceWidth = streamer ? random(3, 5) : random(5, 8);
+        const pieceHeight = streamer ? random(12, 24) : random(7, 14);
+
+        return {
+          x: fromLeft ? random(0, 28) : width - random(0, 28),
+          y: height - random(0, 16),
+          // Aim inward and up from each bottom corner. Horizontal drag and
+          // gravity turn the straight launch into a natural arc.
+          vx: direction * random(160, 900),
+          vy: -random(1050, 1450),
+          width: pieceWidth,
+          height: pieceHeight,
+          rotation: random(0, Math.PI * 2),
+          spin: random(-4, 4),
+          flutterPhase: random(0, Math.PI * 2),
+          flutterSpeed: random(2.5, 6.5),
+          swayPhase: random(0, Math.PI * 2),
+          swaySpeed: random(2.2, 4.2),
+          swayAmount: random(4, 14),
+          terminalVelocity: random(130, 230),
+          wind: random(-8, 8),
+          color: colors[Math.floor(Math.random() * colors.length)],
+          delay: random(0, 0.25),
+          age: 0,
+          lifetime: random(7, 9.5),
+        };
+      });
+    };
+
+    const paint = (time: number) => {
+      if (lastTime === 0) lastTime = time;
+      const delta = Math.min((time - lastTime) / 1000, 0.05);
+      lastTime = time;
+      elapsed += delta;
+
+      context.clearRect(0, 0, width, height);
+
+      let alive = false;
+
+      for (const particle of particles) {
+        if (elapsed < particle.delay) {
+          alive = true;
+          continue;
+        }
+        if (particle.age >= particle.lifetime) continue;
+
+        particle.age += delta;
+        if (particle.age >= particle.lifetime) continue;
+        alive = true;
+
+        particle.vx *= Math.exp(-0.5 * delta);
+
+        if (particle.vy < 0) {
+          // The upward burst is slowed by gravity...
+          particle.vy += 1400 * delta;
+        } else {
+          // ...then the paper drifts down at its own slow terminal speed
+          // instead of accelerating like a solid object.
+          particle.vy += (particle.terminalVelocity - particle.vy) * (1 - Math.exp(-2.6 * delta));
+        }
+
+        particle.x += (particle.vx + particle.wind) * delta;
+        particle.y += particle.vy * delta;
+        particle.rotation += particle.spin * delta;
+
+        if (particle.x < -80 || particle.x > width + 80 || particle.y > height + 120) {
+          continue;
+        }
+
+        const fadeStart = particle.lifetime - 1.8;
+        const alpha =
+          particle.age > fadeStart ? Math.max(0, 1 - (particle.age - fadeStart) / 1.8) : 1;
+        if (alpha <= 0) continue;
+
+        const flutter = Math.cos(particle.flutterPhase + particle.age * particle.flutterSpeed);
+        const sway = Math.sin(particle.age * particle.swaySpeed + particle.swayPhase);
+        const scaleX = 0.15 + Math.abs(flutter) * 0.85;
+
+        context.save();
+        context.translate(particle.x + sway * particle.swayAmount, particle.y + sway * 3.5);
+        context.rotate(particle.rotation + flutter * 0.5);
+        context.scale(scaleX, 1);
+        context.globalAlpha = alpha;
+        context.fillStyle = particle.color;
+        context.fillRect(
+          -particle.width / 2,
+          -particle.height / 2,
+          particle.width,
+          particle.height
+        );
+        context.restore();
+      }
+
+      if (alive) {
+        frame = requestAnimationFrame(paint);
+      } else {
+        context.clearRect(0, 0, width, height);
+      }
+    };
+
+    spawn();
+    frame = requestAnimationFrame(paint);
+
+    return () => {
+      cancelAnimationFrame(frame);
+    };
+  });
+</script>
+
+<canvas
+  bind:this={canvas}
+  aria-hidden="true"
+  class="pointer-events-none absolute inset-0 z-20 h-full w-full"
+></canvas>

src/lib/components/diagnostics/DiagnosticsPanel.svelte

@@ -0,0 +1,416 @@
+<script lang="ts">
+  import Badge from '$lib/components/ui/badge/badge.svelte';
+  import Button from '$lib/components/ui/button/button.svelte';
+  import { launcherStream } from '$lib/global';
+  import { getReleaseStream, getVersion, isOsuCorrupted } from '$lib/osuUtil';
+  import { osuInstallationPath, patch } from '$lib/userSettings';
+  import { formatBytes } from '$lib/utils';
+  import {
+    AlertTriangle,
+    CheckCircle2,
+    ClipboardCopy,
+    Info,
+    LoaderCircle,
+    RefreshCw,
+    Wrench,
+    XCircle,
+  } from '@lucide/svelte';
+  import { invoke } from '@tauri-apps/api/core';
+  import { sileo } from 'sileo';
+  import { onMount } from 'svelte';
+
+  type InstallationDiagnostics = {
+    platform: string;
+    osVersion?: string;
+    osArch: string;
+    launcherVersion: string;
+    osuFolder: string;
+    resolvedFolder?: string;
+    osuWritable?: boolean;
+    patcherPath?: string;
+    patcherInstalled: boolean;
+    patcherFileCount: number;
+    patcherTotalSize: number;
+    hostNet8: boolean;
+    osuwinello: boolean;
+    wmctrl: boolean;
+    winePrefix?: string;
+    wineBinary?: string;
+    wineAppBundle?: string;
+    wineVersion?: string;
+    winePrefixArch?: string;
+    wineNet8?: boolean;
+    wineError?: string;
+    ffmpegStatus?: string;
+    logsDirectory: string;
+  };
+
+  type Check = {
+    label: string;
+    detail: string;
+    status: 'ok' | 'warning' | 'error' | 'info';
+  };
+
+  let { onRepair }: { onRepair?: () => void } = $props();
+
+  let checking = $state(true);
+  let checks = $state<Check[]>([]);
+  let lastChecked = $state<Date | undefined>(undefined);
+  let platformName = $state('');
+  let launcherVersionName = $state('');
+  let osVersion = $state('');
+  let osArch = $state('');
+  let logsDirectory = $state('');
+
+  const icons = {
+    ok: CheckCircle2,
+    warning: AlertTriangle,
+    error: XCircle,
+    info: Info,
+  };
+
+  const platformLabel = (platform: string) => {
+    switch (platform) {
+      case 'macos':
+        return 'macOS';
+      case 'windows':
+        return 'Windows';
+      case 'linux':
+        return 'Linux';
+      default:
+        return platform || 'unknown';
+    }
+  };
+
+  async function runChecks() {
+    checking = true;
+    checks = [];
+
+    try {
+      const folder = $osuInstallationPath;
+      const diagnostics = await invoke<InstallationDiagnostics>('installation_diagnostics', {
+        folder,
+      });
+      platformName = diagnostics.platform;
+      launcherVersionName = diagnostics.launcherVersion;
+      osVersion = diagnostics.osVersion ?? '';
+      osArch = diagnostics.osArch;
+      logsDirectory = diagnostics.logsDirectory;
+      const resolved = diagnostics.resolvedFolder;
+      // Only the experimental patcher build targets .NET 8.
+      const needsNet8 = $patch && $launcherStream === 'experimental';
+      const result: Check[] = [];
+
+      result.push({
+        label: 'Launcher',
+        detail: `${diagnostics.launcherVersion || 'unknown version'} · ${
+          diagnostics.osVersion || platformLabel(diagnostics.platform)
+        }${diagnostics.osArch ? ` (${diagnostics.osArch})` : ''}`,
+        status: 'ok',
+      });
+
+      if (!folder.trim()) {
+        result.push({
+          label: 'osu! installation',
+          detail: 'No installation path is configured. Run the setup wizard to pick osu!.',
+          status: 'error',
+        });
+      } else if (!resolved) {
+        result.push({
+          label: 'osu! installation',
+          detail: `The configured path could not be resolved: ${folder}`,
+          status: 'error',
+        });
+      } else {
+        result.push({
+          label: 'osu! installation',
+          detail: resolved,
+          status: 'ok',
+        });
+
+        try {
+          const [version, stream] = await Promise.all([
+            getVersion(resolved),
+            getReleaseStream(resolved),
+          ]);
+          result.push({
+            label: 'osu! version',
+            detail: `${stream ?? 'unknown stream'} · ${version || 'version unavailable'}`,
+            status: version ? 'ok' : 'warning',
+          });
+        } catch (error) {
+          result.push({
+            label: 'osu! version',
+            detail: error instanceof Error ? error.message : String(error),
+            status: 'warning',
+          });
+        }
+
+        try {
+          const corrupted = await isOsuCorrupted(resolved);
+          result.push({
+            label: 'Game files',
+            detail: corrupted
+              ? 'osu!.exe or a required file looks corrupted. Re-run the updater or setup.'
+              : 'The osu! executable passed the integrity check.',
+            status: corrupted ? 'error' : 'ok',
+          });
+        } catch (error) {
+          result.push({
+            label: 'Game files',
+            detail: error instanceof Error ? error.message : String(error),
+            status: 'warning',
+          });
+        }
+      }
+
+      if (typeof diagnostics.osuWritable === 'boolean') {
+        result.push({
+          label: 'osu! folder access',
+          detail: diagnostics.osuWritable
+            ? 'The launcher can write to this folder, so updates and patcher downloads can be installed.'
+            : 'The launcher cannot write to this folder. Updates and patcher downloads will fail; check folder permissions.',
+          status: diagnostics.osuWritable ? 'ok' : 'error',
+        });
+      }
+
+      const selectedStream = $launcherStream;
+      const effectiveStream = diagnostics.platform === 'windows' ? selectedStream : 'stable';
+      result.push({
+        label: 'Patcher stream',
+        detail:
+          diagnostics.platform === 'windows'
+            ? `${selectedStream} selected`
+            : `${effectiveStream} (selected: ${selectedStream}; macOS/Linux always use stable)`,
+        status: 'ok',
+      });
+
+      result.push({
+        label: 'Patcher',
+        detail: diagnostics.patcherInstalled
+          ? `${diagnostics.patcherFileCount} file${
+              diagnostics.patcherFileCount === 1 ? '' : 's'
+            }, ${formatBytes(diagnostics.patcherTotalSize)} · ${diagnostics.patcherPath}`
+          : 'Patcher files are not installed yet. They will be downloaded automatically the next time you launch osu!.',
+        status: diagnostics.patcherInstalled ? 'ok' : $patch ? 'warning' : 'info',
+      });
+
+      result.push({
+        label: 'Logs',
+        detail: diagnostics.logsDirectory || 'The logs folder is unavailable.',
+        status: diagnostics.logsDirectory ? 'ok' : 'warning',
+      });
+
+      if (diagnostics.platform === 'macos') {
+        if (diagnostics.wineError) {
+          result.push({
+            label: 'Wine wrapper',
+            detail: diagnostics.wineError,
+            status: 'error',
+          });
+        } else {
+          result.push({
+            label: 'Wine prefix',
+            detail: diagnostics.winePrefix || 'Wine prefix not detected.',
+            status: diagnostics.winePrefix ? 'ok' : 'error',
+          });
+          result.push({
+            label: 'Wine runtime',
+            detail: diagnostics.wineBinary || 'No Wine loader found inside the wrapper.',
+            status: diagnostics.wineBinary ? 'ok' : 'error',
+          });
+          result.push({
+            label: 'Wine version',
+            detail: diagnostics.wineVersion || 'Could not determine the Wine version.',
+            status: diagnostics.wineVersion ? 'ok' : 'warning',
+          });
+          if (diagnostics.winePrefixArch) {
+            result.push({
+              label: 'Wine prefix architecture',
+              detail:
+                diagnostics.winePrefixArch === 'win64'
+                  ? '64-bit (win64)'
+                  : diagnostics.winePrefixArch === 'win32'
+                    ? '32-bit (win32)'
+                    : diagnostics.winePrefixArch,
+              status: 'ok',
+            });
+          }
+          if (diagnostics.wineAppBundle) {
+            result.push({
+              label: 'App wrapper',
+              detail: diagnostics.wineAppBundle,
+              status: 'ok',
+            });
+          }
+          result.push({
+            label: '.NET 8 in prefix (experimental)',
+            detail:
+              diagnostics.wineNet8 === true
+                ? 'The Microsoft.WindowsDesktop.App 8 runtime was found.'
+                : 'The Windows .NET 8 Desktop Runtime was not found in this prefix. Only the experimental patcher stream needs it.',
+            status: diagnostics.wineNet8 === true ? 'ok' : needsNet8 ? 'error' : 'warning',
+          });
+          result.push({
+            label: 'FFmpeg (theme video)',
+            detail: diagnostics.ffmpegStatus
+              ? diagnostics.ffmpegStatus
+              : 'FFmpeg was not found. Large theme videos will stay on WebKit’s software decoder and may stutter.',
+            status: diagnostics.ffmpegStatus ? 'ok' : 'warning',
+          });
+        }
+      } else if (diagnostics.platform === 'linux') {
+        result.push({
+          label: 'osu-winello',
+          detail: diagnostics.osuwinello
+            ? 'osu-winello was found.'
+            : 'osu-winello was not found in PATH. Launching osu! may fail.',
+          status: diagnostics.osuwinello ? 'ok' : 'error',
+        });
+        result.push({
+          label: 'wmctrl',
+          detail: diagnostics.wmctrl
+            ? 'wmctrl is available for window detection.'
+            : 'wmctrl is missing. The patcher may not detect the osu! window.',
+          status: diagnostics.wmctrl ? 'ok' : $patch ? 'warning' : 'info',
+        });
+      } else {
+        result.push({
+          label: '.NET 8 Desktop Runtime (experimental)',
+          detail: diagnostics.hostNet8
+            ? 'Microsoft.WindowsDesktop.App 8 was found.'
+            : 'The .NET 8 Desktop Runtime was not found. Only the experimental patcher stream needs it.',
+          status: diagnostics.hostNet8 ? 'ok' : needsNet8 ? 'error' : 'warning',
+        });
+      }
+
+      checks = result;
+      lastChecked = new Date();
+    } catch (error) {
+      checks = [
+        {
+          label: 'Diagnostics',
+          detail: error instanceof Error ? error.message : String(error),
+          status: 'error',
+        },
+      ];
+    } finally {
+      checking = false;
+    }
+  }
+
+  async function copyReport() {
+    const body = checks
+      .map((check) => `[${check.status.toUpperCase()}] ${check.label}: ${check.detail}`)
+      .join('\n');
+    const report = [
+      'EZPPLauncher diagnostics',
+      `Generated: ${new Date().toISOString()}`,
+      `Launcher: ${launcherVersionName || 'unknown'}`,
+      `Platform: ${osVersion || platformLabel(platformName)}${osArch ? ` (${osArch})` : ''}`,
+      `Logs: ${logsDirectory || 'unknown'}`,
+      '',
+      body,
+    ].join('\n');
+
+    try {
+      await navigator.clipboard.writeText(report);
+      sileo.success({
+        title: 'Diagnostics copied',
+        description: 'Paste it into your support report.',
+      });
+    } catch {
+      sileo.error({ title: 'Could not copy diagnostics' });
+    }
+  }
+
+  onMount(runChecks);
+</script>
+
+<div class="divide-y divide-theme-800/50 border-t border-theme-800/50">
+  <div class="flex flex-wrap items-center justify-between gap-3 py-3">
+    <div class="min-w-0">
+      <p class="text-sm font-medium">System checks</p>
+      <p class="mt-0.5 text-xs leading-relaxed text-muted-foreground">
+        Inspect the selected osu! install, folder permissions, Wine wrapper, patcher, FFmpeg and
+        runtime dependencies.
+      </p>
+    </div>
+    <div class="flex shrink-0 flex-wrap items-center gap-1.5">
+      {#if lastChecked}
+        <span class="mr-1 text-[10px] text-muted-foreground">
+          {lastChecked.toLocaleTimeString()}
+        </span>
+      {/if}
+      <Button
+        variant="outline"
+        size="sm"
+        class="border-theme-800 bg-theme-950"
+        onclick={copyReport}
+      >
+        <ClipboardCopy class="size-4" />
+        Copy report
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        class="border-theme-800 bg-theme-950"
+        onclick={runChecks}
+        disabled={checking}
+      >
+        <RefreshCw class={checking ? 'size-4 animate-spin' : 'size-4'} />
+        Refresh
+      </Button>
+      {#if onRepair}
+        <Button variant="secondary" size="sm" onclick={onRepair}>
+          <Wrench class="size-4" />
+          Repair setup
+        </Button>
+      {/if}
+    </div>
+  </div>
+
+  <div class="space-y-2 py-3">
+    {#if checking}
+      <div class="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+        <LoaderCircle class="size-4 animate-spin" />
+        Checking your installation…
+      </div>
+    {:else}
+      {#each checks as check (check.label)}
+        {@const Icon = icons[check.status]}
+        <div
+          class="flex items-start gap-2.5 rounded-lg border border-theme-800/70 bg-theme-950/60 px-3 py-2"
+        >
+          <Icon
+            class="mt-0.5 size-4 shrink-0 {check.status === 'ok'
+              ? 'text-emerald-400'
+              : check.status === 'warning'
+                ? 'text-amber-300'
+                : check.status === 'error'
+                  ? 'text-destructive'
+                  : 'text-muted-foreground'}"
+          />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-center gap-2">
+              <p class="text-xs font-medium text-theme-100">{check.label}</p>
+              <Badge
+                variant={check.status === 'error'
+                  ? 'destructive'
+                  : check.status === 'warning'
+                    ? 'secondary'
+                    : 'outline'}
+                class="px-1.5 py-0 text-[9px] capitalize"
+              >
+                {check.status}
+              </Badge>
+            </div>
+            <p class="mt-0.5 break-words text-[10px] leading-relaxed text-muted-foreground">
+              {check.detail}
+            </p>
+          </div>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</div>

src/lib/components/logs/LogViewer.svelte

@@ -0,0 +1,337 @@
+<script lang="ts">
+  import Button from '$lib/components/ui/button/button.svelte';
+  import { Checkbox } from '$lib/components/ui/checkbox';
+  import Input from '$lib/components/ui/input/input.svelte';
+  import { openLogsFolder } from '$lib/osuUtil';
+  import { formatBytes } from '$lib/utils';
+  import {
+    AlertTriangle,
+    Copy,
+    FileText,
+    FolderOpen,
+    LoaderCircle,
+    RefreshCw,
+    Search,
+    Terminal,
+    X,
+  } from '@lucide/svelte';
+  import { invoke } from '@tauri-apps/api/core';
+  import { sileo } from 'sileo';
+  import { onMount } from 'svelte';
+
+  type LogBundleInfo = {
+    path: string;
+    name: string;
+    size: number;
+    modified: number;
+  };
+
+  type LogBundleEntry = {
+    name: string;
+    content: string;
+  };
+
+  let { onclose }: { onclose: () => void } = $props();
+
+  let bundles = $state<LogBundleInfo[]>([]);
+  let selectedPath = $state<string | undefined>(undefined);
+  let entries = $state<LogBundleEntry[]>([]);
+  let selectedLog = $state('launcher.log');
+  let query = $state('');
+  let errorsOnly = $state(false);
+  let loadingBundles = $state(true);
+  let loadingEntries = $state(false);
+  let errorMessage = $state('');
+
+  const selectedBundle = $derived(bundles.find((bundle) => bundle.path === selectedPath));
+  const activeEntry = $derived(entries.find((entry) => entry.name === selectedLog));
+  const allLines = $derived(activeEntry?.content.split(/\r?\n/) ?? []);
+  const filteredLines = $derived.by(() => {
+    const text = query.trim().toLowerCase();
+    return allLines.filter((line) => {
+      if (errorsOnly && !/(error|warn|panic|fatal|failed)/i.test(line)) return false;
+      return !text || line.toLowerCase().includes(text);
+    });
+  });
+  const visibleLines = $derived(filteredLines.slice(0, 5000));
+
+  async function loadBundles() {
+    loadingBundles = true;
+    errorMessage = '';
+    try {
+      bundles = await invoke<LogBundleInfo[]>('list_log_bundles');
+      if (bundles.length === 0) {
+        selectedPath = undefined;
+        entries = [];
+        return;
+      }
+
+      const stillThere = bundles.some((bundle) => bundle.path === selectedPath);
+      const next = stillThere ? selectedPath : bundles[0].path;
+      selectedPath = next;
+      await loadBundle(next!);
+    } catch (error) {
+      errorMessage = error instanceof Error ? error.message : String(error);
+    } finally {
+      loadingBundles = false;
+    }
+  }
+
+  async function loadBundle(path: string) {
+    selectedPath = path;
+    loadingEntries = true;
+    errorMessage = '';
+    try {
+      entries = await invoke<LogBundleEntry[]>('read_log_bundle', { path });
+      if (!entries.some((entry) => entry.name === selectedLog)) {
+        selectedLog = entries[0]?.name ?? 'launcher.log';
+      }
+    } catch (error) {
+      entries = [];
+      errorMessage = error instanceof Error ? error.message : String(error);
+    } finally {
+      loadingEntries = false;
+    }
+  }
+
+  async function refresh() {
+    await loadBundles();
+  }
+
+  async function copyVisible() {
+    const text = filteredLines.join('\n');
+    try {
+      await navigator.clipboard.writeText(text);
+      sileo.success({
+        title: 'Log lines copied',
+        description: `${filteredLines.length} lines from ${selectedLog}.`,
+      });
+    } catch {
+      sileo.error({ title: 'Could not copy the log' });
+    }
+  }
+
+  async function openFolder() {
+    try {
+      await openLogsFolder();
+    } catch (error) {
+      sileo.error({
+        title: 'Could not open the logs folder',
+        description: error instanceof Error ? error.message : String(error),
+      });
+    }
+  }
+
+  function lineClass(line: string) {
+    if (/(error|panic|fatal|failed)/i.test(line)) return 'text-red-300';
+    if (/(warn|deprecated|missing)/i.test(line)) return 'text-amber-200';
+    if (/(info|started|loaded|saved)/i.test(line)) return 'text-theme-200';
+    return 'text-theme-300';
+  }
+
+  onMount(loadBundles);
+</script>
+
+<svelte:window
+  onkeydown={(event) => {
+    if (event.key === 'Escape') onclose();
+  }}
+/>
+
+<div
+  class="fixed inset-0 z-50 flex items-center justify-center bg-black/75 p-5 backdrop-blur-sm"
+  role="presentation"
+>
+  <div
+    class="flex h-[82vh] w-full max-w-6xl flex-col overflow-hidden rounded-xl border border-theme-700 bg-theme-950 shadow-2xl"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="log-viewer-title"
+  >
+    <header class="flex shrink-0 items-center justify-between gap-3 border-b border-theme-800 p-3">
+      <div class="flex min-w-0 items-center gap-2">
+        <div class="flex size-8 items-center justify-center rounded-lg bg-primary/15 text-primary">
+          <Terminal class="size-4" />
+        </div>
+        <div class="min-w-0">
+          <h2 id="log-viewer-title" class="text-sm font-semibold">Log bundles</h2>
+          <p class="truncate text-[10px] text-muted-foreground">
+            Launcher, osu! and patcher output, grouped by session
+          </p>
+        </div>
+      </div>
+      <div class="flex shrink-0 items-center gap-1.5">
+        <Button
+          variant="outline"
+          size="sm"
+          class="border-theme-800 bg-theme-950"
+          onclick={openFolder}
+        >
+          <FolderOpen class="size-3.5" />
+          Folder
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          class="border-theme-800 bg-theme-950"
+          onclick={refresh}
+          disabled={loadingBundles}
+        >
+          <RefreshCw class={loadingBundles ? 'size-3.5 animate-spin' : 'size-3.5'} />
+          Refresh
+        </Button>
+        <Button variant="ghost" size="icon" class="size-8" title="Close logs" onclick={onclose}>
+          <X class="size-4" />
+        </Button>
+      </div>
+    </header>
+
+    <div class="grid min-h-0 flex-1 grid-cols-[230px_minmax(0,1fr)]">
+      <aside class="flex min-h-0 flex-col border-r border-theme-800 bg-black/20">
+        <div
+          class="flex shrink-0 items-center justify-between border-b border-theme-800 px-3 py-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground"
+        >
+          <span>Bundles</span>
+          <span>{bundles.length}</span>
+        </div>
+        <div class="min-h-0 flex-1 overflow-y-auto p-1.5">
+          {#if loadingBundles}
+            <div class="flex items-center gap-2 p-3 text-xs text-muted-foreground">
+              <LoaderCircle class="size-4 animate-spin" />
+              Loading…
+            </div>
+          {:else if bundles.length === 0}
+            <div class="p-3 text-[11px] leading-relaxed text-muted-foreground">
+              No bundles yet. Logs are zipped on the next launcher restart or when a log reaches 5
+              MiB.
+            </div>
+          {:else}
+            {#each bundles as bundle (bundle.path)}
+              <button
+                type="button"
+                class="mb-1 w-full rounded-md border px-2 py-2 text-left transition {bundle.path ===
+                selectedPath
+                  ? 'border-primary/40 bg-primary/10'
+                  : 'border-transparent hover:border-theme-800 hover:bg-theme-900/60'}"
+                onclick={() => loadBundle(bundle.path)}
+              >
+                <span class="flex items-center gap-1.5">
+                  <FileText class="size-3.5 shrink-0 text-primary" />
+                  <span class="truncate text-[11px] font-medium text-theme-100">
+                    {bundle.name}
+                  </span>
+                </span>
+                <span class="mt-1 block pl-5 text-[9px] text-muted-foreground">
+                  {new Date(bundle.modified).toLocaleString()} · {formatBytes(bundle.size)}
+                </span>
+              </button>
+            {/each}
+          {/if}
+        </div>
+      </aside>
+
+      <main class="flex min-h-0 min-w-0 flex-col">
+        {#if errorMessage}
+          <div
+            class="flex items-center gap-2 border-b border-destructive/30 bg-destructive/10 p-3 text-xs text-destructive"
+          >
+            <AlertTriangle class="size-4" />
+            {errorMessage}
+          </div>
+        {/if}
+
+        <div class="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-theme-800 p-2">
+          {#if entries.length > 0}
+            {#each entries as entry (entry.name)}
+              <Button
+                variant="ghost"
+                size="sm"
+                class="h-7 text-[10px] {selectedLog === entry.name
+                  ? 'bg-primary/15 text-primary'
+                  : 'text-muted-foreground'}"
+                onclick={() => (selectedLog = entry.name)}
+              >
+                {entry.name}
+              </Button>
+            {/each}
+          {/if}
+          <div class="relative ml-auto w-52">
+            <Search
+              class="pointer-events-none absolute left-2 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground"
+            />
+            <Input
+              class="h-7 border-theme-800 bg-theme-950 pl-7 text-[10px]"
+              placeholder="Filter lines…"
+              bind:value={query}
+            />
+          </div>
+          <div
+            class="flex items-center gap-1.5 rounded-md border border-theme-800 bg-theme-950 px-2 py-1"
+          >
+            <Checkbox id="log-errors-only" bind:checked={errorsOnly} />
+            <label for="log-errors-only" class="text-[10px] text-muted-foreground">
+              Errors only
+            </label>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            class="h-7 border-theme-800 bg-theme-950 text-[10px]"
+            onclick={copyVisible}
+            disabled={filteredLines.length === 0}
+          >
+            <Copy class="size-3" />
+            Copy
+          </Button>
+        </div>
+
+        <div class="min-h-0 flex-1 overflow-auto bg-black/25">
+          {#if loadingEntries}
+            <div
+              class="flex h-full items-center justify-center gap-2 text-xs text-muted-foreground"
+            >
+              <LoaderCircle class="size-4 animate-spin" />
+              Reading bundle…
+            </div>
+          {:else if !selectedBundle}
+            <div
+              class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted-foreground"
+            >
+              <Terminal class="size-8 opacity-40" />
+              <p class="text-xs">Choose a log bundle to inspect it.</p>
+            </div>
+          {:else if filteredLines.length === 0}
+            <div
+              class="flex h-full flex-col items-center justify-center gap-2 text-center text-muted-foreground"
+            >
+              <Search class="size-6 opacity-40" />
+              <p class="text-xs">No lines match this filter.</p>
+            </div>
+          {:else}
+            <div class="p-3 font-mono text-[10px] leading-relaxed">
+              {#each visibleLines as line, index (index)}
+                <div class="whitespace-pre-wrap break-words {lineClass(line)}">{line || ' '}</div>
+              {/each}
+              {#if filteredLines.length > visibleLines.length}
+                <p class="mt-2 text-amber-200">
+                  Showing the first {visibleLines.length} matching lines. Narrow the filter to see more.
+                </p>
+              {/if}
+            </div>
+          {/if}
+        </div>
+
+        <footer
+          class="flex shrink-0 items-center justify-between border-t border-theme-800 px-3 py-1.5 text-[9px] text-muted-foreground"
+        >
+          <span>{filteredLines.length} matching lines</span>
+          <span>
+            {selectedBundle
+              ? `${selectedBundle.name} · ${formatBytes(selectedBundle.size)}`
+              : 'No bundle selected'}
+          </span>
+        </footer>
+      </main>
+    </div>
+  </div>
+</div>

src/lib/components/theme/FontPreview.svelte

@@ -0,0 +1,88 @@
+<script module lang="ts">
+  let previewCount = 0;
+</script>
+
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  type Props = {
+    family: string;
+    src: string;
+    weight?: string;
+    style?: 'normal' | 'italic';
+    text?: string;
+    class?: string;
+  };
+
+  let {
+    family,
+    src,
+    weight = '400',
+    style = 'normal',
+    text = family,
+    class: className = '',
+  }: Props = $props();
+
+  let host = $state<HTMLSpanElement>();
+  let visible = $state(false);
+  let renderedFamily = $state<string>();
+  let face: FontFace | undefined;
+
+  onMount(() => {
+    if (!host) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        visible = true;
+        observer.disconnect();
+      },
+      { rootMargin: '180px 0px' }
+    );
+    observer.observe(host);
+    return () => observer.disconnect();
+  });
+
+  $effect(() => {
+    if (!visible || !src) return;
+    let cancelled = false;
+    const previewFamily = `EZPPSourcePreview_${previewCount++}`;
+
+    void (async () => {
+      try {
+        const candidate = new FontFace(previewFamily, `url("${src}")`, {
+          weight,
+          style,
+          display: 'swap',
+        });
+        const loaded = await candidate.load();
+        if (cancelled) return;
+        document.fonts.add(loaded);
+        face = loaded;
+        renderedFamily = previewFamily;
+      } catch {
+        // A preview failure should leave the row readable in the fallback font.
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (face && face.family === previewFamily) {
+        document.fonts.delete(face);
+        face = undefined;
+      }
+      if (renderedFamily === previewFamily) renderedFamily = undefined;
+    };
+  });
+</script>
+
+<span
+  bind:this={host}
+  class={className}
+  style:font-family={renderedFamily
+    ? `"${renderedFamily}", ui-sans-serif, system-ui, sans-serif`
+    : undefined}
+  style:font-weight={weight}
+  style:font-style={style}
+>
+  {text}
+</span>

src/lib/components/theme/ThemeElementInspector.svelte

@@ -0,0 +1,426 @@
+<script lang="ts">
+  import Button from '$lib/components/ui/button/button.svelte';
+  import { Checkbox } from '$lib/components/ui/checkbox';
+  import Input from '$lib/components/ui/input/input.svelte';
+  import Label from '$lib/components/ui/label/label.svelte';
+  import * as Select from '$lib/components/ui/select';
+  import Slider from '$lib/components/ui/slider/slider.svelte';
+  import Textarea from '$lib/components/ui/textarea/textarea.svelte';
+  import type { ThemeFontChoice } from '$lib/themeFonts';
+  import type { ThemeV2Element } from '$lib/themeV2';
+  import { Image as ImageIcon, RefreshCw, Type } from '@lucide/svelte';
+
+  let {
+    element,
+    fontOptions,
+    onreplace,
+  }: {
+    element: ThemeV2Element;
+    fontOptions: ThemeFontChoice[];
+    onreplace: (kind: 'image' | 'video') => void;
+  } = $props();
+
+  const field = 'h-8 border-theme-800 bg-theme-950 text-xs text-theme-50';
+  const label = 'text-[10px] font-medium uppercase tracking-wide text-muted-foreground';
+</script>
+
+<div class="space-y-4 p-4">
+  <div class="flex items-center gap-2 border-b border-theme-800 pb-3">
+    <div class="flex size-8 items-center justify-center rounded-md bg-primary/20 text-primary">
+      {#if element.type === 'text'}
+        <Type class="size-4" />
+      {:else}
+        <ImageIcon class="size-4" />
+      {/if}
+    </div>
+    <div class="min-w-0">
+      <p class="truncate text-xs font-semibold capitalize text-theme-50">{element.type} layer</p>
+      <p class="truncate font-mono text-[10px] text-muted-foreground">{element.id}</p>
+    </div>
+  </div>
+
+  <div class="space-y-1">
+    <Label for="element-name" class={label}>Layer name</Label>
+    <Input
+      id="element-name"
+      class={field}
+      value={element.name ?? ''}
+      placeholder="Optional label, for example Logo"
+      oninput={(event) => (element.name = (event.currentTarget as HTMLInputElement).value)}
+    />
+  </div>
+
+  <div class="grid grid-cols-2 gap-2">
+    <div class="space-y-1">
+      <Label for="element-x" class={label}>X</Label>
+      <Input id="element-x" class={field} type="number" step="1" bind:value={element.x} />
+    </div>
+    <div class="space-y-1">
+      <Label for="element-y" class={label}>Y</Label>
+      <Input id="element-y" class={field} type="number" step="1" bind:value={element.y} />
+    </div>
+    <div class="space-y-1">
+      <Label for="element-width" class={label}>Width</Label>
+      <Input
+        id="element-width"
+        class={field}
+        type="number"
+        min="24"
+        max="1000"
+        bind:value={element.width}
+      />
+    </div>
+    <div class="space-y-1">
+      <Label for="element-height" class={label}>Height</Label>
+      <Input
+        id="element-height"
+        class={field}
+        type="number"
+        min="24"
+        max="650"
+        bind:value={element.height}
+      />
+    </div>
+    <div class="space-y-1">
+      <Label for="element-rotation" class={label}>Rotation</Label>
+      <Input
+        id="element-rotation"
+        class={field}
+        type="number"
+        min="-360"
+        max="360"
+        bind:value={element.rotation}
+      />
+    </div>
+    <div class="space-y-1">
+      <div class="flex items-center justify-between">
+        <Label class={label}>Opacity</Label>
+        <span class="text-[10px] text-muted-foreground"
+          >{Math.round((element.opacity ?? 1) * 100)}%</span
+        >
+      </div>
+      <Slider
+        min={0}
+        max={1}
+        step={0.01}
+        value={element.opacity ?? 1}
+        onValueChange={(value) => (element.opacity = value)}
+      />
+    </div>
+  </div>
+
+  <div class="grid grid-cols-2 gap-2 border-t border-theme-800 pt-3">
+    <div class="flex items-center gap-2 rounded-md border border-theme-800 bg-black/20 px-2 py-1.5">
+      <Checkbox
+        id="element-hidden"
+        checked={element.hidden === true}
+        onCheckedChange={(checked) => (element.hidden = checked === true)}
+      />
+      <Label for="element-hidden" class="text-[10px] font-normal text-muted-foreground">
+        Hidden
+      </Label>
+    </div>
+    <div class="flex items-center gap-2 rounded-md border border-theme-800 bg-black/20 px-2 py-1.5">
+      <Checkbox
+        id="element-locked"
+        checked={element.locked === true}
+        onCheckedChange={(checked) => (element.locked = checked === true)}
+      />
+      <Label for="element-locked" class="text-[10px] font-normal text-muted-foreground">
+        Locked
+      </Label>
+    </div>
+  </div>
+
+  {#if element.type === 'text'}
+    <div class="space-y-3 border-t border-theme-800 pt-3">
+      <div class="space-y-1">
+        <Label for="element-text" class={label}>Text</Label>
+        <Textarea
+          id="element-text"
+          class="min-h-20 resize-y border-theme-800 bg-theme-950 text-xs normal-case tracking-normal text-theme-50"
+          bind:value={element.text}
+        />
+      </div>
+      <div class="space-y-1">
+        <Label for="element-font" class={label}>Font</Label>
+        <Select.Root
+          type="single"
+          value={element.fontFamily ?? 'Sora Variable'}
+          onValueChange={(value) => {
+            if (value) element.fontFamily = value;
+          }}
+        >
+          <Select.Trigger
+            id="element-font"
+            class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+          >
+            {element.fontFamily ?? 'Sora Variable'}
+          </Select.Trigger>
+          <Select.Content class="border-theme-800 bg-theme-950">
+            {#each fontOptions as font (font.family)}
+              <Select.Item value={font.family} label={`${font.label} · ${font.category}`} />
+            {/each}
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div class="grid grid-cols-2 gap-2">
+        <div class="space-y-1">
+          <Label for="element-font-size" class={label}>Size</Label>
+          <Input
+            id="element-font-size"
+            class={field}
+            type="number"
+            min="6"
+            max="240"
+            bind:value={element.fontSize}
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="element-font-weight" class={label}>Weight</Label>
+          <Select.Root
+            type="single"
+            value={String(element.fontWeight ?? 400)}
+            onValueChange={(value) => {
+              if (value) element.fontWeight = Number(value);
+            }}
+          >
+            <Select.Trigger
+              id="element-font-weight"
+              class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+            >
+              {element.fontWeight ?? 400}
+            </Select.Trigger>
+            <Select.Content class="border-theme-800 bg-theme-950">
+              {#each [100, 200, 300, 400, 500, 600, 700, 800, 900] as weight (weight)}
+                <Select.Item value={String(weight)} label={String(weight)} />
+              {/each}
+            </Select.Content>
+          </Select.Root>
+        </div>
+        <div class="space-y-1">
+          <Label for="element-align" class={label}>Align</Label>
+          <Select.Root
+            type="single"
+            value={element.align ?? 'left'}
+            onValueChange={(value) => {
+              if (value) element.align = value as 'left' | 'center' | 'right';
+            }}
+          >
+            <Select.Trigger
+              id="element-align"
+              class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+            >
+              {element.align ?? 'left'}
+            </Select.Trigger>
+            <Select.Content class="border-theme-800 bg-theme-950">
+              <Select.Item value="left" label="Left" />
+              <Select.Item value="center" label="Center" />
+              <Select.Item value="right" label="Right" />
+            </Select.Content>
+          </Select.Root>
+        </div>
+        <div class="space-y-1">
+          <Label for="element-vertical-align" class={label}>Vertical</Label>
+          <Select.Root
+            type="single"
+            value={element.verticalAlign ?? 'top'}
+            onValueChange={(value) => {
+              if (value) element.verticalAlign = value as 'top' | 'center' | 'bottom';
+            }}
+          >
+            <Select.Trigger
+              id="element-vertical-align"
+              class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+            >
+              {element.verticalAlign ?? 'top'}
+            </Select.Trigger>
+            <Select.Content class="border-theme-800 bg-theme-950">
+              <Select.Item value="top" label="Top" />
+              <Select.Item value="center" label="Middle" />
+              <Select.Item value="bottom" label="Bottom" />
+            </Select.Content>
+          </Select.Root>
+        </div>
+        <div class="space-y-1">
+          <Label for="element-line-height" class={label}>Line height</Label>
+          <Input
+            id="element-line-height"
+            class={field}
+            type="number"
+            min="0.7"
+            max="3"
+            step="0.05"
+            bind:value={element.lineHeight}
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="element-letter-spacing" class={label}>Spacing</Label>
+          <Input
+            id="element-letter-spacing"
+            class={field}
+            type="number"
+            min="-20"
+            max="40"
+            step="0.5"
+            bind:value={element.letterSpacing}
+          />
+        </div>
+      </div>
+      <div class="space-y-1">
+        <Label for="element-color" class={label}>Color</Label>
+        <div class="flex items-center gap-2">
+          <Input
+            class="h-8 w-10 shrink-0 cursor-pointer border-theme-800 bg-theme-950 p-0.5"
+            type="color"
+            bind:value={element.color}
+          />
+          <Input id="element-color" class="{field} flex-1 font-mono" bind:value={element.color} />
+        </div>
+      </div>
+    </div>
+  {:else if element.type === 'image' || element.type === 'video'}
+    <div class="space-y-3 border-t border-theme-800 pt-3">
+      <div class="rounded-md border border-theme-800 bg-black/20 p-2">
+        <p class="text-[10px] uppercase tracking-wide text-muted-foreground">Asset</p>
+        <p class="mt-1 truncate font-mono text-[10px] text-theme-100">{element.src}</p>
+      </div>
+      <Button
+        variant="secondary"
+        class="h-8 w-full gap-2 text-xs"
+        onclick={() => onreplace(element.type as 'image' | 'video')}
+      >
+        <RefreshCw class="size-3.5" />
+        Replace {element.type}
+      </Button>
+      <div class="grid grid-cols-2 gap-2">
+        <div class="space-y-1">
+          <Label for="element-fit" class={label}>Fit</Label>
+          <Select.Root
+            type="single"
+            value={element.fit ?? 'cover'}
+            onValueChange={(value) => {
+              if (value) element.fit = value as 'cover' | 'contain';
+            }}
+          >
+            <Select.Trigger
+              id="element-fit"
+              class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+            >
+              {element.fit ?? 'cover'}
+            </Select.Trigger>
+            <Select.Content class="border-theme-800 bg-theme-950">
+              <Select.Item value="cover" label="Cover" />
+              <Select.Item value="contain" label="Contain" />
+            </Select.Content>
+          </Select.Root>
+        </div>
+        <div class="space-y-1">
+          <Label for="element-radius" class={label}>Radius</Label>
+          <Input
+            id="element-radius"
+            class={field}
+            type="number"
+            min="0"
+            max="999"
+            bind:value={element.radius}
+          />
+        </div>
+      </div>
+      {#if element.type === 'video'}
+        <div class="flex items-start gap-2 rounded-md border border-theme-800 bg-black/20 p-2">
+          <Checkbox
+            id="element-muted"
+            class="mt-0.5"
+            checked={element.muted !== false}
+            onCheckedChange={(checked) => {
+              element.muted = checked === true;
+            }}
+          />
+          <div class="space-y-0.5">
+            <Label for="element-muted" class="text-[10px] font-normal text-theme-100">
+              Mute video
+            </Label>
+            <p class="text-[10px] leading-relaxed text-muted-foreground">
+              Unmuted videos may wait for a click before they start, because of autoplay policies.
+            </p>
+          </div>
+        </div>
+        <p class="text-[10px] leading-relaxed text-muted-foreground">
+          Videos autoplay and loop. WebM keeps theme packages small; MP4 also works.
+        </p>
+      {/if}
+    </div>
+  {:else}
+    <div class="space-y-3 border-t border-theme-800 pt-3">
+      <div class="space-y-1">
+        <Label for="element-shape" class={label}>Shape</Label>
+        <Select.Root
+          type="single"
+          value={element.shape}
+          onValueChange={(value) => {
+            if (value) element.shape = value as 'rectangle' | 'ellipse' | 'line';
+          }}
+        >
+          <Select.Trigger
+            id="element-shape"
+            class="h-8 border-theme-800 bg-theme-950 text-xs text-theme-50"
+          >
+            {element.shape}
+          </Select.Trigger>
+          <Select.Content class="border-theme-800 bg-theme-950">
+            <Select.Item value="rectangle" label="Rectangle" />
+            <Select.Item value="ellipse" label="Ellipse" />
+            <Select.Item value="line" label="Line" />
+          </Select.Content>
+        </Select.Root>
+      </div>
+      <div class="space-y-1">
+        <Label for="element-fill" class={label}>Fill</Label>
+        <div class="flex items-center gap-2">
+          <Input
+            class="h-8 w-10 shrink-0 cursor-pointer border-theme-800 bg-theme-950 p-0.5"
+            type="color"
+            bind:value={element.fill}
+          />
+          <Input id="element-fill" class="{field} flex-1 font-mono" bind:value={element.fill} />
+        </div>
+      </div>
+      {#if element.shape !== 'ellipse'}
+        <div class="space-y-1">
+          <Label for="element-shape-radius" class={label}>Corner radius</Label>
+          <Input
+            id="element-shape-radius"
+            class={field}
+            type="number"
+            min="0"
+            max="999"
+            bind:value={element.radius}
+          />
+        </div>
+      {/if}
+      <div class="grid grid-cols-2 gap-2">
+        <div class="space-y-1">
+          <Label for="element-border-width" class={label}>Border</Label>
+          <Input
+            id="element-border-width"
+            class={field}
+            type="number"
+            min="0"
+            max="40"
+            bind:value={element.borderWidth}
+          />
+        </div>
+        <div class="space-y-1">
+          <Label for="element-border-color" class={label}>Border color</Label>
+          <Input
+            id="element-border-color"
+            class="h-8 w-full cursor-pointer border-theme-800 bg-theme-950 p-0.5"
+            type="color"
+            bind:value={element.borderColor}
+          />
+        </div>
+      </div>
+    </div>
+  {/if}
+</div>

src/lib/components/theme/ThemeStage.svelte

@@ -0,0 +1,199 @@
+<script lang="ts">
+  import Logo from '$assets/logo.png';
+  import ThemeV2Background from '$lib/components/theme/ThemeV2Background.svelte';
+  import ThemeV2Elements from '$lib/components/theme/ThemeV2Elements.svelte';
+  import { fontStack } from '$lib/themeFonts';
+  import { readableTextColor, themeFontFaceCss, type ThemeV2Definition } from '$lib/themeV2';
+  import { Brush, House, Music, Paintbrush, Play, Settings, User, Wifi } from '@lucide/svelte';
+
+  let {
+    definition,
+    assets = '',
+    assetOverrides = {},
+    selectedIds = [],
+    interactive = false,
+    scale = 1,
+    onselect,
+    onselectmany,
+    onmove,
+    onpatch,
+    oncontext,
+  }: {
+    definition: ThemeV2Definition;
+    assets?: string;
+    assetOverrides?: Record<string, string>;
+    selectedIds?: string[];
+    interactive?: boolean;
+    scale?: number;
+    onselect?: (id: string | undefined, additive?: boolean) => void;
+    onselectmany?: (ids: string[], additive?: boolean) => void;
+    onmove?: (updates: { id: string; x: number; y: number }[]) => void;
+    onpatch?: (id: string, patch: Record<string, unknown>) => void;
+    oncontext?: (id: string | undefined, event: MouseEvent) => void;
+  } = $props();
+
+  const bodyFont = $derived(definition.typography?.body);
+  const headingFont = $derived(definition.typography?.heading);
+  const accent = $derived(definition.accentColor?.trim() || '#ff006e');
+  const accentText = $derived(readableTextColor(accent));
+  const stageStyle = $derived(
+    [
+      `font-family:${fontStack(bodyFont)}`,
+      `--primary:${accent}`,
+      `--primary-foreground:${accentText}`,
+      `--ring:${accent}`,
+      `--color-primary:${accent}`,
+      `--color-primary-foreground:${accentText}`,
+      `--color-primary-500:${accent}`,
+      `--color-ring:${accent}`,
+    ].join(';')
+  );
+  const fontFaces = $derived(themeFontFaceCss(definition, assets, assetOverrides));
+  const elements = $derived(definition.elements ?? []);
+</script>
+
+<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+{@html `<style>${fontFaces}</style>`}
+
+<div
+  class="theme-stage relative h-[650px] w-[1000px] overflow-hidden bg-theme-950 text-theme-50"
+  style={stageStyle}
+  role="presentation"
+>
+  <ThemeV2Background {definition} {assets} {assetOverrides} preview />
+
+  <div class="relative z-10 grid h-full grid-cols-[0.085fr_1fr]">
+    <aside
+      class="flex flex-col items-center gap-2 border-r border-theme-900 bg-black/40 p-3 backdrop-blur-sm"
+    >
+      <div class="rounded-[1.1rem] bg-primary/30 p-1.5 ring-1 ring-inset ring-white/15">
+        <img class="pointer-events-none size-[43px]" src={Logo} alt="" draggable="false" />
+      </div>
+      <span
+        class="rounded-full bg-primary px-2 py-0 text-[8px] font-semibold text-primary-foreground"
+      >
+        3.2.7
+      </span>
+      <div
+        class="mt-3 flex size-12 items-center justify-center rounded-[0.85rem] bg-primary/50 p-3 ring-1 ring-inset ring-white/15"
+      >
+        <House class="size-5 text-theme-200" />
+      </div>
+      <div
+        class="mt-3 flex size-12 items-center justify-center rounded-[0.85rem] border border-black/20 bg-black/20 p-3 ring-1 ring-inset ring-white/15"
+      >
+        <Paintbrush class="size-5 text-theme-200" />
+      </div>
+      <div
+        class="mt-3 flex size-12 items-center justify-center rounded-[0.85rem] border border-black/20 bg-black/20 p-3 ring-1 ring-inset ring-white/15"
+      >
+        <Settings class="size-5 text-theme-200" />
+      </div>
+      <div
+        class="mt-auto flex size-10 items-center justify-center overflow-hidden rounded-full bg-theme-900"
+      >
+        <User class="size-5 text-muted-foreground" />
+      </div>
+    </aside>
+
+    <section class="relative flex min-w-0 flex-col">
+      <div class="flex min-h-0 flex-1 flex-col">
+        <div class="mt-12 mb-auto flex flex-col px-6">
+          <span
+            class="text-4xl font-bold drop-shadow-lg"
+            style="font-family:{fontStack(headingFont, bodyFont)}"
+          >
+            EZPPLauncher
+          </span>
+          <span class="font-semibold text-muted-foreground drop-shadow-lg">Hello Guest!</span>
+        </div>
+
+        <div class="relative h-50 shrink-0">
+          <div
+            class="absolute left-0 top-0 m-1 flex h-48 w-72 flex-col items-center justify-center gap-3 rounded-md bg-black/40 p-3 ring-1 ring-inset ring-white/5 backdrop-blur-sm"
+          >
+            <div class="flex flex-col items-center gap-1 text-center">
+              <span class="text-sm font-semibold text-theme-50">See your stats here</span>
+              <span class="text-xs text-muted-foreground">
+                Log in with your EZPPFarm account to track your rank, PP, accuracy and playcount.
+              </span>
+            </div>
+            <div class="flex w-full flex-col gap-2">
+              <div
+                class="flex h-7 w-full items-center justify-center rounded-md bg-primary text-xs font-medium text-primary-foreground"
+              >
+                Log In
+              </div>
+              <div
+                class="flex h-7 w-full items-center justify-center rounded-md border border-theme-800 text-xs font-medium text-muted-foreground"
+              >
+                Register
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="relative z-10 flex items-center justify-between border-t border-t-theme-900 bg-black/40 px-8 py-4 backdrop-blur-sm"
+      >
+        <div class="flex items-center gap-4">
+          <div class="flex items-center gap-2">
+            <Music class="size-3.5 text-blue-400" />
+            <span class="text-[11px] font-medium text-white/70">1.2k</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <Brush class="size-3.5 text-amber-400" />
+            <span class="text-[11px] font-medium text-white/70">42</span>
+          </div>
+          <div class="flex items-center gap-2">
+            <Wifi class="size-3.5 text-emerald-400" />
+            <span class="text-[11px] font-medium text-white/70">19ms</span>
+          </div>
+          <div class="h-4 w-px bg-white/10"></div>
+          <span
+            class="rounded-full border border-white/6 bg-white/10 px-2 py-0.5 text-[10px] text-white/50"
+          >
+            stable
+          </span>
+          <span
+            class="rounded-full border border-white/6 bg-white/10 px-2 py-0.5 font-mono text-[10px] text-white/50"
+          >
+            20260101.0
+          </span>
+          <span
+            class="rounded-full border border-primary/20 bg-primary/20 px-2 py-0.5 text-[10px] text-primary"
+          >
+            Default skin
+          </span>
+        </div>
+        <div class="flex h-12 items-center rounded-full bg-primary shadow-lg shadow-primary/25">
+          <div class="relative flex size-12 shrink-0 items-center justify-center">
+            <div
+              class="relative z-10 flex size-9 items-center justify-center rounded-full bg-black/30"
+            >
+              <Play class="ml-0.5 size-4 fill-current text-primary-foreground" />
+            </div>
+          </div>
+          <div class="w-52 pl-1 pr-6 text-center">
+            <p class="text-sm font-bold leading-tight text-primary-foreground">Launch</p>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+
+  <ThemeV2Elements
+    {elements}
+    {assets}
+    {assetOverrides}
+    {interactive}
+    {selectedIds}
+    {scale}
+    {onselect}
+    {onselectmany}
+    {onmove}
+    {onpatch}
+    {oncontext}
+  />
+</div>

src/lib/components/theme/ThemeV2Background.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+  import { custom_theme_volume } from '$lib/global';
+  import { themeMediaSource, themeVideoLifecycle } from '$lib/themeMedia';
+  import type { ThemeV2Definition } from '$lib/themeV2';
+  import { themeAssetUrl } from '$lib/themeV2';
+  import { reduceAnimations } from '$lib/userSettings';
+  import { trackMediaContainer } from '$lib/utils';
+
+  let {
+    definition,
+    assets = '',
+    assetOverrides = {},
+    preview = false,
+  }: {
+    definition: ThemeV2Definition;
+    assets?: string;
+    assetOverrides?: Record<string, string>;
+    preview?: boolean;
+  } = $props();
+
+  let audioElement = $state<HTMLAudioElement | undefined>(undefined);
+
+  const assetUrl = (path: string | undefined) => {
+    if (!path) return '';
+    return assetOverrides[path] ?? themeAssetUrl(assets, path);
+  };
+
+  const background = $derived(definition.background);
+  const overlay = $derived(definition.overlay);
+  const effects = $derived(definition.effects);
+
+  const random = (seed: number) => {
+    const value = Math.sin(seed * 12.9898) * 43758.5453;
+    return value - Math.floor(value);
+  };
+
+  const particles = $derived.by(() => {
+    if ($reduceAnimations) return [];
+    if (!effects || effects.type === 'none') return [];
+
+    const count = Math.min(120, Math.max(0, Math.round(effects.density ?? 30)));
+    const speed = Math.max(0.2, effects.speed ?? 1);
+    return Array.from({ length: count }, (_, index) => {
+      const value = (offset: number) => random(index + 1 + offset);
+      const isStar = effects.type === 'stars';
+      const size = isStar ? 1 + value(1) * 2.5 : 4 + value(1) * 7;
+      const duration = (isStar ? 2 + value(2) * 3 : 9 + value(2) * 11) / speed;
+      return {
+        id: index,
+        left: value(3) * 100,
+        top: isStar ? value(4) * 100 : value(4) * 15,
+        size,
+        duration,
+        delay: value(5) * duration,
+        drift: -90 + value(6) * 180,
+        opacity: 0.25 + value(7) * 0.65,
+        rotate: value(8) * 360,
+      };
+    });
+  });
+
+  function trackMedia(node: HTMLElement) {
+    if (preview) return {};
+    return trackMediaContainer(node);
+  }
+
+  // `muted` is not reliably reflected after load, so keep the live property in
+  // sync when the theme toggles it in the editor.
+  function applyMuted(node: HTMLVideoElement, muted: boolean) {
+    node.muted = muted;
+    return {
+      update(value: boolean) {
+        node.muted = value;
+      },
+    };
+  }
+
+  $effect(() => {
+    if (!audioElement || !definition.audio) return;
+    audioElement.volume = $custom_theme_volume;
+    if (!preview) {
+      audioElement.play().catch(() => {
+        // Autoplay can be rejected until the window has been interacted with.
+      });
+    }
+  });
+</script>
+
+<div class="theme-v2 absolute inset-0 overflow-hidden" use:trackMedia>
+  {#if background.type === 'color'}
+    <div
+      class="absolute inset-0"
+      style="background-color:{background.color};opacity:{background.opacity ?? 1}"
+    ></div>
+  {:else if background.type === 'gradient'}
+    <div
+      class="absolute inset-0"
+      style="background-image:linear-gradient({background.angle ??
+        135}deg, {background.from}, {background.to});opacity:{background.opacity ?? 1}"
+    ></div>
+  {:else if background.type === 'image'}
+    {#if background.src}
+      <img
+        class="absolute inset-0 h-full w-full"
+        src={assetUrl(background.src)}
+        alt=""
+        aria-hidden="true"
+        style="object-fit:{background.fit ?? 'cover'};opacity:{background.opacity ??
+          1};filter:{background.blur
+          ? `blur(${background.blur}px)`
+          : 'none'};transform:{background.blur ? 'scale(1.05)' : 'none'};"
+      />
+    {/if}
+  {:else if background.type === 'video'}
+    {#if background.src}
+      <video
+        class="absolute inset-0 h-full w-full object-cover"
+        use:themeMediaSource={assetUrl(background.src)}
+        use:themeVideoLifecycle
+        autoplay
+        loop
+        muted={background.muted !== false}
+        use:applyMuted={background.muted !== false}
+        playsinline
+        disablepictureinpicture
+        style="object-fit:{background.fit ?? 'cover'};opacity:{background.opacity ??
+          1};filter:{background.blur
+          ? `blur(${background.blur}px)`
+          : 'none'};transform:{background.blur ? 'scale(1.05)' : 'none'};"
+      ></video>
+    {/if}
+  {/if}
+
+  {#if overlay && (overlay.opacity ?? 0) > 0}
+    <div
+      class="absolute inset-0 pointer-events-none"
+      style="background-color:{overlay.color ?? '#000000'};opacity:{overlay.opacity ?? 0}"
+    ></div>
+  {/if}
+
+  {#if overlay && (overlay.vignette ?? 0) > 0}
+    <div
+      class="vignette absolute inset-0 pointer-events-none"
+      style="opacity:{overlay.vignette ?? 0}"
+    ></div>
+  {/if}
+
+  {#if effects && effects.type !== 'none'}
+    <div class="pointer-events-none absolute inset-0 overflow-hidden" aria-hidden="true">
+      {#each particles as particle (particle.id)}
+        <span
+          class="particle {effects.type}"
+          style="left:{particle.left}%;top:{particle.top}%;width:{particle.size}px;height:{particle.size}px;opacity:{particle.opacity};--particle-color:{effects.color ??
+            '#ffffff'};--particle-drift:{particle.drift}px;--particle-duration:{particle.duration}s;--particle-delay:-{particle.delay}s;--particle-rotate:{particle.rotate}deg;animation-duration:{particle.duration}s;animation-delay:-{particle.delay}s;"
+        ></span>
+      {/each}
+    </div>
+  {/if}
+
+  {#if definition.audio && !preview}
+    <audio
+      bind:this={audioElement}
+      use:themeMediaSource={assetUrl(definition.audio.src)}
+      loop={definition.audio.loop !== false}
+      autoplay
+    ></audio>
+  {/if}
+</div>
+
+<style lang="scss">
+  .vignette {
+    background: radial-gradient(ellipse at center, transparent 38%, rgba(0, 0, 0, 0.92) 100%);
+  }
+
+  .particle {
+    position: absolute;
+    display: block;
+    background: var(--particle-color);
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    will-change: transform, opacity;
+
+    &.snow {
+      border-radius: 9999px;
+      filter: blur(0.5px);
+      animation-name: v2-snow;
+    }
+
+    &.petals {
+      border-radius: 70% 0 70% 0;
+      animation-name: v2-petals;
+    }
+
+    &.bubbles {
+      border-radius: 9999px;
+      border: 1px solid var(--particle-color);
+      background: color-mix(in srgb, var(--particle-color) 16%, transparent);
+      animation-name: v2-bubbles;
+    }
+
+    &.stars {
+      border-radius: 9999px;
+      box-shadow: 0 0 6px var(--particle-color);
+      animation-name: v2-stars;
+      animation-timing-function: ease-in-out;
+    }
+  }
+
+  @keyframes v2-snow {
+    from {
+      transform: translate3d(0, -12vh, 0);
+    }
+    to {
+      transform: translate3d(var(--particle-drift), 112vh, 0);
+    }
+  }
+
+  @keyframes v2-petals {
+    from {
+      transform: translate3d(0, -12vh, 0) rotate(var(--particle-rotate));
+    }
+    50% {
+      transform: translate3d(calc(var(--particle-drift) * 0.55), 50vh, 0)
+        rotate(calc(var(--particle-rotate) + 180deg));
+    }
+    to {
+      transform: translate3d(var(--particle-drift), 112vh, 0)
+        rotate(calc(var(--particle-rotate) + 360deg));
+    }
+  }
+
+  @keyframes v2-bubbles {
+    from {
+      transform: translate3d(0, 110vh, 0);
+    }
+    to {
+      transform: translate3d(var(--particle-drift), -12vh, 0);
+    }
+  }
+
+  @keyframes v2-stars {
+    0%,
+    100% {
+      opacity: 0.15;
+      transform: scale(0.8);
+    }
+    50% {
+      opacity: 1;
+      transform: scale(1.2);
+    }
+  }
+</style>

src/lib/components/theme/ThemeV2Elements.svelte

@@ -0,0 +1,497 @@
+<script lang="ts">
+  import { fontStack } from '$lib/themeFonts';
+  import { themeMediaSource, themeVideoLifecycle } from '$lib/themeMedia';
+  import { themeAssetUrl, type ThemeV2Element } from '$lib/themeV2';
+
+  let {
+    elements = [],
+    assets = '',
+    assetOverrides = {},
+    interactive = false,
+    selectedIds = [],
+    scale = 1,
+    onselect,
+    onselectmany,
+    onmove,
+    onpatch,
+    oncontext,
+  }: {
+    elements?: ThemeV2Element[];
+    assets?: string;
+    assetOverrides?: Record<string, string>;
+    interactive?: boolean;
+    selectedIds?: string[];
+    scale?: number;
+    onselect?: (id: string | undefined, additive?: boolean) => void;
+    onselectmany?: (ids: string[], additive?: boolean) => void;
+    onmove?: (updates: { id: string; x: number; y: number }[]) => void;
+    onpatch?: (id: string, patch: Record<string, unknown>) => void;
+    oncontext?: (id: string | undefined, event: MouseEvent) => void;
+  } = $props();
+
+  const assetUrl = (path: string) => assetOverrides[path] ?? themeAssetUrl(assets, path);
+  const visibleElements = $derived(elements.filter((element) => !element.hidden));
+
+  // Keep the live muted property in sync, including live editor toggles.
+  function applyMuted(node: HTMLVideoElement, muted: boolean) {
+    node.muted = muted;
+    return {
+      update(value: boolean) {
+        node.muted = value;
+      },
+    };
+  }
+
+  type ElementOrigin = {
+    id: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+
+  type DragState = {
+    ids: string[];
+    startX: number;
+    startY: number;
+    origins: ElementOrigin[];
+  };
+
+  type ResizeDirection = 'nw' | 'ne' | 'sw' | 'se';
+
+  type ResizeState = {
+    id: string;
+    direction: ResizeDirection;
+    startX: number;
+    startY: number;
+    originX: number;
+    originY: number;
+    originWidth: number;
+    originHeight: number;
+  };
+
+  type MarqueeState = {
+    startX: number;
+    startY: number;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    additive: boolean;
+  };
+
+  const resizeDirections: ResizeDirection[] = ['nw', 'ne', 'sw', 'se'];
+  const SNAP_DISTANCE = 6;
+
+  let overlay = $state<HTMLDivElement | undefined>(undefined);
+  let drag = $state<DragState | null>(null);
+  let resize = $state<ResizeState | null>(null);
+  let marquee = $state<MarqueeState | null>(null);
+  let snapGuides = $state<{ x?: number; y?: number }>({});
+
+  const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
+
+  const selectedSet = $derived(new Set(selectedIds));
+
+  const isSelected = (id: string) => interactive && selectedSet.has(id);
+
+  const modifierPressed = (event: PointerEvent | KeyboardEvent) =>
+    event.shiftKey || event.metaKey || event.ctrlKey;
+
+  function selectElement(id: string | undefined, additive = false) {
+    onselect?.(id, additive);
+  }
+
+  function beginDrag(event: PointerEvent, element: ThemeV2Element) {
+    if (!interactive || event.button !== 0) return;
+    if ((event.target as HTMLElement).dataset.resize) return;
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    const additive = modifierPressed(event);
+    if (additive) {
+      selectElement(element.id, true);
+      return;
+    }
+
+    if (element.locked) {
+      selectElement(element.id, false);
+      return;
+    }
+
+    const keepGroup = selectedSet.has(element.id) && selectedIds.length > 1;
+    if (!keepGroup) selectElement(element.id, false);
+
+    const candidateIds = keepGroup ? [...selectedIds] : [element.id];
+    const origins = candidateIds
+      .map((id) => elements.find((candidate) => candidate.id === id))
+      .filter(
+        (candidate): candidate is ThemeV2Element => candidate !== undefined && !candidate.locked
+      )
+      .map((candidate) => ({
+        id: candidate.id,
+        x: candidate.x,
+        y: candidate.y,
+        width: candidate.width,
+        height: candidate.height,
+      }));
+
+    if (origins.length === 0) return;
+
+    drag = {
+      ids: origins.map((origin) => origin.id),
+      startX: event.clientX,
+      startY: event.clientY,
+      origins,
+    };
+    snapGuides = {};
+    window.addEventListener('pointermove', moveDrag);
+    window.addEventListener('pointerup', endDrag, { once: true });
+  }
+
+  function groupBounds(origins: ElementOrigin[]) {
+    const left = Math.min(...origins.map((origin) => origin.x));
+    const top = Math.min(...origins.map((origin) => origin.y));
+    const right = Math.max(...origins.map((origin) => origin.x + origin.width));
+    const bottom = Math.max(...origins.map((origin) => origin.y + origin.height));
+    return { left, top, right, bottom, centerX: (left + right) / 2, centerY: (top + bottom) / 2 };
+  }
+
+  function closestSnap(
+    lines: number[],
+    candidates: number[]
+  ): { delta: number; guide: number } | undefined {
+    let best: { delta: number; guide: number } | undefined;
+
+    for (const line of lines) {
+      for (const candidate of candidates) {
+        const delta = candidate - line;
+        if (Math.abs(delta) > SNAP_DISTANCE) continue;
+        if (!best || Math.abs(delta) < Math.abs(best.delta)) {
+          best = { delta, guide: candidate };
+        }
+      }
+    }
+
+    return best;
+  }
+
+  function moveDrag(event: PointerEvent) {
+    if (!drag) return;
+
+    const bounds = groupBounds(drag.origins);
+    const rawDx = (event.clientX - drag.startX) / scale;
+    const rawDy = (event.clientY - drag.startY) / scale;
+    let dx = clamp(rawDx, -bounds.left, 1000 - bounds.right);
+    let dy = clamp(rawDy, -bounds.top, 650 - bounds.bottom);
+
+    if (!event.altKey) {
+      const others = visibleElements.filter((element) => !drag!.ids.includes(element.id));
+      const xCandidates = [
+        0,
+        500,
+        1000,
+        ...others.flatMap((element) => [
+          element.x,
+          element.x + element.width / 2,
+          element.x + element.width,
+        ]),
+      ];
+      const yCandidates = [
+        0,
+        325,
+        650,
+        ...others.flatMap((element) => [
+          element.y,
+          element.y + element.height / 2,
+          element.y + element.height,
+        ]),
+      ];
+
+      const xSnap = closestSnap(
+        [bounds.left + dx, bounds.centerX + dx, bounds.right + dx],
+        xCandidates
+      );
+      const ySnap = closestSnap(
+        [bounds.top + dy, bounds.centerY + dy, bounds.bottom + dy],
+        yCandidates
+      );
+
+      if (xSnap) dx += xSnap.delta;
+      if (ySnap) dy += ySnap.delta;
+      snapGuides = { x: xSnap?.guide, y: ySnap?.guide };
+    } else {
+      snapGuides = {};
+    }
+
+    dx = clamp(dx, -bounds.left, 1000 - bounds.right);
+    dy = clamp(dy, -bounds.top, 650 - bounds.bottom);
+
+    onmove?.(
+      drag.origins.map((origin) => ({
+        id: origin.id,
+        x: Math.round(clamp(origin.x + dx, 0, 1000 - origin.width)),
+        y: Math.round(clamp(origin.y + dy, 0, 650 - origin.height)),
+      }))
+    );
+  }
+
+  function endDrag() {
+    drag = null;
+    snapGuides = {};
+    window.removeEventListener('pointermove', moveDrag);
+  }
+
+  function beginResize(event: PointerEvent, element: ThemeV2Element, direction: ResizeDirection) {
+    if (!interactive || element.locked) return;
+    event.preventDefault();
+    event.stopPropagation();
+    resize = {
+      id: element.id,
+      direction,
+      startX: event.clientX,
+      startY: event.clientY,
+      originX: element.x,
+      originY: element.y,
+      originWidth: element.width,
+      originHeight: element.height,
+    };
+    window.addEventListener('pointermove', moveResize);
+    window.addEventListener('pointerup', endResize, { once: true });
+  }
+
+  function moveResize(event: PointerEvent) {
+    if (!resize) return;
+    const dx = (event.clientX - resize.startX) / scale;
+    const dy = (event.clientY - resize.startY) / scale;
+    const west = resize.direction.includes('w');
+    const north = resize.direction.includes('n');
+    const width = Math.round(clamp(resize.originWidth + (west ? -dx : dx), 24, 1000));
+    const height = Math.round(clamp(resize.originHeight + (north ? -dy : dy), 24, 650));
+    onpatch?.(resize.id, {
+      x: west
+        ? Math.round(clamp(resize.originX + resize.originWidth - width, 0, 1000 - width))
+        : resize.originX,
+      y: north
+        ? Math.round(clamp(resize.originY + resize.originHeight - height, 0, 650 - height))
+        : resize.originY,
+      width,
+      height,
+    });
+  }
+
+  function endResize() {
+    resize = null;
+    window.removeEventListener('pointermove', moveResize);
+  }
+
+  function beginMarquee(event: PointerEvent) {
+    if (!interactive || event.button !== 0 || event.target !== event.currentTarget || !overlay) {
+      return;
+    }
+
+    const rect = overlay.getBoundingClientRect();
+    const startX = clamp((event.clientX - rect.left) / scale, 0, 1000);
+    const startY = clamp((event.clientY - rect.top) / scale, 0, 650);
+    const additive = modifierPressed(event);
+
+    if (!additive) onselectmany?.([], false);
+
+    marquee = { startX, startY, x: startX, y: startY, width: 0, height: 0, additive };
+    window.addEventListener('pointermove', moveMarquee);
+    window.addEventListener('pointerup', endMarquee, { once: true });
+  }
+
+  function moveMarquee(event: PointerEvent) {
+    if (!marquee || !overlay) return;
+    const rect = overlay.getBoundingClientRect();
+    const currentX = clamp((event.clientX - rect.left) / scale, 0, 1000);
+    const currentY = clamp((event.clientY - rect.top) / scale, 0, 650);
+
+    marquee = {
+      ...marquee,
+      x: Math.min(marquee.startX, currentX),
+      y: Math.min(marquee.startY, currentY),
+      width: Math.abs(currentX - marquee.startX),
+      height: Math.abs(currentY - marquee.startY),
+    };
+  }
+
+  function endMarquee() {
+    if (!marquee) return;
+    const selection = marquee;
+    marquee = null;
+    window.removeEventListener('pointermove', moveMarquee);
+
+    if (selection.width < 3 && selection.height < 3) {
+      return;
+    }
+
+    const hits = visibleElements
+      .filter(
+        (element) =>
+          !element.locked &&
+          element.x < selection.x + selection.width &&
+          element.x + element.width > selection.x &&
+          element.y < selection.y + selection.height &&
+          element.y + element.height > selection.y
+      )
+      .map((element) => element.id);
+
+    onselectmany?.(hits, selection.additive);
+  }
+</script>
+
+<div
+  bind:this={overlay}
+  class="absolute inset-0 z-20 {interactive ? 'pointer-events-auto' : 'pointer-events-none'}"
+  role="presentation"
+  onpointerdown={beginMarquee}
+  oncontextmenu={(event) => {
+    if (!interactive || event.target !== event.currentTarget) return;
+    // The surrounding bits-ui ContextMenu.Trigger opens on the bubbling
+    // contextmenu event and prevents the native menu itself. Calling
+    // preventDefault() here makes the trigger treat the event as handled
+    // (it bails when defaultPrevented is set), leaving no menu at all.
+    oncontext?.(undefined, event);
+  }}
+>
+  {#each visibleElements as element (element.id)}
+    {@const selected = isSelected(element.id)}
+    {@const singleSelected = selected && selectedIds.length === 1}
+    <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+    <div
+      class="absolute select-none"
+      class:cursor-move={interactive && !element.locked}
+      class:cursor-default={interactive && element.locked}
+      style="left:{element.x}px;top:{element.y}px;width:{element.width}px;height:{element.height}px;transform:rotate({element.rotation ??
+        0}deg);touch-action:none;outline:{selected
+        ? `${selectedIds.length > 1 ? 1 : 2}px solid #ff006e`
+        : 'none'};outline-offset:2px;"
+      role={interactive ? 'button' : undefined}
+      tabindex={interactive ? 0 : -1}
+      aria-label={interactive ? `Select ${element.type} layer` : undefined}
+      onpointerdown={(event) => beginDrag(event, element)}
+      oncontextmenu={(event) => {
+        if (!interactive) return;
+        // Let the event bubble so the editor's ContextMenu.Trigger can open.
+        oncontext?.(element.id, event);
+      }}
+      onkeydown={(event) => {
+        if (interactive && (event.key === 'Enter' || event.key === ' ')) {
+          event.preventDefault();
+          selectElement(element.id, modifierPressed(event));
+        }
+      }}
+    >
+      <!-- Opacity lives on the content wrapper so selection chrome stays fully opaque. -->
+      <div class="h-full w-full" style="opacity:{element.opacity ?? 1};">
+        {#if element.type === 'text'}
+          <div
+            class="h-full w-full overflow-hidden"
+            style="display:flex;align-items:{element.verticalAlign === 'center'
+              ? 'center'
+              : element.verticalAlign === 'bottom'
+                ? 'flex-end'
+                : 'flex-start'};justify-content:{element.align === 'center'
+              ? 'center'
+              : element.align === 'right'
+                ? 'flex-end'
+                : 'flex-start'};text-align:{element.align ?? 'left'};"
+          >
+            <span
+              style="font-family:{fontStack(element.fontFamily)};font-size:{element.fontSize ??
+                28}px;font-weight:{element.fontWeight ?? 600};color:{element.color ??
+                '#ffffff'};line-height:{element.lineHeight ??
+                1.2};letter-spacing:{element.letterSpacing ??
+                0}px;white-space:pre-wrap;overflow-wrap:anywhere;"
+            >
+              {element.text}
+            </span>
+          </div>
+        {:else if element.type === 'image'}
+          <img
+            class="pointer-events-none h-full w-full"
+            src={assetUrl(element.src)}
+            alt=""
+            draggable="false"
+            style="object-fit:{element.fit ?? 'cover'};border-radius:{element.radius ?? 0}px;"
+          />
+        {:else if element.type === 'video'}
+          <video
+            class="pointer-events-none h-full w-full"
+            use:themeMediaSource={assetUrl(element.src)}
+            use:themeVideoLifecycle
+            autoplay
+            loop
+            muted={element.muted !== false}
+            use:applyMuted={element.muted !== false}
+            playsinline
+            disablepictureinpicture
+            aria-hidden="true"
+            style="object-fit:{element.fit ?? 'cover'};border-radius:{element.radius ?? 0}px;"
+          ></video>
+        {:else}
+          <div
+            class="h-full w-full"
+            style="background:{element.fill ?? '#ff006e'};border-radius:{element.shape === 'ellipse'
+              ? '50%'
+              : `${element.radius ?? 16}px`};border:{element.borderWidth
+              ? `${element.borderWidth}px solid ${element.borderColor ?? '#ffffff'}`
+              : 'none'};"
+          ></div>
+        {/if}
+      </div>
+
+      {#if singleSelected && !element.locked}
+        {#each resizeDirections as direction (direction)}
+          <span
+            class="absolute z-10 block size-3 rounded-full border-2 border-white bg-primary shadow"
+            data-resize={direction}
+            style="{direction.includes('n') ? 'top:-7px' : 'bottom:-7px'};{direction.includes('w')
+              ? 'left:-7px'
+              : 'right:-7px'};cursor:{direction === 'nw' || direction === 'se'
+              ? 'nwse-resize'
+              : 'nesw-resize'};"
+            onpointerdown={(event) => beginResize(event, element, direction)}
+            role="presentation"
+          ></span>
+        {/each}
+        <span
+          class="absolute -top-7 left-0 rounded bg-primary px-1.5 py-0.5 text-[10px] font-semibold text-primary-foreground shadow"
+        >
+          {element.type}
+        </span>
+      {/if}
+
+      {#if selected && selectedIds.length > 1}
+        <span
+          class="absolute -top-5 left-0 rounded bg-primary/90 px-1 py-0.5 text-[8px] font-semibold text-primary-foreground"
+        >
+          selected
+        </span>
+      {/if}
+    </div>
+  {/each}
+
+  {#if snapGuides.x !== undefined}
+    <div
+      class="pointer-events-none absolute inset-y-0 z-30 w-px bg-primary/80"
+      style="left:{snapGuides.x}px"
+    ></div>
+  {/if}
+  {#if snapGuides.y !== undefined}
+    <div
+      class="pointer-events-none absolute inset-x-0 z-30 h-px bg-primary/80"
+      style="top:{snapGuides.y}px"
+    ></div>
+  {/if}
+
+  {#if marquee}
+    <div
+      class="pointer-events-none absolute z-30 border border-primary bg-primary/10"
+      style="left:{marquee.x}px;top:{marquee.y}px;width:{marquee.width}px;height:{marquee.height}px;"
+    ></div>
+  {/if}
+</div>

src/lib/components/ui/alert-dialog/alert-dialog-action.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { buttonVariants } from '$lib/components/ui/button/index.js';
   import { cn } from '$lib/utils.js';
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-cancel.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { buttonVariants } from '$lib/components/ui/button/index.js';
   import { cn } from '$lib/utils.js';
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
-  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
   import { cn } from '$lib/utils.js';
+  import AlertDialogOverlay from './alert-dialog-overlay.svelte';
+  import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { cn } from '$lib/utils.js';
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
+  import { cn } from '$lib/utils.js';
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/alert-dialog/index.ts

@@ -1,12 +1,12 @@
-import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
-import Title from './alert-dialog-title.svelte';
 import Action from './alert-dialog-action.svelte';
 import Cancel from './alert-dialog-cancel.svelte';
+import Content from './alert-dialog-content.svelte';
+import Description from './alert-dialog-description.svelte';
 import Footer from './alert-dialog-footer.svelte';
 import Header from './alert-dialog-header.svelte';
 import Overlay from './alert-dialog-overlay.svelte';
-import Content from './alert-dialog-content.svelte';
-import Description from './alert-dialog-description.svelte';
+import Title from './alert-dialog-title.svelte';
+import { AlertDialog as AlertDialogPrimitive } from 'bits-ui';
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;

src/lib/components/ui/animated-bg/AnimatedBg.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { reduceAnimations } from '$lib/userSettings';
+
+  //TODO: maybe dynamic background images fetched from ezpp?
+
+  const COUNT = 60;
+
+  function rand(min: number, max: number) {
+    return Math.random() * (max - min) + min;
+  }
+
+  const streaks = Array.from({ length: COUNT })
+    .map((_, i) => {
+      const depth = rand(0, 2);
+
+      const scale = 0.6 + depth * 0.8;
+      const speed = 0.4 + depth * 1.35;
+
+      const distance = 150;
+      const duration = distance / speed;
+
+      return {
+        width: rand(300, 320) * scale,
+        height: 32 * scale,
+        x: (i / COUNT) * 200 - 50,
+        y: ((i * 137.5) % 100) - 20,
+        opacity: 0.25 + depth * 0.65,
+        duration,
+        delay: rand(0, duration),
+        scale,
+      };
+    })
+    .sort((a, b) => a.scale - b.scale);
+</script>
+
+<div class="absolute bg blur-[2px]">
+  <div
+    class="relative h-full w-full from-0% to-90% bg-gradient-to-b from-transparent to-black z-50"
+  ></div>
+  {#each streaks as s, index (index)}
+    <div
+      class="streak drop-shadow-lg transition-opacity duration-1000"
+      style="
+        width:{s.width}px;
+        height:{s.height}px;
+        left:{s.x}%;
+        top:{s.y}%;
+        opacity:{$reduceAnimations ? 0 : s.opacity};
+        animation-duration:{s.duration}s;
+        animation-delay:-{s.delay}s;
+      "
+    ></div>
+  {/each}
+</div>
+
+<style>
+  .bg {
+    position: fixed;
+    inset: 0;
+    overflow: hidden;
+    background: linear-gradient(
+      180deg,
+      var(--color-primary-300) 0%,
+      var(--color-primary-600) 40%,
+      var(--color-primary-900) 100%
+    );
+  }
+
+  .streak {
+    position: absolute;
+    background: #d6f3ff;
+    border-radius: 999px;
+    transform: rotate(-35deg);
+    animation: move linear infinite;
+    will-change: transform;
+  }
+
+  @keyframes move {
+    from {
+      transform: translate(-150vw, 150vh) rotate(-35deg);
+    }
+    to {
+      transform: translate(150vw, -150vh) rotate(-35deg);
+    }
+  }
+</style>

src/lib/components/ui/avatar/avatar-fallback.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/avatar/avatar-image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/avatar/avatar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { Avatar as AvatarPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { Avatar as AvatarPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/avatar/index.ts

@@ -1,6 +1,6 @@
-import Root from './avatar.svelte';
-import Image from './avatar-image.svelte';
 import Fallback from './avatar-fallback.svelte';
+import Image from './avatar-image.svelte';
+import Root from './avatar.svelte';
 
 export {
   Root,

src/lib/components/ui/background/background.svelte

@@ -1,10 +0,0 @@
-<script lang="ts">
-  const prop: { beatmapId: number } = $props();
-</script>
-
-<div class="absolute w-screen h-screen overflow-hidden pointer-events-none rounded">
-  <div
-    style="background: url(https://osu.direct/api/media/background/{prop.beatmapId})"
-    class="absolute top-0 left-0 w-full h-full !bg-cover -z-10 pointer-events-none blur opacity-10 rounded"
-  ></div>
-</div>

src/lib/components/ui/badge/badge.svelte

@@ -22,9 +22,9 @@
 </script>
 
 <script lang="ts">
+  import { cn } from '$lib/utils.js';
   import type { WithElementRef } from 'bits-ui';
   import type { HTMLAnchorAttributes } from 'svelte/elements';
-  import { cn } from '$lib/utils.js';
 
   let {
     ref = $bindable(null),
@@ -42,7 +42,7 @@
   this={href ? 'a' : 'span'}
   bind:this={ref}
   {href}
-  class={cn(badgeVariants({ variant, className }))}
+  class={cn(badgeVariants({ variant }), className)}
   {...restProps}
 >
   {@render children?.()}

src/lib/components/ui/button/button.svelte

@@ -53,13 +53,15 @@
 </script>
 
 {#if href}
-  <a bind:this={ref} class={cn(buttonVariants({ variant, size, className }))} {href} {...restProps}>
+  <!-- href is a pass-through prop and may point to an external URL -->
+  <!-- eslint-disable-next-line svelte/no-navigation-without-resolve -->
+  <a bind:this={ref} class={cn(buttonVariants({ variant, size }), className)} {href} {...restProps}>
     {@render children?.()}
   </a>
 {:else}
   <button
     bind:this={ref}
-    class={cn(buttonVariants({ variant, size, className }))}
+    class={cn(buttonVariants({ variant, size }), className)}
     {type}
     {...restProps}
   >

src/lib/components/ui/checkbox/checkbox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
+  import { cn } from '$lib/utils.js';
   import Check from '@lucide/svelte/icons/check';
   import Minus from '@lucide/svelte/icons/minus';
-  import { cn } from '$lib/utils.js';
+  import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/checkbox/index.ts

@@ -1,4 +1,5 @@
 import Root from './checkbox.svelte';
+
 export {
   Root,
   //

src/lib/components/ui/context-menu/context-menu-checkbox-item.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    checked = $bindable(false),
+    indeterminate = $bindable(false),
+    class: className,
+    inset,
+    children: childrenProp,
+    closeOnSelect = false,
+    ...restProps
+  }: WithoutChildrenOrChild<ContextMenuPrimitive.CheckboxItemProps> & {
+    inset?: boolean;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.CheckboxItem
+  bind:ref
+  {closeOnSelect}
+  bind:checked
+  bind:indeterminate
+  data-slot="context-menu-checkbox-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.()}
+  {/snippet}
+</ContextMenuPrimitive.CheckboxItem>

src/lib/components/ui/context-menu/context-menu-content.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import type { WithoutChildrenOrChild } from '$lib/utils.js';
+  import ContextMenuPortal from './context-menu-portal.svelte';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    portalProps,
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+  } = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+  <ContextMenuPrimitive.Content
+    bind:ref
+    data-slot="context-menu-content"
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--bits-context-menu-content-available-height) origin-(--bits-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto',
+      className
+    )}
+    {...restProps}
+  />
+</ContextMenuPortal>

src/lib/components/ui/context-menu/context-menu-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    ...restProps
+  }: ContextMenuPrimitive.GroupHeadingProps & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.GroupHeading
+  bind:ref
+  data-slot="context-menu-group-heading"
+  data-inset={inset}
+  class={cn('text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7', className)}
+  {...restProps}
+/>

src/lib/components/ui/context-menu/context-menu-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ref = $bindable(null), ...restProps }: ContextMenuPrimitive.GroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.Group bind:ref data-slot="context-menu-group" {...restProps} />

src/lib/components/ui/context-menu/context-menu-item.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    variant = 'default',
+    ...restProps
+  }: ContextMenuPrimitive.ItemProps & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.Item
+  bind:ref
+  data-slot="context-menu-item"
+  data-inset={inset}
+  data-variant={variant}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+/>

src/lib/components/ui/context-menu/context-menu-label.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="context-menu-label"
+  data-inset={inset}
+  class={cn('text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

src/lib/components/ui/context-menu/context-menu-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { ...restProps }: ContextMenuPrimitive.PortalProps = $props();
+</script>
+
+<ContextMenuPrimitive.Portal {...restProps} />

src/lib/components/ui/context-menu/context-menu-radio-group.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    ...restProps
+  }: ContextMenuPrimitive.RadioGroupProps = $props();
+</script>
+
+<ContextMenuPrimitive.RadioGroup
+  bind:ref
+  bind:value
+  data-slot="context-menu-radio-group"
+  {...restProps}
+/>

src/lib/components/ui/context-menu/context-menu-radio-item.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { cn, type WithoutChild } from '$lib/utils.js';
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children: childrenProp,
+    closeOnSelect = false,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.RadioItemProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.RadioItem
+  bind:ref
+  {closeOnSelect}
+  data-slot="context-menu-radio-item"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ checked })}
+    <span class="absolute right-2 pointer-events-none">
+      {#if checked}
+        <CheckIcon />
+      {/if}
+    </span>
+    {@render childrenProp?.({ checked })}
+  {/snippet}
+</ContextMenuPrimitive.RadioItem>

src/lib/components/ui/context-menu/context-menu-separator.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.SeparatorProps = $props();
+</script>
+
+<ContextMenuPrimitive.Separator
+  bind:ref
+  data-slot="context-menu-separator"
+  class={cn('bg-border -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>

src/lib/components/ui/context-menu/context-menu-shortcut.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '$lib/utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="context-menu-shortcut"
+  class={cn(
+    'text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

src/lib/components/ui/context-menu/context-menu-sub-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';
+  import ContextMenuPortal from './context-menu-portal.svelte';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    align = 'start',
+    alignOffset = -3,
+    portalProps,
+    ...restProps
+  }: ContextMenuPrimitive.SubContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof ContextMenuPortal>>;
+  } = $props();
+</script>
+
+<ContextMenuPortal {...portalProps}>
+  <ContextMenuPrimitive.SubContent
+    bind:ref
+    data-slot="context-menu-sub-content"
+    {align}
+    {alignOffset}
+    class={cn(
+      'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 z-50 origin-(--bits-context-menu-content-transform-origin) overflow-hidden',
+      className
+    )}
+    {...restProps}
+  />
+</ContextMenuPortal>

src/lib/components/ui/context-menu/context-menu-sub-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { cn, type WithoutChild } from '$lib/utils.js';
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    inset,
+    children,
+    ...restProps
+  }: WithoutChild<ContextMenuPrimitive.SubTriggerProps> & {
+    inset?: boolean;
+  } = $props();
+</script>
+
+<ContextMenuPrimitive.SubTrigger
+  bind:ref
+  data-slot="context-menu-sub-trigger"
+  data-inset={inset}
+  class={cn(
+    "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronRightIcon class="cn-rtl-flip ml-auto" />
+</ContextMenuPrimitive.SubTrigger>

src/lib/components/ui/context-menu/context-menu-sub.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.SubProps = $props();
+</script>
+
+<ContextMenuPrimitive.Sub bind:open {...restProps} />

src/lib/components/ui/context-menu/context-menu-trigger.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { cn } from '$lib/utils.js';
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: ContextMenuPrimitive.TriggerProps = $props();
+</script>
+
+<ContextMenuPrimitive.Trigger
+  bind:ref
+  data-slot="context-menu-trigger"
+  class={cn('select-none', className)}
+  {...restProps}
+/>

src/lib/components/ui/context-menu/context-menu.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+  let { open = $bindable(false), ...restProps }: ContextMenuPrimitive.RootProps = $props();
+</script>
+
+<ContextMenuPrimitive.Root bind:open {...restProps} />

src/lib/components/ui/context-menu/index.ts

@@ -0,0 +1,52 @@
+import CheckboxItem from './context-menu-checkbox-item.svelte';
+import Content from './context-menu-content.svelte';
+import GroupHeading from './context-menu-group-heading.svelte';
+import Group from './context-menu-group.svelte';
+import Item from './context-menu-item.svelte';
+import Label from './context-menu-label.svelte';
+import Portal from './context-menu-portal.svelte';
+import RadioGroup from './context-menu-radio-group.svelte';
+import RadioItem from './context-menu-radio-item.svelte';
+import Separator from './context-menu-separator.svelte';
+import Shortcut from './context-menu-shortcut.svelte';
+import SubContent from './context-menu-sub-content.svelte';
+import SubTrigger from './context-menu-sub-trigger.svelte';
+import Sub from './context-menu-sub.svelte';
+import Trigger from './context-menu-trigger.svelte';
+import Root from './context-menu.svelte';
+
+export {
+  Root,
+  Sub,
+  Portal,
+  Item,
+  GroupHeading,
+  Label,
+  Group,
+  Trigger,
+  Content,
+  Shortcut,
+  Separator,
+  RadioItem,
+  SubContent,
+  SubTrigger,
+  RadioGroup,
+  CheckboxItem,
+  //
+  Root as ContextMenu,
+  Sub as ContextMenuSub,
+  Portal as ContextMenuPortal,
+  Item as ContextMenuItem,
+  GroupHeading as ContextMenuGroupHeading,
+  Group as ContextMenuGroup,
+  Content as ContextMenuContent,
+  Trigger as ContextMenuTrigger,
+  Shortcut as ContextMenuShortcut,
+  RadioItem as ContextMenuRadioItem,
+  Separator as ContextMenuSeparator,
+  RadioGroup as ContextMenuRadioGroup,
+  SubContent as ContextMenuSubContent,
+  SubTrigger as ContextMenuSubTrigger,
+  CheckboxItem as ContextMenuCheckboxItem,
+  Label as ContextMenuLabel,
+};

src/lib/components/ui/download-button/DownloadButton.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import Ellipsis from '@lucide/svelte/icons/ellipsis';
+  import Play from '@lucide/svelte/icons/play';
+
+  const prop: {
+    downloading: boolean;
+    progress: number;
+    text: string;
+    subtext?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+  } = $props();
+
+  const radius = 16;
+  const circumference = 2 * Math.PI * radius;
+  const strokeDashoffset = $derived(circumference - (prop.progress / 100) * circumference);
+</script>
+
+<button
+  class="group flex items-center h-12 rounded-full bg-primary disabled:bg-primary/70 shadow-lg shadow-primary/25 transition-all not-disabled:hover:shadow-primary/40 not-disabled:hover:brightness-110 not-disabled:active:scale-[0.98] cursor-pointer w-fit"
+  disabled={prop.disabled}
+  onclick={prop.onClick}
+>
+  <div class="relative size-12 shrink-0 flex items-center justify-center">
+    {#if prop.downloading}
+      {#if prop.progress === -1}
+        <svg class="absolute inset-0 animate-spin" viewBox="0 0 48 48">
+          <circle class="stroke-black/10" cx="24" cy="24" r={radius} fill="none" stroke-width="3" />
+          <circle
+            class="stroke-pink-950"
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray={circumference}
+            stroke-dashoffset={circumference * 0.7}
+          />
+        </svg>
+      {:else}
+        <svg class="absolute inset-0 -rotate-90" viewBox="0 0 48 48">
+          <circle
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke="rgba(0,0,0,0.2)"
+            stroke-width="3"
+          />
+          <circle
+            cx="24"
+            cy="24"
+            r={radius}
+            fill="none"
+            stroke="rgba(0,0,0,0.7)"
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray={circumference}
+            stroke-dashoffset={strokeDashoffset}
+            class="transition-[stroke-dashoffset] duration-100"
+          />
+        </svg>
+      {/if}
+    {/if}
+    <div class="size-9 rounded-full bg-black/30 flex items-center justify-center relative z-10">
+      {#if prop.downloading}
+        {#if prop.progress === -1}
+          <Ellipsis class="size-4 text-primary-foreground fill-current animate-pulse" />
+        {:else}
+          <span class="text-[10px] font-bold text-primary-foreground">
+            {prop.progress.toFixed()}
+          </span>
+        {/if}
+      {:else}
+        <Play class="size-4 text-primary-foreground fill-current ml-0.5" />
+      {/if}
+    </div>
+  </div>
+
+  <div class="pr-6 pl-1 text-center w-52">
+    <p class="text-sm font-bold text-primary-foreground leading-tight">
+      {prop.text}
+    </p>
+    {#if prop.subtext}
+      <p class="text-[10px] text-primary-foreground/70 leading-tight">
+        {prop.subtext}
+      </p>
+    {/if}
+  </div>
+</button>

src/lib/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
-  import Check from 'lucide-svelte/icons/check';
-  import Minus from 'lucide-svelte/icons/minus';
   import { cn } from '$lib/utils.js';
+  import Check from '@lucide/svelte/icons/check';
+  import Minus from '@lucide/svelte/icons/minus';
+  import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
   import type { Snippet } from 'svelte';
 
   let {

src/lib/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
   import { cn } from '$lib/utils.js';
+  import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
 
   let {
     ref = $bindable(null),

src/lib/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -15,7 +15,7 @@
 <DropdownMenuPrimitive.Item
   bind:ref
   class={cn(
-    'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+    'data-[highlighted]:bg-primary data-[highlighted]:text-primary-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
     inset && 'pl-8',
     className
   )}