diff --git a/.changes/config.toml b/.changes/config.toml
index dbce913..8a7034d 100644
--- a/.changes/config.toml
+++ b/.changes/config.toml
@@ -20,6 +20,11 @@ resolver = "rust"
 version-mode = { pre-release.tag = "alpha" }
 assets = ["artifacts/**/*"]
 
+[packages.dropout-macros]
+path = "crates/macros"
+resolver = "rust"
+version-mode = { pre-release.tag = "alpha" }
+
 [resolver.rust.pre-check]
 url = "https://crates.io/api/v1/crates/{{ package.name }}/{{ package.version }}"
 
diff --git a/.changes/dropout-macros.md b/.changes/dropout-macros.md
new file mode 100644
index 0000000..faa4e3e
--- /dev/null
+++ b/.changes/dropout-macros.md
@@ -0,0 +1,5 @@
+---
+dropout-macros: "patch:feat"
+---
+
+Add `dropout-macros` crate to generate tauri api wrappers automatically.
diff --git a/.changes/ts-bindings.md b/.changes/ts-bindings.md
new file mode 100644
index 0000000..01be1b1
--- /dev/null
+++ b/.changes/ts-bindings.md
@@ -0,0 +1,5 @@
+---
+dropout: "patch:feat"
+---
+
+Add `ts-rs` for generating TypeScript bindings.
diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 1713952..8d5e056 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -8,7 +8,7 @@ repos:
     rev: v6.0.0
     hooks:
       - id: check-json
-        exclude: ^packages/ui/tsconfig.*\.json$
+        exclude: ^packages/ui(-new)?/tsconfig.*\.json$
       - id: check-toml
       - id: check-yaml
       - id: check-case-conflict
diff --git a/Cargo.toml b/Cargo.toml
index 1a8ac7a..dedc4f1 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,5 +1,5 @@
 [workspace]
-members = ["src-tauri"]
+members = ["src-tauri", "crates/*"]
 resolver = "3"
 
 [profile.dev]
diff --git a/biome.json b/biome.json
index eb43210..79b8928 100644
--- a/biome.json
+++ b/biome.json
@@ -31,5 +31,10 @@
         "organizeImports": "on"
       }
     }
+  },
+  "css": {
+    "parser": {
+      "tailwindDirectives": true
+    }
   }
 }
diff --git a/crates/macros/Cargo.toml b/crates/macros/Cargo.toml
new file mode 100644
index 0000000..cd5b4a6
--- /dev/null
+++ b/crates/macros/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "dropout-macros"
+version = "0.1.0"
+edition = "2021"
+description = "Proc-macro crate providing #[dropout::api] for generating Tauri TypeScript bindings"
+license = "MIT OR Apache-2.0"
+publish = false
+
+[lib]
+proc-macro = true
+
+[dependencies]
+proc-macro2 = "1.0"
+quote = "1.0"
+syn = { version = "2.0", features = ["full"] }
+heck = "0.4"
diff --git a/crates/macros/src/lib.rs b/crates/macros/src/lib.rs
new file mode 100644
index 0000000..1b26bf2
--- /dev/null
+++ b/crates/macros/src/lib.rs
@@ -0,0 +1,386 @@
+use proc_macro::TokenStream;
+use quote::quote;
+use std::collections::BTreeSet;
+use syn::{
+    parse::Parse, parse::ParseStream, parse_macro_input, punctuated::Punctuated, token::Comma,
+    Expr, FnArg, Ident, ItemFn, Lit, MetaNameValue, Pat, PathArguments, ReturnType, Type,
+};
+
+fn get_lit_str_value(nv: &MetaNameValue) -> Option<String> {
+    // In syn v2 MetaNameValue.value is an Expr (usually Expr::Lit). Extract string literal if present.
+    match &nv.value {
+        Expr::Lit(expr_lit) => {
+            if let Lit::Str(s) = &expr_lit.lit {
+                Some(s.value())
+            } else {
+                None
+            }
+        }
+        _ => None,
+    }
+}
+
+fn is_state_or_window(ty: &Type) -> bool {
+    // Unwrap reference
+    let mut t = ty;
+    if let Type::Reference(r) = t {
+        t = &*r.elem;
+    }
+
+    if let Type::Path(p) = t {
+        if let Some(seg) = p.path.segments.last() {
+            let ident = seg.ident.to_string();
+            if ident == "Window" || ident == "State" {
+                return true;
+            }
+        }
+    }
+    false
+}
+
+fn extract_ident_from_type(ty: &Type) -> Option<String> {
+    // Peel references, arrays, etc. Only handle Path types
+    let mut t = ty;
+    if let Type::Reference(r) = t {
+        t = &*r.elem;
+    }
+
+    if let Type::Path(p) = t {
+        // Handle Option<T>, Result, etc.
+        if let Some(seg) = p.path.segments.last() {
+            let ident = seg.ident.to_string();
+            if ident == "Option" {
+                // extract generic arg (use helper)
+                if let Some(inner) = first_type_arg_from_pathargs(&seg.arguments) {
+                    return extract_ident_from_type(inner);
+                }
+            } else {
+                // For multi-segment like core::java::JavaDownloadInfo we return last segment ident
+                return Some(ident);
+            }
+        }
+    }
+    None
+}
+
+fn first_type_arg_from_pathargs(pa: &PathArguments) -> Option<&Type> {
+    // Given PathArguments (e.g. from a PathSegment), return the first GenericArgument::Type if present.
+    if let PathArguments::AngleBracketed(ab) = pa {
+        for arg in ab.args.iter() {
+            if let syn::GenericArgument::Type(ty) = arg {
+                return Some(ty);
+            }
+        }
+    }
+    None
+}
+
+fn rust_type_to_ts(ty: &Type) -> (String, bool) {
+    // returns (ts_type, is_struct_like)
+    // is_struct_like signals that this type probably needs import from `import_from`
+    // Simple mapping: String -> string, primitives -> number, bool -> boolean, others -> ident
+    let mut t = ty;
+    // Unwrap references
+    if let Type::Reference(r) = t {
+        t = &*r.elem;
+    }
+
+    if let Type::Path(p) = t {
+        if let Some(seg) = p.path.segments.last() {
+            let ident = seg.ident.to_string();
+            // handle Option<T>
+            if ident == "Option" {
+                if let Some(inner) = first_type_arg_from_pathargs(&seg.arguments) {
+                    let (inner_ts, inner_struct) = rust_type_to_ts(inner);
+                    // make optional, represent as type | null
+                    return (format!("{} | null", inner_ts), inner_struct);
+                }
+            }
+            return match ident.as_str() {
+                "String" => ("string".to_string(), false),
+                "str" => ("string".to_string(), false),
+                "bool" => ("boolean".to_string(), false),
+                "u8" | "u16" | "u32" | "u64" | "u128" | "i8" | "i16" | "i32" | "i64" | "i128"
+                | "usize" | "isize" | "f32" | "f64" => ("number".to_string(), false),
+                "Vec" => {
+                    // Vec<T> -> T[]
+                    if let Some(inner) = first_type_arg_from_pathargs(&seg.arguments) {
+                        let (inner_ts, inner_struct) = rust_type_to_ts(inner);
+                        return (format!("{}[]", inner_ts), inner_struct);
+                    }
+                    ("any[]".to_string(), false)
+                }
+                other => {
+                    // treat as struct/complex type
+                    (other.to_string(), true)
+                }
+            };
+        }
+    }
+    ("any".to_string(), false)
+}
+
+fn get_return_ts(ty: &ReturnType) -> (String, BTreeSet<String>) {
+    // returns (promise_ts_type, set_of_structs_to_import)
+    let mut imports = BTreeSet::new();
+    match ty {
+        ReturnType::Default => ("Promise<void>".to_string(), imports),
+        ReturnType::Type(_, boxed) => {
+            // look for Result<T, E> commonly
+            let t = &**boxed;
+            if let Type::Path(p) = t {
+                if let Some(seg) = p.path.segments.last() {
+                    let ident = seg.ident.to_string();
+                    if ident == "Result" {
+                        if let Some(ok_ty) = first_type_arg_from_pathargs(&seg.arguments) {
+                            let (ts, is_struct) = rust_type_to_ts(ok_ty);
+                            if is_struct {
+                                if let Some(name) = extract_ident_from_type(ok_ty) {
+                                    imports.insert(name);
+                                }
+                            }
+                            return (format!("Promise<{}>", ts), imports);
+                        }
+                    } else {
+                        // not Result - map directly
+                        let (ts, is_struct) = rust_type_to_ts(t);
+                        if is_struct {
+                            if let Some(name) = extract_ident_from_type(t) {
+                                imports.insert(name);
+                            }
+                        }
+                        return (format!("Promise<{}>", ts), imports);
+                    }
+                }
+            }
+            // fallback
+            ("Promise<any>".to_string(), imports)
+        }
+    }
+}
+
+fn snake_to_camel(s: &str) -> String {
+    let mut parts = s.split('_');
+    let mut out = String::new();
+    if let Some(first) = parts.next() {
+        out.push_str(&first.to_ascii_lowercase());
+    }
+    for p in parts {
+        if p.is_empty() {
+            continue;
+        }
+        let mut chs = p.chars();
+        if let Some(c) = chs.next() {
+            out.push_str(&c.to_ascii_uppercase().to_string());
+            out.push_str(&chs.as_str().to_ascii_lowercase());
+        }
+    }
+    out
+}
+
+#[proc_macro_attribute]
+pub fn api(attr: TokenStream, item: TokenStream) -> TokenStream {
+    // Parse inputs as a punctuated list of MetaNameValue (e.g. export_to = "...", import_from = "...")
+    // `MetaList` implements `Parse` so we can parse the raw attribute token stream reliably
+    struct MetaList(Punctuated<MetaNameValue, Comma>);
+    impl Parse for MetaList {
+        fn parse(input: ParseStream) -> syn::Result<Self> {
+            Ok(MetaList(Punctuated::parse_terminated(input)?))
+        }
+    }
+    let metas = parse_macro_input!(attr as MetaList).0;
+    let input_fn = parse_macro_input!(item as ItemFn);
+
+    // Extract attribute args: export_to, import_from
+    let mut export_to: Option<String> = None;
+    let mut import_from: Option<String> = None;
+
+    for nv in metas.iter() {
+        if let Some(ident) = nv.path.get_ident() {
+            let name = ident.to_string();
+            if name == "export_to" {
+                if let Some(v) = get_lit_str_value(nv) {
+                    export_to = Some(v);
+                }
+            } else if name == "import_from" {
+                if let Some(v) = get_lit_str_value(nv) {
+                    import_from = Some(v);
+                }
+            }
+        }
+    }
+
+    // Analyze function
+    let fn_name_ident: Ident = input_fn.sig.ident.clone();
+    let fn_name = fn_name_ident.to_string();
+    let ts_fn_name = snake_to_camel(&fn_name);
+
+    // Collect parameters (ignore State/Window)
+    let mut param_names: Vec<String> = Vec::new();
+    let mut param_defs: Vec<String> = Vec::new();
+    let mut import_types: BTreeSet<String> = BTreeSet::new();
+
+    for input in input_fn.sig.inputs.iter() {
+        match input {
+            FnArg::Receiver(_) => {
+                // skip self
+            }
+            FnArg::Typed(pt) => {
+                // Get parameter identifier
+                let pat = &*pt.pat;
+                let param_ident = if let Pat::Ident(pi) = pat {
+                    Some(pi.ident.to_string())
+                } else {
+                    // ignore complex patterns
+                    continue;
+                };
+
+                // Check if type should be ignored (State, Window)
+                if is_state_or_window(&*pt.ty) {
+                    continue;
+                }
+
+                // Map type
+                let (ts_type, is_struct) = rust_type_to_ts(&*pt.ty);
+                if is_struct {
+                    if let Some(name) = extract_ident_from_type(&*pt.ty) {
+                        import_types.insert(name);
+                    }
+                }
+
+                if let Some(pn) = param_ident {
+                    // Convert param name to camelCase - keep existing but ensure camelCase for TS
+                    // We'll convert snake_case param names to camelCase
+                    let ts_param_name = snake_to_camel(&pn);
+                    param_names.push(ts_param_name.clone());
+                    param_defs.push(format!("{}: {}", ts_param_name, ts_type));
+                }
+            }
+        }
+    }
+
+    // Return type
+    let (return_ts_promise, return_imports) = get_return_ts(&input_fn.sig.output);
+    for r in return_imports {
+        import_types.insert(r);
+    }
+
+    // Build TypeScript code string
+    let mut ts_lines: Vec<String> = Vec::new();
+
+    ts_lines.push(r#"import { invoke } from "@tauri-apps/api/core""#.to_string());
+
+    if !import_types.is_empty() {
+        if let Some(import_from_str) = import_from.clone() {
+            let types_joined = import_types.iter().cloned().collect::<Vec<_>>().join(", ");
+            ts_lines.push(format!(
+                "import {{ {} }} from \"{}\"",
+                types_joined, import_from_str
+            ));
+        } else {
+            // If no import_from provided, still import types from local path? We'll skip if not provided.
+        }
+    }
+
+    // function signature
+    let params_sig = param_defs.join(", ");
+    let params_pass = if param_names.is_empty() {
+        "".to_string()
+    } else {
+        // Build object like { majorVersion, imageType }
+        format!("{}", param_names.join(", "))
+    };
+
+    // Determine return generic for invoke: need the raw type (not Promise<...>)
+    let invoke_generic =
+        if return_ts_promise.starts_with("Promise<") && return_ts_promise.ends_with('>') {
+            &return_ts_promise["Promise<".len()..return_ts_promise.len() - 1]
+        } else {
+            "any"
+        };
+
+    let invoke_line = if param_names.is_empty() {
+        format!("    return invoke<{}>(\"{}\")", invoke_generic, fn_name)
+    } else {
+        format!(
+            "    return invoke<{}>(\"{}\", {{ {} }})",
+            invoke_generic, fn_name, params_pass
+        )
+    };
+
+    ts_lines.push(format!(
+        "export async function {}({}): {} {{",
+        ts_fn_name, params_sig, return_ts_promise
+    ));
+    ts_lines.push(invoke_line);
+    ts_lines.push("}".to_string());
+
+    let ts_contents = ts_lines.join("\n") + "\n";
+
+    // Prepare test function name
+    let test_fn_name = Ident::new(
+        &format!("tauri_export_bindings_{}", fn_name),
+        fn_name_ident.span(),
+    );
+
+    // Generate code for test function that writes the TS string to file
+    let export_to_literal = match export_to {
+        Some(ref s) => s.clone(),
+        None => String::new(),
+    };
+
+    // Build tokens
+    let original_fn = &input_fn;
+    let ts_string_literal = ts_contents.clone();
+
+    let write_stmt = if export_to_literal.is_empty() {
+        // No-op: don't write
+        // quote! {
+        //     // No export_to provided; skipping file write.
+        // }
+        panic!("No export_to provided")
+    } else {
+        // We'll append to the file to avoid overwriting existing bindings from other macros.
+        // Use create(true).append(true)
+        let path = export_to_literal.clone();
+        let ts_lit = syn::LitStr::new(&ts_string_literal, proc_macro2::Span::call_site());
+        quote! {
+            {
+                // Ensure parent directories exist if possible (best-effort)
+                let path = std::path::Path::new(#path);
+                if let Some(parent) = path.parent() {
+                    let _ = std::fs::create_dir_all(parent);
+                }
+                // Append generated bindings to file
+                match OpenOptions::new().create(true).append(true).open(path) {
+                    Ok(mut f) => {
+                        let _ = f.write_all(#ts_lit.as_bytes());
+                        println!("Successfully wrote to {}", path.display());
+                    }
+                    Err(e) => {
+                        eprintln!("dropout::api binding write failed: {}", e);
+                    }
+                }
+            }
+        }
+    };
+
+    let gen = quote! {
+        #original_fn
+
+        #[cfg(test)]
+        mod __dropout_export_tests {
+            use super::*;
+            use std::fs::OpenOptions;
+            use std::io::Write;
+
+            #[test]
+            fn #test_fn_name() {
+                // Generated TypeScript bindings for function: #fn_name
+                #write_stmt
+            }
+        }
+    };
+
+    gen.into()
+}
diff --git a/package.json b/package.json
index 4d1093b..800b455 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "description": "Dropout, the next-generation Minecraft game launcher",
   "scripts": {
+    "generate": "cargo test export_bindings && biome check packages/ui-new/src/types/bindings --fix",
     "bump-tauri": "tsx scripts/bump-tauri.ts",
     "prepare": "prek install"
   },
diff --git a/packages/ui-new/.gitignore b/packages/ui-new/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/packages/ui-new/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/ui-new/components.json b/packages/ui-new/components.json
new file mode 100644
index 0000000..2b0833f
--- /dev/null
+++ b/packages/ui-new/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
diff --git a/packages/ui-new/index.html b/packages/ui-new/index.html
new file mode 100644
index 0000000..5191e6f
--- /dev/null
+++ b/packages/ui-new/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/icon.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Dropout Launcher</title>
+    </head>
+    <body>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>
diff --git a/packages/ui-new/package.json b/packages/ui-new/package.json
new file mode 100644
index 0000000..706c12b
--- /dev/null
+++ b/packages/ui-new/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "@dropout/ui-new",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "biome check .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@tauri-apps/api": "^2.9.1",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
+    "@tauri-apps/plugin-fs": "^2.4.5",
+    "@tauri-apps/plugin-shell": "^2.3.4",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.562.0",
+    "marked": "^17.0.1",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router": "^7.12.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "globals": "^16.5.0",
+    "tailwindcss": "^4.1.18",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@^7"
+  }
+}
diff --git a/packages/ui-new/public/icon.svg b/packages/ui-new/public/icon.svg
new file mode 100644
index 0000000..0baf00f
--- /dev/null
+++ b/packages/ui-new/public/icon.svg
@@ -0,0 +1,50 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+    <!-- Background -->
+    <rect width="100%" height="100%" fill="#23272a"/>
+
+    <!-- Grid Pattern -->
+    <defs>
+        <pattern id="smallGrid" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#2c2f33" stroke-width="2"/>
+        </pattern>
+        <!-- Glow filter for active connections -->
+        <filter id="glow" x="-20%" y="-20%" width="140%" height="140%">
+            <feGaussianBlur stdDeviation="3" result="blur" />
+            <feComposite in="SourceGraphic" in2="blur" operator="over" />
+        </filter>
+    </defs>
+    <rect width="100%" height="100%" fill="url(#smallGrid)" />
+
+    <!-- Neural Network Connections (Lines) -->
+    <!-- Only lines between ACTIVE nodes are drawn normally -->
+    
+    <!-- Input (Left) to Hidden (Middle Active) -->
+    <path d="M 100 128 L 256 256" stroke="#43b581" stroke-width="8" stroke-linecap="round" opacity="0.8"/> <!-- Top to Center -->
+    <path d="M 100 256 L 256 256" stroke="#43b581" stroke-width="8" stroke-linecap="round" opacity="1.0" filter="url(#glow)"/> <!-- Mid to Center (Strongest) -->
+    <path d="M 100 384 L 256 256" stroke="#43b581" stroke-width="8" stroke-linecap="round" opacity="0.8"/> <!-- Bot to Center -->
+
+    <!-- Hidden (Middle Active) to Output (Right) -->
+    <path d="M 256 256 L 412 256" stroke="#43b581" stroke-width="8" stroke-linecap="round" opacity="1.0" filter="url(#glow)"/>
+
+    <!-- Disconnected "Ghost" Lines (Optional: faint traces, or just omit to emphasize dropout) -->
+    <!-- Let's omit them to keep it clean and high-contrast, representing true dropout -->
+
+    <!-- Nodes -->
+    
+    <!-- Layer 1: Input (All Active) - x=100 -->
+    <circle cx="100" cy="128" r="30" fill="#7289da" stroke="#ffffff" stroke-width="4"/>
+    <circle cx="100" cy="256" r="30" fill="#7289da" stroke="#ffffff" stroke-width="4"/>
+    <circle cx="100" cy="384" r="30" fill="#7289da" stroke="#ffffff" stroke-width="4"/>
+
+    <!-- Layer 2: Hidden (Dropout Layer) - x=256 -->
+    <!-- Node 1: DROPPED (Ghost) -->
+    <circle cx="256" cy="128" r="28" fill="none" stroke="#4f545c" stroke-width="4" stroke-dasharray="8,6"/>
+    <!-- Node 2: ACTIVE -->
+    <circle cx="256" cy="256" r="32" fill="#43b581" stroke="#ffffff" stroke-width="4"/>
+    <!-- Node 3: DROPPED (Ghost) -->
+    <circle cx="256" cy="384" r="28" fill="none" stroke="#4f545c" stroke-width="4" stroke-dasharray="8,6"/>
+
+    <!-- Layer 3: Output - x=412 -->
+    <circle cx="412" cy="256" r="30" fill="#7289da" stroke="#ffffff" stroke-width="4"/>
+
+</svg>
diff --git a/packages/ui-new/src/components/bottom-bar.tsx b/packages/ui-new/src/components/bottom-bar.tsx
new file mode 100644
index 0000000..a0c2c00
--- /dev/null
+++ b/packages/ui-new/src/components/bottom-bar.tsx
@@ -0,0 +1,269 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { Check, ChevronDown, Play, Terminal, User } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useAuthStore } from "@/stores/auth-store";
+import { useGameStore } from "@/stores/game-store";
+import { useInstancesStore } from "@/stores/instances-store";
+import { useUIStore } from "@/stores/ui-store";
+
+interface InstalledVersion {
+  id: string;
+  type: string;
+}
+
+export function BottomBar() {
+  const authStore = useAuthStore();
+  const gameStore = useGameStore();
+  const instancesStore = useInstancesStore();
+  const uiStore = useUIStore();
+
+  const [isVersionDropdownOpen, setIsVersionDropdownOpen] = useState(false);
+  const [installedVersions, setInstalledVersions] = useState<
+    InstalledVersion[]
+  >([]);
+  const [isLoadingVersions, setIsLoadingVersions] = useState(true);
+
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const loadInstalledVersions = useCallback(async () => {
+    if (!instancesStore.activeInstanceId) {
+      setInstalledVersions([]);
+      setIsLoadingVersions(false);
+      return;
+    }
+
+    setIsLoadingVersions(true);
+    try {
+      const versions = await invoke<InstalledVersion[]>(
+        "list_installed_versions",
+        { instanceId: instancesStore.activeInstanceId },
+      );
+
+      const installed = versions || [];
+      setInstalledVersions(installed);
+
+      // If no version is selected but we have installed versions, select the first one
+      if (!gameStore.selectedVersion && installed.length > 0) {
+        gameStore.setSelectedVersion(installed[0].id);
+      }
+    } catch (error) {
+      console.error("Failed to load installed versions:", error);
+    } finally {
+      setIsLoadingVersions(false);
+    }
+  }, [
+    instancesStore.activeInstanceId,
+    gameStore.selectedVersion,
+    gameStore.setSelectedVersion,
+  ]);
+
+  useEffect(() => {
+    loadInstalledVersions();
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsVersionDropdownOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    // Listen for backend events that should refresh installed versions.
+    let unlistenDownload: UnlistenFn | null = null;
+    let unlistenVersionDeleted: UnlistenFn | null = null;
+
+    (async () => {
+      try {
+        unlistenDownload = await listen("download-complete", () => {
+          loadInstalledVersions();
+        });
+      } catch (err) {
+        // best-effort: do not break UI if listening fails
+        // eslint-disable-next-line no-console
+        console.warn("Failed to attach download-complete listener:", err);
+      }
+
+      try {
+        unlistenVersionDeleted = await listen("version-deleted", () => {
+          loadInstalledVersions();
+        });
+      } catch (err) {
+        // eslint-disable-next-line no-console
+        console.warn("Failed to attach version-deleted listener:", err);
+      }
+    })();
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      try {
+        if (unlistenDownload) unlistenDownload();
+      } catch {
+        // ignore
+      }
+      try {
+        if (unlistenVersionDeleted) unlistenVersionDeleted();
+      } catch {
+        // ignore
+      }
+    };
+  }, [loadInstalledVersions]);
+
+  const selectVersion = (id: string) => {
+    if (id !== "loading" && id !== "empty") {
+      gameStore.setSelectedVersion(id);
+      setIsVersionDropdownOpen(false);
+    }
+  };
+
+  const handleStartGame = async () => {
+    await gameStore.startGame(
+      authStore.currentAccount,
+      authStore.openLoginModal,
+      instancesStore.activeInstanceId,
+      uiStore.setView,
+    );
+  };
+
+  const getVersionTypeColor = (type: string) => {
+    switch (type) {
+      case "release":
+        return "bg-emerald-500";
+      case "snapshot":
+        return "bg-amber-500";
+      case "old_beta":
+        return "bg-rose-500";
+      case "old_alpha":
+        return "bg-violet-500";
+      default:
+        return "bg-gray-500";
+    }
+  };
+
+  const versionOptions = isLoadingVersions
+    ? [{ id: "loading", type: "loading", label: "Loading..." }]
+    : installedVersions.length === 0
+      ? [{ id: "empty", type: "empty", label: "No versions installed" }]
+      : installedVersions.map((v) => ({
+          ...v,
+          label: `${v.id}${v.type !== "release" ? ` (${v.type})` : ""}`,
+        }));
+
+  return (
+    <div className="absolute bottom-0 left-0 right-0 bg-linear-to-t from-black/30 via-transparent to-transparent p-4 z-10">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-between bg-white/5 dark:bg-black/20 backdrop-blur-xl rounded-xl border border-white/10 dark:border-white/5 p-3 shadow-lg">
+          {/* Left: Instance Info */}
+          <div className="flex items-center gap-4">
+            <div className="flex flex-col">
+              <span className="text-xs font-mono text-zinc-400 uppercase tracking-wider">
+                Active Instance
+              </span>
+              <span className="text-sm font-medium text-white">
+                {instancesStore.activeInstance?.name || "No instance selected"}
+              </span>
+            </div>
+
+            {/* Version Selector */}
+            <div className="relative" ref={dropdownRef}>
+              <button
+                type="button"
+                onClick={() => setIsVersionDropdownOpen(!isVersionDropdownOpen)}
+                className="flex items-center gap-2 px-4 py-2 bg-black/20 dark:bg-white/5 hover:bg-black/30 dark:hover:bg-white/10 rounded-lg border border-white/10 transition-colors"
+              >
+                <span className="text-sm text-white">
+                  {gameStore.selectedVersion || "Select Version"}
+                </span>
+                <ChevronDown
+                  size={16}
+                  className={`text-zinc-400 transition-transform ${
+                    isVersionDropdownOpen ? "rotate-180" : ""
+                  }`}
+                />
+              </button>
+
+              {/* Dropdown */}
+              {isVersionDropdownOpen && (
+                <div className="absolute bottom-full mb-2 w-64 bg-zinc-900 border border-zinc-700 rounded-lg shadow-2xl overflow-hidden z-50 animate-in fade-in slide-in-from-bottom-2">
+                  <div className="p-2">
+                    {versionOptions.map((option) => (
+                      <button
+                        type="button"
+                        key={option.id}
+                        onClick={() => selectVersion(option.id)}
+                        disabled={
+                          option.id === "loading" || option.id === "empty"
+                        }
+                        className={`flex items-center justify-between w-full px-3 py-2 text-left rounded-md transition-colors ${
+                          gameStore.selectedVersion === option.id
+                            ? "bg-indigo-500/20 text-indigo-300"
+                            : "hover:bg-white/5 text-zinc-300"
+                        } ${
+                          option.id === "loading" || option.id === "empty"
+                            ? "opacity-50 cursor-not-allowed"
+                            : ""
+                        }`}
+                      >
+                        <div className="flex items-center gap-2">
+                          <div
+                            className={`w-2 h-2 rounded-full ${getVersionTypeColor(
+                              option.type,
+                            )}`}
+                          ></div>
+                          <span className="text-sm font-medium">
+                            {option.label}
+                          </span>
+                        </div>
+                        {gameStore.selectedVersion === option.id && (
+                          <Check size={14} className="text-indigo-400" />
+                        )}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Right: Action Buttons */}
+          <div className="flex items-center gap-3">
+            {/* Console Toggle */}
+            <button
+              type="button"
+              onClick={() => uiStore.toggleConsole()}
+              className="flex items-center gap-2 px-3 py-2 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 hover:text-white rounded-lg transition-colors"
+            >
+              <Terminal size={16} />
+              <span className="text-sm font-medium">Console</span>
+            </button>
+
+            {/* User Login/Info */}
+            <button
+              type="button"
+              onClick={() => authStore.openLoginModal()}
+              className="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg transition-colors"
+            >
+              <User size={16} />
+              <span className="text-sm font-medium">
+                {authStore.currentAccount?.username || "Login"}
+              </span>
+            </button>
+
+            {/* Start Game */}
+            <button
+              type="button"
+              onClick={handleStartGame}
+              className="flex items-center gap-2 px-5 py-2.5 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition-colors shadow-lg shadow-emerald-500/20"
+            >
+              <Play size={16} />
+              <span className="text-sm font-medium">Start</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/components/download-monitor.tsx b/packages/ui-new/src/components/download-monitor.tsx
new file mode 100644
index 0000000..d67e173
--- /dev/null
+++ b/packages/ui-new/src/components/download-monitor.tsx
@@ -0,0 +1,61 @@
+import { X } from "lucide-react";
+import { useState } from "react";
+
+export function DownloadMonitor() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="bg-zinc-900/80 backdrop-blur-md border border-zinc-700 rounded-lg shadow-2xl overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-3 bg-zinc-800/50 border-b border-zinc-700">
+        <div className="flex items-center gap-2">
+          <div className="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
+          <span className="text-sm font-medium text-white">Downloads</span>
+        </div>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="text-zinc-400 hover:text-white transition-colors p-1"
+        >
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="p-4">
+        <div className="space-y-3">
+          {/* Download Item */}
+          <div className="space-y-1">
+            <div className="flex justify-between text-xs">
+              <span className="text-zinc-300">Minecraft 1.20.4</span>
+              <span className="text-zinc-400">65%</span>
+            </div>
+            <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-emerald-500 rounded-full transition-all duration-300"
+                style={{ width: "65%" }}
+              ></div>
+            </div>
+            <div className="flex justify-between text-[10px] text-zinc-500">
+              <span>142 MB / 218 MB</span>
+              <span>2.1 MB/s • 36s remaining</span>
+            </div>
+          </div>
+
+          {/* Download Item */}
+          <div className="space-y-1">
+            <div className="flex justify-between text-xs">
+              <span className="text-zinc-300">Java 17</span>
+              <span className="text-zinc-400">100%</span>
+            </div>
+            <div className="h-1.5 bg-zinc-800 rounded-full overflow-hidden">
+              <div className="h-full bg-emerald-500 rounded-full"></div>
+            </div>
+            <div className="text-[10px] text-emerald-400">Completed</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/components/game-console.tsx b/packages/ui-new/src/components/game-console.tsx
new file mode 100644
index 0000000..6980c8c
--- /dev/null
+++ b/packages/ui-new/src/components/game-console.tsx
@@ -0,0 +1,290 @@
+import { Copy, Download, Filter, Search, Trash2, X } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { useLogsStore } from "@/stores/logs-store";
+import { useUIStore } from "@/stores/ui-store";
+
+export function GameConsole() {
+  const uiStore = useUIStore();
+  const logsStore = useLogsStore();
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedLevels, setSelectedLevels] = useState<Set<string>>(
+    new Set(["info", "warn", "error", "debug", "fatal"]),
+  );
+  const [autoScroll, setAutoScroll] = useState(true);
+  const consoleEndRef = useRef<HTMLDivElement>(null);
+  const logsContainerRef = useRef<HTMLDivElement>(null);
+
+  const levelColors: Record<string, string> = {
+    info: "text-blue-400",
+    warn: "text-amber-400",
+    error: "text-red-400",
+    debug: "text-purple-400",
+    fatal: "text-rose-400",
+  };
+
+  const levelBgColors: Record<string, string> = {
+    info: "bg-blue-400/10",
+    warn: "bg-amber-400/10",
+    error: "bg-red-400/10",
+    debug: "bg-purple-400/10",
+    fatal: "bg-rose-400/10",
+  };
+
+  // Filter logs based on search term and selected levels
+  const filteredLogs = logsStore.logs.filter((log) => {
+    const matchesSearch =
+      searchTerm === "" ||
+      log.message.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      log.source.toLowerCase().includes(searchTerm.toLowerCase());
+
+    const matchesLevel = selectedLevels.has(log.level);
+
+    return matchesSearch && matchesLevel;
+  });
+
+  // Auto-scroll to bottom when new logs arrive or autoScroll is enabled
+  useEffect(() => {
+    if (autoScroll && consoleEndRef.current && filteredLogs.length > 0) {
+      consoleEndRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [filteredLogs, autoScroll]);
+
+  // Handle keyboard shortcuts
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Ctrl/Cmd + K to focus search
+      if ((e.ctrlKey || e.metaKey) && e.key === "k") {
+        e.preventDefault();
+        // Focus search input
+        const searchInput = document.querySelector(
+          'input[type="text"]',
+        ) as HTMLInputElement;
+        if (searchInput) searchInput.focus();
+      }
+      // Escape to close console
+      if (e.key === "Escape") {
+        uiStore.toggleConsole();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [uiStore.toggleConsole]);
+
+  const toggleLevel = (level: string) => {
+    const newLevels = new Set(selectedLevels);
+    if (newLevels.has(level)) {
+      newLevels.delete(level);
+    } else {
+      newLevels.add(level);
+    }
+    setSelectedLevels(newLevels);
+  };
+
+  const handleCopyAll = () => {
+    const logsText = logsStore.exportLogs(filteredLogs);
+    navigator.clipboard.writeText(logsText);
+  };
+
+  const handleExport = () => {
+    const logsText = logsStore.exportLogs(filteredLogs);
+    const blob = new Blob([logsText], { type: "text/plain" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `dropout_logs_${new Date().toISOString().replace(/[:.]/g, "-")}.txt`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  };
+
+  const handleClear = () => {
+    logsStore.clear();
+  };
+
+  return (
+    <>
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-zinc-700 bg-[#252526]">
+        <div className="flex items-center gap-3">
+          <h2 className="text-lg font-bold text-white">Game Console</h2>
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-zinc-400">Logs:</span>
+            <span className="text-xs font-medium text-emerald-400">
+              {filteredLogs.length}
+            </span>
+            <span className="text-xs text-zinc-400">/</span>
+            <span className="text-xs text-zinc-400">
+              {logsStore.logs.length}
+            </span>
+          </div>
+        </div>
+        <button
+          type="button"
+          onClick={() => uiStore.toggleConsole()}
+          className="p-2 text-zinc-400 hover:text-white transition-colors"
+        >
+          <X size={20} />
+        </button>
+      </div>
+
+      {/* Toolbar */}
+      <div className="flex items-center gap-3 p-3 border-b border-zinc-700 bg-[#2D2D30]">
+        {/* Search */}
+        <div className="relative flex-1">
+          <Search
+            className="absolute left-3 top-1/2 transform -translate-y-1/2 text-zinc-500"
+            size={16}
+          />
+          <input
+            type="text"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+            placeholder="Search logs..."
+            className="w-full pl-10 pr-4 py-2 bg-[#3E3E42] border border-zinc-600 rounded text-sm text-white placeholder:text-zinc-500 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+          />
+          {searchTerm && (
+            <button
+              type="button"
+              onClick={() => setSearchTerm("")}
+              className="absolute right-3 top-1/2 transform -translate-y-1/2 text-zinc-400 hover:text-white"
+            >
+              ×
+            </button>
+          )}
+        </div>
+
+        {/* Level Filters */}
+        <div className="flex items-center gap-1">
+          {Object.entries(levelColors).map(([level, colorClass]) => (
+            <button
+              type="button"
+              key={level}
+              onClick={() => toggleLevel(level)}
+              className={`px-3 py-1.5 text-xs font-medium rounded transition-colors ${
+                selectedLevels.has(level)
+                  ? `${levelBgColors[level]} ${colorClass}`
+                  : "bg-[#3E3E42] text-zinc-400 hover:text-white"
+              }`}
+            >
+              {level.toUpperCase()}
+            </button>
+          ))}
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1">
+          <button
+            type="button"
+            onClick={handleCopyAll}
+            className="p-2 text-zinc-400 hover:text-white transition-colors"
+            title="Copy all logs"
+          >
+            <Copy size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={handleExport}
+            className="p-2 text-zinc-400 hover:text-white transition-colors"
+            title="Export logs"
+          >
+            <Download size={16} />
+          </button>
+          <button
+            type="button"
+            onClick={handleClear}
+            className="p-2 text-zinc-400 hover:text-white transition-colors"
+            title="Clear logs"
+          >
+            <Trash2 size={16} />
+          </button>
+        </div>
+
+        {/* Auto-scroll Toggle */}
+        <div className="flex items-center gap-2 pl-2 border-l border-zinc-700">
+          <label className="inline-flex items-center cursor-pointer">
+            <input
+              type="checkbox"
+              checked={autoScroll}
+              onChange={(e) => setAutoScroll(e.target.checked)}
+              className="sr-only peer"
+            />
+            <div className="relative w-9 h-5 bg-zinc-700 peer-focus:outline-none peer-focus:ring-blue-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-600"></div>
+            <span className="ml-2 text-xs text-zinc-400">Auto-scroll</span>
+          </label>
+        </div>
+      </div>
+
+      {/* Logs Container */}
+      <div
+        ref={logsContainerRef}
+        className="flex-1 overflow-y-auto font-mono text-sm bg-[#1E1E1E]"
+        style={{ fontFamily: "'Cascadia Code', 'Consolas', monospace" }}
+      >
+        {filteredLogs.length === 0 ? (
+          <div className="flex items-center justify-center h-full">
+            <div className="text-center text-zinc-500">
+              <Filter className="mx-auto mb-2" size={24} />
+              <p>No logs match the current filters</p>
+            </div>
+          </div>
+        ) : (
+          <div className="p-4 space-y-1">
+            {filteredLogs.map((log) => (
+              <div
+                key={log.id}
+                className="group hover:bg-white/5 p-2 rounded transition-colors"
+              >
+                <div className="flex items-start gap-3">
+                  <div
+                    className={`px-2 py-0.5 rounded text-xs font-medium ${levelBgColors[log.level]} ${levelColors[log.level]}`}
+                  >
+                    {log.level.toUpperCase()}
+                  </div>
+                  <div className="text-zinc-400 text-xs shrink-0">
+                    {log.timestamp}
+                  </div>
+                  <div className="text-amber-300 text-xs shrink-0">
+                    [{log.source}]
+                  </div>
+                  <div className="text-gray-300 flex-1">{log.message}</div>
+                </div>
+              </div>
+            ))}
+            <div ref={consoleEndRef} />
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex items-center justify-between p-3 border-t border-zinc-700 bg-[#252526] text-xs text-zinc-400">
+        <div className="flex items-center gap-4">
+          <div>
+            <span>Total: </span>
+            <span className="text-white">{logsStore.logs.length}</span>
+            <span> | Filtered: </span>
+            <span className="text-emerald-400">{filteredLogs.length}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <kbd className="px-1.5 py-0.5 bg-[#3E3E42] rounded text-xs">
+              Ctrl+K
+            </kbd>
+            <span>to search</span>
+          </div>
+        </div>
+        <div>
+          <span>Updated: </span>
+          <span>
+            {new Date().toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+              second: "2-digit",
+            })}
+          </span>
+        </div>
+      </div>
+    </>
+  );
+}
diff --git a/packages/ui-new/src/components/instance-creation-modal.tsx b/packages/ui-new/src/components/instance-creation-modal.tsx
new file mode 100644
index 0000000..bdc1a6f
--- /dev/null
+++ b/packages/ui-new/src/components/instance-creation-modal.tsx
@@ -0,0 +1,566 @@
+import { invoke } from "@tauri-apps/api/core";
+import { Loader2, Search } from "lucide-react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { useGameStore } from "@/stores/game-store";
+import { useInstancesStore } from "@/stores/instances-store";
+import type { Version } from "@/types/bindings/manifest";
+import type { FabricLoaderEntry } from "../types/bindings/fabric";
+import type { ForgeVersion as ForgeVersionEntry } from "../types/bindings/forge";
+import type { Instance } from "../types/bindings/instance";
+
+interface Props {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * InstanceCreationModal
+ * 3-step wizard:
+ *  1) Name
+ *  2) Select base Minecraft version
+ *  3) Optional: choose mod loader (vanilla/fabric/forge) and loader version
+ *
+ * Behavior:
+ *  - On Create: invoke("create_instance", { name })
+ *  - If a base version selected: invoke("install_version", { instanceId, versionId })
+ *  - If Fabric selected: invoke("install_fabric", { instanceId, gameVersion, loaderVersion })
+ *  - If Forge selected: invoke("install_forge", { instanceId, gameVersion, forgeVersion })
+ *  - Reload instances via instancesStore.loadInstances()
+ */
+export function InstanceCreationModal({ open, onOpenChange }: Props) {
+  const gameStore = useGameStore();
+  const instancesStore = useInstancesStore();
+
+  // Steps: 1 = name, 2 = version, 3 = mod loader
+  const [step, setStep] = useState<number>(1);
+
+  // Step 1
+  const [instanceName, setInstanceName] = useState<string>("");
+
+  // Step 2
+  const [versionSearch, setVersionSearch] = useState<string>("");
+  const [versionFilter, setVersionFilter] = useState<
+    "all" | "release" | "snapshot"
+  >("release");
+  const [selectedVersionUI, setSelectedVersionUI] = useState<Version | null>(
+    null,
+  );
+
+  // Step 3
+  const [modLoaderType, setModLoaderType] = useState<
+    "vanilla" | "fabric" | "forge"
+  >("vanilla");
+  const [fabricLoaders, setFabricLoaders] = useState<FabricLoaderEntry[]>([]);
+  const [forgeVersions, setForgeVersions] = useState<ForgeVersionEntry[]>([]);
+  const [selectedFabricLoader, setSelectedFabricLoader] = useState<string>("");
+  const [selectedForgeLoader, setSelectedForgeLoader] = useState<string>("");
+  const [loadingLoaders, setLoadingLoaders] = useState(false);
+
+  const loadModLoaders = useCallback(async () => {
+    if (!selectedVersionUI) return;
+    setLoadingLoaders(true);
+    setFabricLoaders([]);
+    setForgeVersions([]);
+    try {
+      if (modLoaderType === "fabric") {
+        const loaders = await invoke<FabricLoaderEntry[]>(
+          "get_fabric_loaders_for_version",
+          {
+            gameVersion: selectedVersionUI.id,
+          },
+        );
+        setFabricLoaders(loaders || []);
+        if (loaders && loaders.length > 0) {
+          setSelectedFabricLoader(loaders[0].loader.version);
+        } else {
+          setSelectedFabricLoader("");
+        }
+      } else if (modLoaderType === "forge") {
+        const versions = await invoke<ForgeVersionEntry[]>(
+          "get_forge_versions_for_game",
+          {
+            gameVersion: selectedVersionUI.id,
+          },
+        );
+        setForgeVersions(versions || []);
+        if (versions && versions.length > 0) {
+          // Binding `ForgeVersion` uses `version` (not `id`) — use `.version` here.
+          setSelectedForgeLoader(versions[0].version);
+        } else {
+          setSelectedForgeLoader("");
+        }
+      }
+    } catch (e) {
+      console.error("Failed to load mod loaders:", e);
+      toast.error("Failed to fetch mod loader versions");
+    } finally {
+      setLoadingLoaders(false);
+    }
+  }, [modLoaderType, selectedVersionUI]);
+
+  // When entering step 3 and a base version exists, fetch loaders if needed
+  useEffect(() => {
+    if (step === 3 && modLoaderType !== "vanilla" && selectedVersionUI) {
+      loadModLoaders();
+    }
+  }, [step, modLoaderType, selectedVersionUI, loadModLoaders]);
+
+  // Creating state
+  const [creating, setCreating] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string>("");
+
+  // Derived filtered versions
+  const filteredVersions = useMemo(() => {
+    const all = gameStore.versions || [];
+    let list = all.slice();
+    if (versionFilter !== "all") {
+      list = list.filter((v) => v.type === versionFilter);
+    }
+    if (versionSearch.trim()) {
+      const q = versionSearch.trim().toLowerCase().replace(/。/g, ".");
+      list = list.filter((v) => v.id.toLowerCase().includes(q));
+    }
+    return list;
+  }, [gameStore.versions, versionFilter, versionSearch]);
+
+  // Reset when opened/closed
+  useEffect(() => {
+    if (open) {
+      // ensure versions are loaded
+      gameStore.loadVersions();
+      setStep(1);
+      setInstanceName("");
+      setVersionSearch("");
+      setVersionFilter("release");
+      setSelectedVersionUI(null);
+      setModLoaderType("vanilla");
+      setFabricLoaders([]);
+      setForgeVersions([]);
+      setSelectedFabricLoader("");
+      setSelectedForgeLoader("");
+      setErrorMessage("");
+      setCreating(false);
+    }
+  }, [open, gameStore.loadVersions]);
+
+  function validateStep1(): boolean {
+    if (!instanceName.trim()) {
+      setErrorMessage("Please enter an instance name");
+      return false;
+    }
+    setErrorMessage("");
+    return true;
+  }
+
+  function validateStep2(): boolean {
+    if (!selectedVersionUI) {
+      setErrorMessage("Please select a Minecraft version");
+      return false;
+    }
+    setErrorMessage("");
+    return true;
+  }
+
+  async function handleNext() {
+    setErrorMessage("");
+    if (step === 1) {
+      if (!validateStep1()) return;
+      setStep(2);
+    } else if (step === 2) {
+      if (!validateStep2()) return;
+      setStep(3);
+    }
+  }
+
+  function handleBack() {
+    setErrorMessage("");
+    setStep((s) => Math.max(1, s - 1));
+  }
+
+  async function handleCreate() {
+    if (!validateStep1() || !validateStep2()) return;
+    setCreating(true);
+    setErrorMessage("");
+
+    try {
+      // Step 1: create instance
+      const instance = await invoke<Instance>("create_instance", {
+        name: instanceName.trim(),
+      });
+
+      // If selectedVersion provided, install it
+      if (selectedVersionUI) {
+        try {
+          await invoke("install_version", {
+            instanceId: instance.id,
+            versionId: selectedVersionUI.id,
+          });
+        } catch (err) {
+          console.error("Failed to install base version:", err);
+          // continue - instance created but version install failed
+          toast.error(
+            `Failed to install version ${selectedVersionUI.id}: ${String(err)}`,
+          );
+        }
+      }
+
+      // If mod loader selected, install it
+      if (modLoaderType === "fabric" && selectedFabricLoader) {
+        try {
+          await invoke("install_fabric", {
+            instanceId: instance.id,
+            gameVersion: selectedVersionUI?.id ?? "",
+            loaderVersion: selectedFabricLoader,
+          });
+        } catch (err) {
+          console.error("Failed to install Fabric:", err);
+          toast.error(`Failed to install Fabric: ${String(err)}`);
+        }
+      } else if (modLoaderType === "forge" && selectedForgeLoader) {
+        try {
+          await invoke("install_forge", {
+            instanceId: instance.id,
+            gameVersion: selectedVersionUI?.id ?? "",
+            installerVersion: selectedForgeLoader,
+          });
+        } catch (err) {
+          console.error("Failed to install Forge:", err);
+          toast.error(`Failed to install Forge: ${String(err)}`);
+        }
+      }
+
+      // Refresh instances list
+      await instancesStore.loadInstances();
+
+      toast.success("Instance created successfully");
+      onOpenChange(false);
+    } catch (e) {
+      console.error("Failed to create instance:", e);
+      setErrorMessage(String(e));
+      toast.error(`Failed to create instance: ${e}`);
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  // UI pieces
+  const StepIndicator = () => (
+    <div className="flex gap-2 w-full">
+      <div
+        className={`flex-1 h-1 rounded ${step >= 1 ? "bg-indigo-500" : "bg-zinc-700"}`}
+      />
+      <div
+        className={`flex-1 h-1 rounded ${step >= 2 ? "bg-indigo-500" : "bg-zinc-700"}`}
+      />
+      <div
+        className={`flex-1 h-1 rounded ${step >= 3 ? "bg-indigo-500" : "bg-zinc-700"}`}
+      />
+    </div>
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-3xl max-h-[90vh] overflow-hidden">
+        <DialogHeader>
+          <DialogTitle>Create New Instance</DialogTitle>
+          <DialogDescription>
+            Multi-step wizard — create an instance and optionally install a
+            version or mod loader.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="px-6">
+          <div className="pt-4 pb-6">
+            <StepIndicator />
+          </div>
+
+          {/* Step 1 - Name */}
+          {step === 1 && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="instance-name"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Instance Name
+                </label>
+                <Input
+                  id="instance-name"
+                  placeholder="My Minecraft Instance"
+                  value={instanceName}
+                  onChange={(e) => setInstanceName(e.target.value)}
+                  disabled={creating}
+                />
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Give your instance a memorable name.
+              </p>
+            </div>
+          )}
+
+          {/* Step 2 - Version selection */}
+          {step === 2 && (
+            <div className="space-y-4">
+              <div className="flex gap-3">
+                <div className="relative flex-1">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
+                  <Input
+                    value={versionSearch}
+                    onChange={(e) => setVersionSearch(e.target.value)}
+                    placeholder="Search versions..."
+                    className="pl-9"
+                  />
+                </div>
+
+                <div className="flex gap-2">
+                  <Button
+                    type="button"
+                    variant={versionFilter === "all" ? "default" : "outline"}
+                    onClick={() => setVersionFilter("all")}
+                  >
+                    All
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={
+                      versionFilter === "release" ? "default" : "outline"
+                    }
+                    onClick={() => setVersionFilter("release")}
+                  >
+                    Release
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={
+                      versionFilter === "snapshot" ? "default" : "outline"
+                    }
+                    onClick={() => setVersionFilter("snapshot")}
+                  >
+                    Snapshot
+                  </Button>
+                </div>
+              </div>
+
+              <ScrollArea className="max-h-[36vh]">
+                <div className="space-y-2 py-2">
+                  {gameStore.versions.length === 0 ? (
+                    <div className="flex items-center justify-center py-8 text-muted-foreground">
+                      <Loader2 className="animate-spin mr-2" />
+                      Loading versions...
+                    </div>
+                  ) : filteredVersions.length === 0 ? (
+                    <div className="text-center py-8 text-muted-foreground">
+                      No matching versions found
+                    </div>
+                  ) : (
+                    filteredVersions.map((v) => {
+                      const isSelected = selectedVersionUI?.id === v.id;
+                      return (
+                        <button
+                          key={v.id}
+                          type="button"
+                          onClick={() => setSelectedVersionUI(v)}
+                          className={`w-full text-left p-3 rounded-lg border transition-colors ${
+                            isSelected
+                              ? "bg-indigo-50 dark:bg-indigo-600/20 border-indigo-200"
+                              : "bg-white/40 dark:bg-white/5 border-black/5 dark:border-white/5 hover:bg-white/60"
+                          }`}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="font-mono font-bold">{v.id}</div>
+                              <div className="text-xs text-muted-foreground mt-1">
+                                {v.type}{" "}
+                                {v.releaseTime
+                                  ? ` • ${new Date(v.releaseTime).toLocaleDateString()}`
+                                  : ""}
+                              </div>
+                            </div>
+                            {v.javaVersion && (
+                              <div className="text-sm">
+                                Java {v.javaVersion}
+                              </div>
+                            )}
+                          </div>
+                        </button>
+                      );
+                    })
+                  )}
+                </div>
+              </ScrollArea>
+            </div>
+          )}
+
+          {/* Step 3 - Mod loader */}
+          {step === 3 && (
+            <div className="space-y-4">
+              <div>
+                <div className="text-sm font-medium mb-2">Mod Loader Type</div>
+                <div className="flex gap-3">
+                  <Button
+                    type="button"
+                    variant={
+                      modLoaderType === "vanilla" ? "default" : "outline"
+                    }
+                    onClick={() => setModLoaderType("vanilla")}
+                  >
+                    Vanilla
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={modLoaderType === "fabric" ? "default" : "outline"}
+                    onClick={() => setModLoaderType("fabric")}
+                  >
+                    Fabric
+                  </Button>
+                  <Button
+                    type="button"
+                    variant={modLoaderType === "forge" ? "default" : "outline"}
+                    onClick={() => setModLoaderType("forge")}
+                  >
+                    Forge
+                  </Button>
+                </div>
+              </div>
+
+              {modLoaderType === "fabric" && (
+                <div>
+                  {loadingLoaders ? (
+                    <div className="flex items-center gap-2">
+                      <Loader2 className="animate-spin" />
+                      Loading Fabric versions...
+                    </div>
+                  ) : fabricLoaders.length > 0 ? (
+                    <div className="space-y-2">
+                      <select
+                        value={selectedFabricLoader}
+                        onChange={(e) =>
+                          setSelectedFabricLoader(e.target.value)
+                        }
+                        className="w-full px-3 py-2 rounded border bg-transparent"
+                      >
+                        {fabricLoaders.map((f) => (
+                          <option
+                            key={f.loader.version}
+                            value={f.loader.version}
+                          >
+                            {f.loader.version}{" "}
+                            {f.loader.stable ? "(Stable)" : "(Beta)"}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      No Fabric loaders available for this version
+                    </p>
+                  )}
+                </div>
+              )}
+
+              {modLoaderType === "forge" && (
+                <div>
+                  {loadingLoaders ? (
+                    <div className="flex items-center gap-2">
+                      <Loader2 className="animate-spin" />
+                      Loading Forge versions...
+                    </div>
+                  ) : forgeVersions.length > 0 ? (
+                    <div className="space-y-2">
+                      <select
+                        value={selectedForgeLoader}
+                        onChange={(e) => setSelectedForgeLoader(e.target.value)}
+                        className="w-full px-3 py-2 rounded border bg-transparent"
+                      >
+                        {forgeVersions.map((f) => (
+                          // binding ForgeVersion uses `version` as the identifier
+                          <option key={f.version} value={f.version}>
+                            {f.version}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  ) : (
+                    <p className="text-sm text-muted-foreground">
+                      No Forge versions available for this version
+                    </p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+
+          {errorMessage && (
+            <div className="text-sm text-red-400 mt-3">{errorMessage}</div>
+          )}
+        </div>
+
+        <DialogFooter>
+          <div className="w-full flex justify-between items-center">
+            <div>
+              <Button
+                type="button"
+                variant="ghost"
+                onClick={() => {
+                  // cancel
+                  onOpenChange(false);
+                }}
+                disabled={creating}
+              >
+                Cancel
+              </Button>
+            </div>
+
+            <div className="flex gap-2">
+              {step > 1 && (
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={handleBack}
+                  disabled={creating}
+                >
+                  Back
+                </Button>
+              )}
+
+              {step < 3 ? (
+                <Button type="button" onClick={handleNext} disabled={creating}>
+                  Next
+                </Button>
+              ) : (
+                <Button
+                  type="button"
+                  onClick={handleCreate}
+                  disabled={creating}
+                >
+                  {creating ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Creating...
+                    </>
+                  ) : (
+                    "Create"
+                  )}
+                </Button>
+              )}
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default InstanceCreationModal;
diff --git a/packages/ui-new/src/components/instance-editor-modal.tsx b/packages/ui-new/src/components/instance-editor-modal.tsx
new file mode 100644
index 0000000..012e62c
--- /dev/null
+++ b/packages/ui-new/src/components/instance-editor-modal.tsx
@@ -0,0 +1,548 @@
+import { invoke } from "@tauri-apps/api/core";
+import { Folder, Loader2, Save, Trash2, X } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+
+import { toNumber } from "@/lib/tsrs-utils";
+import { useInstancesStore } from "@/stores/instances-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import type { FileInfo } from "../types/bindings/core";
+import type { Instance } from "../types/bindings/instance";
+
+type Props = {
+  open: boolean;
+  instance: Instance | null;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function InstanceEditorModal({ open, instance, onOpenChange }: Props) {
+  const instancesStore = useInstancesStore();
+  const { settings } = useSettingsStore();
+
+  const [activeTab, setActiveTab] = useState<
+    "info" | "version" | "files" | "settings"
+  >("info");
+  const [saving, setSaving] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("");
+
+  // Info tab fields
+  const [editName, setEditName] = useState("");
+  const [editNotes, setEditNotes] = useState("");
+
+  // Files tab state
+  const [selectedFileFolder, setSelectedFileFolder] = useState<
+    "mods" | "resourcepacks" | "shaderpacks" | "saves" | "screenshots"
+  >("mods");
+  const [fileList, setFileList] = useState<FileInfo[]>([]);
+  const [loadingFiles, setLoadingFiles] = useState(false);
+  const [deletingPath, setDeletingPath] = useState<string | null>(null);
+
+  // Version tab state (placeholder - the Svelte implementation used a ModLoaderSelector component)
+  // React versions-view/instance-creation handle mod loader installs; here we show basic current info.
+
+  // Settings tab fields
+  const [editMemoryMin, setEditMemoryMin] = useState<number>(0);
+  const [editMemoryMax, setEditMemoryMax] = useState<number>(0);
+  const [editJavaArgs, setEditJavaArgs] = useState<string>("");
+
+  // initialize when open & instance changes
+  useEffect(() => {
+    if (open && instance) {
+      setActiveTab("info");
+      setSaving(false);
+      setErrorMessage("");
+      setEditName(instance.name || "");
+      setEditNotes(instance.notes ?? "");
+      setEditMemoryMin(
+        (instance.memoryOverride && toNumber(instance.memoryOverride.min)) ??
+          settings.minMemory ??
+          512,
+      );
+      setEditMemoryMax(
+        (instance.memoryOverride && toNumber(instance.memoryOverride.max)) ??
+          settings.maxMemory ??
+          2048,
+      );
+      setEditJavaArgs(instance.jvmArgsOverride ?? "");
+      setFileList([]);
+      setSelectedFileFolder("mods");
+    }
+  }, [open, instance, settings.minMemory, settings.maxMemory]);
+
+  // load files when switching to files tab
+  const loadFileList = useCallback(
+    async (
+      folder:
+        | "mods"
+        | "resourcepacks"
+        | "shaderpacks"
+        | "saves"
+        | "screenshots",
+    ) => {
+      if (!instance) return;
+      setLoadingFiles(true);
+      try {
+        const files = await invoke<FileInfo[]>("list_instance_directory", {
+          instanceId: instance.id,
+          folder,
+        });
+        setFileList(files || []);
+      } catch (err) {
+        console.error("Failed to load files:", err);
+        toast.error("Failed to load files: " + String(err));
+        setFileList([]);
+      } finally {
+        setLoadingFiles(false);
+      }
+    },
+    [instance],
+  );
+
+  useEffect(() => {
+    if (open && instance && activeTab === "files") {
+      // explicitly pass the selected folder so loadFileList doesn't rely on stale closures
+      loadFileList(selectedFileFolder);
+    }
+  }, [activeTab, open, instance, selectedFileFolder, loadFileList]);
+
+  async function changeFolder(
+    folder: "mods" | "resourcepacks" | "shaderpacks" | "saves" | "screenshots",
+  ) {
+    setSelectedFileFolder(folder);
+    // reload the list for the newly selected folder
+    if (open && instance) await loadFileList(folder);
+  }
+
+  async function deleteFile(filePath: string) {
+    if (
+      !confirm(
+        `Are you sure you want to delete "${filePath.split("/").pop()}"?`,
+      )
+    ) {
+      return;
+    }
+    setDeletingPath(filePath);
+    try {
+      await invoke("delete_instance_file", { path: filePath });
+      // refresh the currently selected folder
+      await loadFileList(selectedFileFolder);
+      toast.success("Deleted");
+    } catch (err) {
+      console.error("Failed to delete file:", err);
+      toast.error("Failed to delete file: " + String(err));
+    } finally {
+      setDeletingPath(null);
+    }
+  }
+
+  async function openInExplorer(filePath: string) {
+    try {
+      await invoke("open_file_explorer", { path: filePath });
+    } catch (err) {
+      console.error("Failed to open in explorer:", err);
+      toast.error("Failed to open file explorer: " + String(err));
+    }
+  }
+
+  async function saveChanges() {
+    if (!instance) return;
+    if (!editName.trim()) {
+      setErrorMessage("Instance name cannot be empty");
+      return;
+    }
+    setSaving(true);
+    setErrorMessage("");
+    try {
+      // Build updated instance shape compatible with backend
+      const updatedInstance: Instance = {
+        ...instance,
+        name: editName.trim(),
+        // some bindings may use camelCase; set optional string fields to null when empty
+        notes: editNotes.trim() ? editNotes.trim() : null,
+        memoryOverride: {
+          min: editMemoryMin,
+          max: editMemoryMax,
+        },
+        jvmArgsOverride: editJavaArgs.trim() ? editJavaArgs.trim() : null,
+      };
+
+      await instancesStore.updateInstance(updatedInstance as Instance);
+      toast.success("Instance saved");
+      onOpenChange(false);
+    } catch (err) {
+      console.error("Failed to save instance:", err);
+      setErrorMessage(String(err));
+      toast.error("Failed to save instance: " + String(err));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function formatFileSize(bytesBig: FileInfo["size"]): string {
+    const bytes = Number(bytesBig ?? 0);
+    if (bytes === 0) return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB", "TB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${Math.round((bytes / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
+  }
+
+  function formatDate(
+    tsBig?:
+      | FileInfo["modified"]
+      | Instance["createdAt"]
+      | Instance["lastPlayed"],
+  ) {
+    if (tsBig === undefined || tsBig === null) return "";
+    const n = toNumber(tsBig);
+    // tsrs bindings often use seconds for createdAt/lastPlayed; if value looks like seconds use *1000
+    const maybeMs = n > 1e12 ? n : n * 1000;
+    return new Date(maybeMs).toLocaleDateString();
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-full max-w-4xl max-h-[90vh] overflow-hidden">
+        <DialogHeader>
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <DialogTitle>Edit Instance</DialogTitle>
+              <DialogDescription>{instance?.name ?? ""}</DialogDescription>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => onOpenChange(false)}
+                disabled={saving}
+                className="p-2 rounded hover:bg-zinc-800 text-zinc-400"
+                aria-label="Close"
+              >
+                <X />
+              </button>
+            </div>
+          </div>
+        </DialogHeader>
+
+        {/* Tab Navigation */}
+        <div className="flex gap-1 px-6 pt-2 border-b border-zinc-700">
+          {[
+            { id: "info", label: "Info" },
+            { id: "version", label: "Version" },
+            { id: "files", label: "Files" },
+            { id: "settings", label: "Settings" },
+          ].map((tab) => (
+            <button
+              type="button"
+              key={tab.id}
+              onClick={() =>
+                setActiveTab(
+                  tab.id as "info" | "version" | "files" | "settings",
+                )
+              }
+              className={`px-4 py-2 text-sm font-medium transition-colors rounded-t-lg ${
+                activeTab === tab.id
+                  ? "bg-indigo-600 text-white"
+                  : "bg-zinc-800 text-zinc-400 hover:text-white"
+              }`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        <div className="p-6 overflow-y-auto max-h-[60vh]">
+          {activeTab === "info" && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="instance-name-edit"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Instance Name
+                </label>
+                <Input
+                  id="instance-name-edit"
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                  disabled={saving}
+                />
+              </div>
+
+              <div>
+                <label
+                  htmlFor="instance-notes-edit"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Notes
+                </label>
+                <Textarea
+                  id="instance-notes-edit"
+                  value={editNotes}
+                  onChange={(e) => setEditNotes(e.target.value)}
+                  rows={4}
+                  disabled={saving}
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4 text-sm">
+                <div className="p-3 bg-zinc-800 rounded-lg">
+                  <p className="text-zinc-400">Created</p>
+                  <p className="text-white font-medium">
+                    {instance?.createdAt ? formatDate(instance.createdAt) : "-"}
+                  </p>
+                </div>
+                <div className="p-3 bg-zinc-800 rounded-lg">
+                  <p className="text-zinc-400">Last Played</p>
+                  <p className="text-white font-medium">
+                    {instance?.lastPlayed
+                      ? formatDate(instance.lastPlayed)
+                      : "Never"}
+                  </p>
+                </div>
+                <div className="p-3 bg-zinc-800 rounded-lg">
+                  <p className="text-zinc-400">Game Directory</p>
+                  <p
+                    className="text-white font-medium text-xs truncate"
+                    title={instance?.gameDir ?? ""}
+                  >
+                    {instance?.gameDir
+                      ? String(instance.gameDir).split("/").pop()
+                      : ""}
+                  </p>
+                </div>
+                <div className="p-3 bg-zinc-800 rounded-lg">
+                  <p className="text-zinc-400">Current Version</p>
+                  <p className="text-white font-medium">
+                    {instance?.versionId ?? "None"}
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "version" && (
+            <div className="space-y-4">
+              {instance?.versionId ? (
+                <div className="p-4 bg-indigo-500/10 border border-indigo-500/30 rounded-lg">
+                  <p className="text-sm text-indigo-400">
+                    Currently playing:{" "}
+                    <span className="font-medium">{instance.versionId}</span>
+                    {instance.modLoader && (
+                      <>
+                        {" "}
+                        with{" "}
+                        <span className="capitalize">{instance.modLoader}</span>
+                        {instance.modLoaderVersion
+                          ? ` ${instance.modLoaderVersion}`
+                          : ""}
+                      </>
+                    )}
+                  </p>
+                </div>
+              ) : (
+                <div className="text-sm text-zinc-400">
+                  No version selected for this instance
+                </div>
+              )}
+
+              <div>
+                <p className="text-sm font-medium mb-2">
+                  Change Version / Mod Loader
+                </p>
+                <p className="text-xs text-zinc-400">
+                  Use the Versions page to install new game versions or mod
+                  loaders, then set them here.
+                </p>
+              </div>
+            </div>
+          )}
+
+          {activeTab === "files" && (
+            <div className="space-y-4">
+              <div className="flex gap-2 flex-wrap">
+                {(
+                  [
+                    "mods",
+                    "resourcepacks",
+                    "shaderpacks",
+                    "saves",
+                    "screenshots",
+                  ] as const
+                ).map((folder) => (
+                  <button
+                    type="button"
+                    key={folder}
+                    onClick={() => changeFolder(folder)}
+                    className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+                      selectedFileFolder === folder
+                        ? "bg-indigo-600 text-white"
+                        : "bg-zinc-800 text-zinc-400 hover:text-white"
+                    }`}
+                  >
+                    {folder}
+                  </button>
+                ))}
+              </div>
+
+              {loadingFiles ? (
+                <div className="flex items-center gap-2 text-zinc-400 py-8 justify-center">
+                  <Loader2 className="animate-spin" />
+                  Loading files...
+                </div>
+              ) : fileList.length === 0 ? (
+                <div className="text-center py-8 text-zinc-500">
+                  No files in this folder
+                </div>
+              ) : (
+                <div className="space-y-2">
+                  {fileList.map((file) => (
+                    <div
+                      key={file.path}
+                      className="flex items-center justify-between p-3 bg-zinc-800 rounded-lg hover:bg-zinc-700 transition-colors"
+                    >
+                      <div className="flex-1 min-w-0">
+                        <p className="font-medium text-white truncate">
+                          {file.name}
+                        </p>
+                        <p className="text-xs text-zinc-400">
+                          {file.isDirectory
+                            ? "Folder"
+                            : formatFileSize(file.size)}{" "}
+                          • {formatDate(file.modified)}
+                        </p>
+                      </div>
+                      <div className="flex gap-2 ml-4">
+                        <button
+                          type="button"
+                          onClick={() => openInExplorer(file.path)}
+                          title="Open in explorer"
+                          className="p-2 rounded-lg hover:bg-zinc-600 text-zinc-400 hover:text-white transition-colors"
+                        >
+                          <Folder />
+                        </button>
+                        <button
+                          type="button"
+                          onClick={() => deleteFile(file.path)}
+                          disabled={deletingPath === file.path}
+                          title="Delete"
+                          className="p-2 rounded-lg hover:bg-red-600/20 text-red-400 hover:text-red-300 transition-colors disabled:opacity-50"
+                        >
+                          {deletingPath === file.path ? (
+                            <Loader2 className="animate-spin" />
+                          ) : (
+                            <Trash2 />
+                          )}
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
+          {activeTab === "settings" && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="min-memory-edit"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Minimum Memory (MB)
+                </label>
+                <Input
+                  id="min-memory-edit"
+                  type="number"
+                  value={String(editMemoryMin)}
+                  onChange={(e) => setEditMemoryMin(Number(e.target.value))}
+                  disabled={saving}
+                />
+                <p className="text-xs text-zinc-400 mt-1">
+                  Default: {settings.minMemory} MB
+                </p>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="max-memory-edit"
+                  className="block text-sm font-medium mb-2"
+                >
+                  Maximum Memory (MB)
+                </label>
+                <Input
+                  id="max-memory-edit"
+                  type="number"
+                  value={String(editMemoryMax)}
+                  onChange={(e) => setEditMemoryMax(Number(e.target.value))}
+                  disabled={saving}
+                />
+                <p className="text-xs text-zinc-400 mt-1">
+                  Default: {settings.maxMemory} MB
+                </p>
+              </div>
+
+              <div>
+                <label
+                  htmlFor="jvm-args-edit"
+                  className="block text-sm font-medium mb-2"
+                >
+                  JVM Arguments (Advanced)
+                </label>
+                <Textarea
+                  id="jvm-args-edit"
+                  value={editJavaArgs}
+                  onChange={(e) => setEditJavaArgs(e.target.value)}
+                  rows={4}
+                  disabled={saving}
+                />
+              </div>
+            </div>
+          )}
+        </div>
+
+        {errorMessage && (
+          <div className="px-6 text-sm text-red-400">{errorMessage}</div>
+        )}
+
+        <DialogFooter>
+          <div className="flex items-center justify-between w-full">
+            <div />
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                onClick={() => {
+                  onOpenChange(false);
+                }}
+              >
+                Cancel
+              </Button>
+              <Button onClick={saveChanges} disabled={saving}>
+                {saving ? (
+                  <Loader2 className="animate-spin mr-2" />
+                ) : (
+                  <Save className="mr-2" />
+                )}
+                Save
+              </Button>
+            </div>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default InstanceEditorModal;
diff --git a/packages/ui-new/src/components/login-modal.tsx b/packages/ui-new/src/components/login-modal.tsx
new file mode 100644
index 0000000..9152494
--- /dev/null
+++ b/packages/ui-new/src/components/login-modal.tsx
@@ -0,0 +1,156 @@
+import { Mail, User } from "lucide-react";
+import { useAuthStore } from "@/stores/auth-store";
+
+export function LoginModal() {
+  const authStore = useAuthStore();
+
+  const handleOfflineLogin = () => {
+    if (authStore.offlineUsername.trim()) {
+      authStore.performOfflineLogin();
+    }
+  };
+
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") {
+      handleOfflineLogin();
+    }
+  };
+
+  if (!authStore.isLoginModalOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-200 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+      <div className="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl max-w-md w-full animate-in fade-in zoom-in-95 duration-200">
+        <div className="p-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="text-xl font-bold text-white">Login</h3>
+            <button
+              type="button"
+              onClick={() => {
+                authStore.setLoginMode("select");
+                authStore.setOfflineUsername("");
+                authStore.cancelMicrosoftLogin();
+              }}
+              className="text-zinc-400 hover:text-white transition-colors p-1"
+            >
+              ×
+            </button>
+          </div>
+
+          {/* Content based on mode */}
+          {authStore.loginMode === "select" && (
+            <div className="space-y-4">
+              <p className="text-zinc-400 text-sm">
+                Choose your preferred login method
+              </p>
+              <button
+                type="button"
+                onClick={() => authStore.startMicrosoftLogin()}
+                className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg transition-colors"
+              >
+                <Mail size={18} />
+                <span className="font-medium">Microsoft Account</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  authStore.loginMode = "offline";
+                }}
+                className="w-full flex items-center justify-center gap-3 px-4 py-3 bg-zinc-800 hover:bg-zinc-700 text-white rounded-lg transition-colors"
+              >
+                <User size={18} />
+                <span className="font-medium">Offline Mode</span>
+              </button>
+            </div>
+          )}
+
+          {authStore.loginMode === "offline" && (
+            <div className="space-y-4">
+              <div>
+                <label
+                  htmlFor="username"
+                  className="block text-sm font-medium text-zinc-300 mb-2"
+                >
+                  Username
+                </label>
+                <input
+                  name="username"
+                  type="text"
+                  value={authStore.offlineUsername}
+                  onChange={(e) => authStore.setOfflineUsername(e.target.value)}
+                  onKeyDown={handleKeyPress}
+                  className="w-full px-4 py-2.5 bg-zinc-800 border border-zinc-700 rounded-lg text-white placeholder:text-zinc-500 focus:outline-none focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500 transition-colors"
+                  placeholder="Enter your Minecraft username"
+                />
+              </div>
+              <div className="flex gap-3">
+                <button
+                  type="button"
+                  onClick={() => {
+                    authStore.loginMode = "select";
+                    authStore.setOfflineUsername("");
+                  }}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium text-zinc-300 hover:text-white bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-colors"
+                >
+                  Back
+                </button>
+                <button
+                  type="button"
+                  onClick={handleOfflineLogin}
+                  disabled={!authStore.offlineUsername.trim()}
+                  className="flex-1 px-4 py-2.5 text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-500 disabled:bg-indigo-600/50 disabled:cursor-not-allowed rounded-lg transition-colors"
+                >
+                  Login
+                </button>
+              </div>
+            </div>
+          )}
+
+          {authStore.loginMode === "microsoft" && (
+            <div className="space-y-4">
+              {authStore.deviceCodeData && (
+                <div className="bg-zinc-800/50 border border-zinc-700 rounded-lg p-4">
+                  <div className="text-center mb-4">
+                    <div className="text-xs font-mono bg-zinc-900 px-3 py-2 rounded border border-zinc-700 mb-3">
+                      {authStore.deviceCodeData.userCode}
+                    </div>
+                    <p className="text-zinc-300 text-sm font-medium">
+                      Your verification code
+                    </p>
+                  </div>
+                  <p className="text-zinc-400 text-sm text-center">
+                    Visit{" "}
+                    <a
+                      href={authStore.deviceCodeData.verificationUri}
+                      target="_blank"
+                      className="text-indigo-400 hover:text-indigo-300 font-medium"
+                    >
+                      {authStore.deviceCodeData.verificationUri}
+                    </a>{" "}
+                    and enter the code above
+                  </p>
+                </div>
+              )}
+              <div className="text-center">
+                <p className="text-zinc-300 text-sm mb-2">
+                  {authStore.msLoginStatus}
+                </p>
+                <button
+                  type="button"
+                  onClick={() => {
+                    authStore.cancelMicrosoftLogin();
+                    authStore.setLoginMode("select");
+                  }}
+                  className="text-sm text-zinc-400 hover:text-white transition-colors"
+                >
+                  Cancel
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/components/particle-background.tsx b/packages/ui-new/src/components/particle-background.tsx
new file mode 100644
index 0000000..2e0b15a
--- /dev/null
+++ b/packages/ui-new/src/components/particle-background.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useRef } from "react";
+import { SaturnEffect } from "../lib/effects/SaturnEffect";
+
+export function ParticleBackground() {
+  const canvasRef = useRef<HTMLCanvasElement | null>(null);
+  const effectRef = useRef<SaturnEffect | null>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    // Instantiate SaturnEffect and attach to canvas
+    let effect: SaturnEffect | null = null;
+    try {
+      effect = new SaturnEffect(canvas);
+      effectRef.current = effect;
+    } catch (err) {
+      // If effect fails, silently degrade (keep background blank)
+      // eslint-disable-next-line no-console
+      console.warn("SaturnEffect initialization failed:", err);
+    }
+
+    const resizeHandler = () => {
+      if (effectRef.current) {
+        try {
+          effectRef.current.resize(window.innerWidth, window.innerHeight);
+        } catch {
+          // ignore
+        }
+      }
+    };
+
+    window.addEventListener("resize", resizeHandler);
+
+    // Expose getter for HomeView interactions (getSaturnEffect)
+    // HomeView will call window.getSaturnEffect()?.handleMouseDown/Move/Up
+    (
+      window as unknown as { getSaturnEffect?: () => SaturnEffect | null }
+    ).getSaturnEffect = () => effectRef.current;
+
+    return () => {
+      window.removeEventListener("resize", resizeHandler);
+      if (effectRef.current) {
+        try {
+          effectRef.current.destroy();
+        } catch {
+          // ignore
+        }
+      }
+      effectRef.current = null;
+      (
+        window as unknown as { getSaturnEffect?: () => SaturnEffect | null }
+      ).getSaturnEffect = undefined;
+    };
+  }, []);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      className="absolute inset-0 z-0 pointer-events-none"
+    />
+  );
+}
diff --git a/packages/ui-new/src/components/sidebar.tsx b/packages/ui-new/src/components/sidebar.tsx
new file mode 100644
index 0000000..a8c899b
--- /dev/null
+++ b/packages/ui-new/src/components/sidebar.tsx
@@ -0,0 +1,180 @@
+import { Bot, Folder, Home, Package, Settings } from "lucide-react";
+import { Link, useLocation } from "react-router";
+import { useUIStore, type ViewType } from "../stores/ui-store";
+
+interface NavItemProps {
+  view: string;
+  Icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
+  label: string;
+  to: string;
+}
+
+function NavItem({ view, Icon, label, to }: NavItemProps) {
+  const uiStore = useUIStore();
+  const location = useLocation();
+  const isActive = location.pathname === to || uiStore.currentView === view;
+
+  const handleClick = () => {
+    uiStore.setView(view as ViewType);
+  };
+
+  return (
+    <Link to={to}>
+      <button
+        type="button"
+        className={`group flex items-center lg:gap-3 justify-center lg:justify-start w-full px-0 lg:px-4 py-2.5 rounded-sm transition-all duration-200 relative ${
+          isActive
+            ? "bg-black/5 dark:bg-white/10 dark:text-white text-black font-medium"
+            : "dark:text-zinc-400 text-zinc-500 hover:text-black dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5"
+        }`}
+        onClick={handleClick}
+      >
+        <Icon className="size-5" strokeWidth={isActive ? 2.5 : 2} />
+        <span className="hidden lg:block text-sm relative z-10">{label}</span>
+
+        {/* Active Indicator */}
+        {isActive && (
+          <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-4 bg-black dark:bg-white rounded-r-full hidden lg:block"></div>
+        )}
+      </button>
+    </Link>
+  );
+}
+
+export function Sidebar() {
+  const uiStore = useUIStore();
+
+  return (
+    <aside className="w-20 lg:w-64 dark:bg-[#09090b] bg-white border-r dark:border-white/10 border-gray-200 flex flex-col items-center lg:items-start transition-all duration-300 shrink-0 py-6 z-20">
+      {/* Logo Area */}
+      <div className="h-16 w-full flex items-center justify-center lg:justify-start lg:px-6 mb-6">
+        {/* Icon Logo (Small) */}
+        <div className="lg:hidden text-black dark:text-white">
+          <svg
+            width="32"
+            height="32"
+            viewBox="0 0 100 100"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <title>Logo</title>
+            <path
+              d="M25 25 L50 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M25 75 L50 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M50 50 L75 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
+            <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
+            <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
+            <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
+            <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
+          </svg>
+        </div>
+        {/* Full Logo (Large) */}
+        <div className="hidden lg:flex items-center gap-3 font-bold text-xl tracking-tighter dark:text-white text-black">
+          <svg
+            width="42"
+            height="42"
+            viewBox="0 0 100 100"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className="shrink-0"
+          >
+            <title>Logo</title>
+            <path
+              d="M25 25 L50 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M25 75 L50 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+            <path
+              d="M50 50 L75 50"
+              stroke="currentColor"
+              strokeWidth="4"
+              strokeLinecap="round"
+            />
+
+            <circle cx="25" cy="25" r="8" fill="currentColor" stroke="none" />
+            <circle cx="25" cy="50" r="8" fill="currentColor" stroke="none" />
+            <circle cx="25" cy="75" r="8" fill="currentColor" stroke="none" />
+
+            <circle
+              cx="50"
+              cy="25"
+              r="7"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeDasharray="4 2"
+              fill="none"
+              className="opacity-30"
+            />
+            <circle
+              cx="50"
+              cy="75"
+              r="7"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeDasharray="4 2"
+              fill="none"
+              className="opacity-30"
+            />
+            <circle cx="50" cy="50" r="10" fill="currentColor" stroke="none" />
+            <circle cx="75" cy="50" r="8" fill="currentColor" stroke="none" />
+          </svg>
+
+          <span>DROPOUT</span>
+        </div>
+      </div>
+
+      {/* Navigation */}
+      <nav className="flex-1 w-full flex flex-col gap-1 px-3">
+        <NavItem view="home" Icon={Home} label="Overview" to="/" />
+        <NavItem
+          view="instances"
+          Icon={Folder}
+          label="Instances"
+          to="/instances"
+        />
+        <NavItem
+          view="versions"
+          Icon={Package}
+          label="Versions"
+          to="/versions"
+        />
+        <NavItem view="guide" Icon={Bot} label="Assistant" to="/guide" />
+        <NavItem
+          view="settings"
+          Icon={Settings}
+          label="Settings"
+          to="/settings"
+        />
+      </nav>
+
+      {/* Footer Info */}
+      <div className="p-4 w-full flex justify-center lg:justify-start lg:px-6 opacity-40 hover:opacity-100 transition-opacity">
+        <div className="text-[10px] font-mono text-zinc-500 uppercase tracking-wider">
+          v{uiStore.appVersion}
+        </div>
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/ui-new/src/components/ui/badge.tsx b/packages/ui-new/src/components/ui/badge.tsx
new file mode 100644
index 0000000..ccfa4e7
--- /dev/null
+++ b/packages/ui-new/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/packages/ui-new/src/components/ui/button.tsx b/packages/ui-new/src/components/ui/button.tsx
new file mode 100644
index 0000000..37a7d4b
--- /dev/null
+++ b/packages/ui-new/src/components/ui/button.tsx
@@ -0,0 +1,62 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
diff --git a/packages/ui-new/src/components/ui/card.tsx b/packages/ui-new/src/components/ui/card.tsx
new file mode 100644
index 0000000..681ad98
--- /dev/null
+++ b/packages/ui-new/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
diff --git a/packages/ui-new/src/components/ui/checkbox.tsx b/packages/ui-new/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..cb0b07b
--- /dev/null
+++ b/packages/ui-new/src/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/packages/ui-new/src/components/ui/dialog.tsx b/packages/ui-new/src/components/ui/dialog.tsx
new file mode 100644
index 0000000..60cc10e
--- /dev/null
+++ b/packages/ui-new/src/components/ui/dialog.tsx
@@ -0,0 +1,141 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
diff --git a/packages/ui-new/src/components/ui/input.tsx b/packages/ui-new/src/components/ui/input.tsx
new file mode 100644
index 0000000..8916905
--- /dev/null
+++ b/packages/ui-new/src/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
diff --git a/packages/ui-new/src/components/ui/label.tsx b/packages/ui-new/src/components/ui/label.tsx
new file mode 100644
index 0000000..fb5fbc3
--- /dev/null
+++ b/packages/ui-new/src/components/ui/label.tsx
@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }
diff --git a/packages/ui-new/src/components/ui/scroll-area.tsx b/packages/ui-new/src/components/ui/scroll-area.tsx
new file mode 100644
index 0000000..9376f59
--- /dev/null
+++ b/packages/ui-new/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
+import * as React from "react"
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+
+import { cn } from "@/lib/utils"
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" &&
+          "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" &&
+          "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
+
+export { ScrollArea, ScrollBar }
diff --git a/packages/ui-new/src/components/ui/select.tsx b/packages/ui-new/src/components/ui/select.tsx
new file mode 100644
index 0000000..b8aab97
--- /dev/null
+++ b/packages/ui-new/src/components/ui/select.tsx
@@ -0,0 +1,188 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "item-aligned",
+  align = "center",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span
+        data-slot="select-item-indicator"
+        className="absolute right-2 flex size-3.5 items-center justify-center"
+      >
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
diff --git a/packages/ui-new/src/components/ui/separator.tsx b/packages/ui-new/src/components/ui/separator.tsx
new file mode 100644
index 0000000..275381c
--- /dev/null
+++ b/packages/ui-new/src/components/ui/separator.tsx
@@ -0,0 +1,28 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }
diff --git a/packages/ui-new/src/components/ui/sonner.tsx b/packages/ui-new/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..9f46e06
--- /dev/null
+++ b/packages/ui-new/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/packages/ui-new/src/components/ui/switch.tsx b/packages/ui-new/src/components/ui/switch.tsx
new file mode 100644
index 0000000..b0363e3
--- /dev/null
+++ b/packages/ui-new/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
+import * as React from "react"
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        )}
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/packages/ui-new/src/components/ui/tabs.tsx b/packages/ui-new/src/components/ui/tabs.tsx
new file mode 100644
index 0000000..497ba5e
--- /dev/null
+++ b/packages/ui-new/src/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
diff --git a/packages/ui-new/src/components/ui/textarea.tsx b/packages/ui-new/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/packages/ui-new/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
diff --git a/packages/ui-new/src/index.css b/packages/ui-new/src/index.css
new file mode 100644
index 0000000..917b793
--- /dev/null
+++ b/packages/ui-new/src/index.css
@@ -0,0 +1,300 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: #f3f4f6; /* bg-gray-100 */
+  --foreground: #18181b; /* zinc-900 */
+  --card: #ffffff;
+  --card-foreground: #18181b;
+  --popover: #ffffff;
+  --popover-foreground: #18181b;
+  --primary: #4f46e5; /* indigo-600 */
+  --primary-foreground: #ffffff;
+  --secondary: #f4f4f5; /* zinc-100 */
+  --secondary-foreground: #18181b;
+  --muted: #f4f4f5; /* zinc-100 */
+  --muted-foreground: #71717a; /* zinc-500 */
+  --accent: #f4f4f5; /* zinc-100 */
+  --accent-foreground: #18181b;
+  --destructive: #ef4444; /* red-500 */
+  --destructive-foreground: #ffffff;
+  --border: #e4e4e7; /* zinc-200 */
+  --input: #ffffff;
+  --ring: #6366f1; /* indigo-500 */
+  --chart-1: #059669; /* emerald-600 */
+  --chart-2: #0d9488; /* teal-600 */
+  --chart-3: #4f46e5; /* indigo-600 */
+  --chart-4: #7c3aed; /* violet-600 */
+  --chart-5: #dc2626; /* red-600 */
+  --sidebar: #ffffff;
+  --sidebar-foreground: #18181b;
+  --sidebar-primary: #4f46e5; /* indigo-600 */
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f4f4f5; /* zinc-100 */
+  --sidebar-accent-foreground: #18181b;
+  --sidebar-border: #e4e4e7; /* zinc-200 */
+  --sidebar-ring: #6366f1; /* indigo-500 */
+}
+
+.dark {
+  --background: #09090b;
+  --foreground: #fafafa; /* zinc-50 */
+  --card: #18181b; /* zinc-900 */
+  --card-foreground: #fafafa;
+  --popover: #18181b;
+  --popover-foreground: #fafafa;
+  --primary: #6366f1; /* indigo-500 */
+  --primary-foreground: #ffffff;
+  --secondary: #27272a; /* zinc-800 */
+  --secondary-foreground: #fafafa;
+  --muted: #27272a; /* zinc-800 */
+  --muted-foreground: #a1a1aa; /* zinc-400 */
+  --accent: #27272a; /* zinc-800 */
+  --accent-foreground: #fafafa;
+  --destructive: #f87171; /* red-400 */
+  --destructive-foreground: #ffffff;
+  --border: #3f3f46; /* zinc-700 */
+  --input: rgba(255, 255, 255, 0.15);
+  --ring: #6366f1; /* indigo-500 */
+  --chart-1: #10b981; /* emerald-500 */
+  --chart-2: #06b6d4; /* cyan-500 */
+  --chart-3: #6366f1; /* indigo-500 */
+  --chart-4: #8b5cf6; /* violet-500 */
+  --chart-5: #f87171; /* red-400 */
+  --sidebar: #09090b;
+  --sidebar-foreground: #fafafa;
+  --sidebar-primary: #6366f1; /* indigo-500 */
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #27272a; /* zinc-800 */
+  --sidebar-accent-foreground: #fafafa;
+  --sidebar-border: #3f3f46; /* zinc-700 */
+  --sidebar-ring: #6366f1; /* indigo-500 */
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  ::selection {
+    @apply bg-indigo-500/30;
+  }
+
+  /* Custom Scrollbar */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: #3f3f46 transparent;
+  }
+
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: #3f3f46;
+    border-radius: 4px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: #52525b;
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+
+  /* Input/Form Element Consistency */
+  input[type="text"],
+  input[type="number"],
+  input[type="password"],
+  input[type="email"],
+  textarea {
+    background-color: rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  input[type="text"]:focus,
+  input[type="number"]:focus,
+  input[type="password"]:focus,
+  input[type="email"]:focus,
+  textarea:focus {
+    border-color: rgba(99, 102, 241, 0.5);
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
+    outline: none;
+  }
+
+  /* Number input - hide spinner */
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  /* Checkbox Styling */
+  input[type="checkbox"] {
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border: 1px solid #3f3f46;
+    border-radius: 4px;
+    background-color: #18181b;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.15s ease;
+  }
+
+  input[type="checkbox"]:hover {
+    border-color: #52525b;
+  }
+
+  input[type="checkbox"]:checked {
+    background-color: #4f46e5;
+    border-color: #4f46e5;
+  }
+
+  input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+  }
+
+  input[type="checkbox"]:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
+  }
+
+  /* Custom Select/Dropdown Styles */
+  select {
+    appearance: none;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2371717a'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 0.5rem center;
+    background-size: 1rem;
+    padding-right: 2rem;
+  }
+
+  /* Option styling - works in WebView/Chromium */
+  select option {
+    background-color: #18181b;
+    color: #e4e4e7;
+    padding: 12px 16px;
+    font-size: 13px;
+    border: none;
+  }
+
+  select option:hover,
+  select option:focus {
+    background-color: #3730a3 !important;
+    color: white !important;
+  }
+
+  select option:checked {
+    background: linear-gradient(0deg, #4f46e5 0%, #4f46e5 100%);
+    color: white;
+    font-weight: 500;
+  }
+
+  select option:disabled {
+    color: #52525b;
+    background-color: #18181b;
+  }
+
+  /* Optgroup styling */
+  select optgroup {
+    background-color: #18181b;
+    color: #a1a1aa;
+    font-weight: 600;
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    padding: 8px 12px 4px;
+  }
+
+  /* Select focus state */
+  select:focus {
+    outline: none;
+    border-color: #6366f1;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+  }
+
+  /* Global body styles from App.svelte */
+  body {
+    margin: 0;
+    padding: 0;
+    background: #000;
+  }
+
+  /* Window Drag Region */
+  .drag-region {
+    -webkit-app-region: drag;
+    app-region: drag;
+  }
+}
diff --git a/packages/ui-new/src/lib/effects/SaturnEffect.ts b/packages/ui-new/src/lib/effects/SaturnEffect.ts
new file mode 100644
index 0000000..497a340
--- /dev/null
+++ b/packages/ui-new/src/lib/effects/SaturnEffect.ts
@@ -0,0 +1,299 @@
+/**
+ * Ported SaturnEffect for the React UI (ui-new).
+ * Adapted from the original Svelte implementation but written as a standalone
+ * TypeScript class that manages a 2D canvas particle effect resembling a
+ * rotating "Saturn" with rings. Designed to be instantiated and controlled
+ * from a React component (e.g. ParticleBackground).
+ *
+ * Usage:
+ *   const effect = new SaturnEffect(canvasElement);
+ *   effect.handleMouseDown(clientX);
+ *   effect.handleMouseMove(clientX);
+ *   effect.handleMouseUp();
+ *   // on resize:
+ *   effect.resize(width, height);
+ *   // on unmount:
+ *   effect.destroy();
+ */
+
+export class SaturnEffect {
+  private canvas: HTMLCanvasElement;
+  private ctx: CanvasRenderingContext2D;
+  private width = 0;
+  private height = 0;
+
+  // Particle storage
+  private xyz: Float32Array | null = null; // interleaved x,y,z
+  private types: Uint8Array | null = null; // 0 = planet, 1 = ring
+  private count = 0;
+
+  // Animation
+  private animationId = 0;
+  private angle = 0;
+  private scaleFactor = 1;
+
+  // Interaction
+  private isDragging = false;
+  private lastMouseX = 0;
+  private lastMouseTime = 0;
+  private mouseVelocities: number[] = [];
+
+  // Speed control
+  private readonly baseSpeed = 0.005;
+  private currentSpeed = 0.005;
+  private rotationDirection = 1;
+  private readonly speedDecayRate = 0.992;
+  private readonly minSpeedMultiplier = 1;
+  private readonly maxSpeedMultiplier = 50;
+  private isStopped = false;
+
+  constructor(canvas: HTMLCanvasElement) {
+    this.canvas = canvas;
+    const ctx = canvas.getContext("2d", { alpha: true, desynchronized: false });
+    if (!ctx) {
+      throw new Error("Failed to get 2D context for SaturnEffect");
+    }
+    this.ctx = ctx;
+
+    // Initialize size & particles
+    this.resize(window.innerWidth, window.innerHeight);
+    this.initParticles();
+
+    this.animate = this.animate.bind(this);
+    this.animate();
+  }
+
+  // External interaction handlers (accept clientX)
+  handleMouseDown(clientX: number) {
+    this.isDragging = true;
+    this.lastMouseX = clientX;
+    this.lastMouseTime = performance.now();
+    this.mouseVelocities = [];
+  }
+
+  handleMouseMove(clientX: number) {
+    if (!this.isDragging) return;
+    const now = performance.now();
+    const dt = now - this.lastMouseTime;
+    if (dt > 0) {
+      const dx = clientX - this.lastMouseX;
+      const velocity = dx / dt;
+      this.mouseVelocities.push(velocity);
+      if (this.mouseVelocities.length > 5) this.mouseVelocities.shift();
+      // Rotate directly while dragging for immediate feedback
+      this.angle += dx * 0.002;
+    }
+    this.lastMouseX = clientX;
+    this.lastMouseTime = now;
+  }
+
+  handleMouseUp() {
+    if (this.isDragging && this.mouseVelocities.length > 0) {
+      this.applyFlingVelocity();
+    }
+    this.isDragging = false;
+  }
+
+  handleTouchStart(clientX: number) {
+    this.handleMouseDown(clientX);
+  }
+
+  handleTouchMove(clientX: number) {
+    this.handleMouseMove(clientX);
+  }
+
+  handleTouchEnd() {
+    this.handleMouseUp();
+  }
+
+  // Resize canvas & scale (call on window resize)
+  resize(width: number, height: number) {
+    const dpr = window.devicePixelRatio || 1;
+    this.width = width;
+    this.height = height;
+
+    // Update canvas pixel size and CSS size
+    this.canvas.width = Math.max(1, Math.floor(width * dpr));
+    this.canvas.height = Math.max(1, Math.floor(height * dpr));
+    this.canvas.style.width = `${width}px`;
+    this.canvas.style.height = `${height}px`;
+
+    // Reset transform and scale for devicePixelRatio
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0); // reset
+    this.ctx.scale(dpr, dpr);
+
+    const minDim = Math.min(width, height);
+    this.scaleFactor = Math.max(1, minDim * 0.45);
+  }
+
+  // Initialize particle arrays with reduced counts to keep performance reasonable
+  private initParticles() {
+    // Tuned particle counts for reasonable performance across platforms
+    const planetCount = 1000;
+    const ringCount = 2500;
+    this.count = planetCount + ringCount;
+
+    this.xyz = new Float32Array(this.count * 3);
+    this.types = new Uint8Array(this.count);
+
+    let idx = 0;
+
+    // Planet points
+    for (let i = 0; i < planetCount; i++, idx++) {
+      const theta = Math.random() * Math.PI * 2;
+      const phi = Math.acos(Math.random() * 2 - 1);
+      const r = 1.0;
+
+      this.xyz[idx * 3] = r * Math.sin(phi) * Math.cos(theta);
+      this.xyz[idx * 3 + 1] = r * Math.sin(phi) * Math.sin(theta);
+      this.xyz[idx * 3 + 2] = r * Math.cos(phi);
+
+      this.types[idx] = 0;
+    }
+
+    // Ring points
+    const ringInner = 1.4;
+    const ringOuter = 2.3;
+    for (let i = 0; i < ringCount; i++, idx++) {
+      const angle = Math.random() * Math.PI * 2;
+      const dist = Math.sqrt(
+        Math.random() * (ringOuter * ringOuter - ringInner * ringInner) +
+          ringInner * ringInner,
+      );
+
+      this.xyz[idx * 3] = dist * Math.cos(angle);
+      this.xyz[idx * 3 + 1] = (Math.random() - 0.5) * 0.05;
+      this.xyz[idx * 3 + 2] = dist * Math.sin(angle);
+
+      this.types[idx] = 1;
+    }
+  }
+
+  // Map fling/velocity samples to a rotation speed and direction
+  private applyFlingVelocity() {
+    if (this.mouseVelocities.length === 0) return;
+    const avg =
+      this.mouseVelocities.reduce((a, b) => a + b, 0) /
+      this.mouseVelocities.length;
+    const flingThreshold = 0.3;
+    const stopThreshold = 0.1;
+
+    if (Math.abs(avg) > flingThreshold) {
+      this.isStopped = false;
+      const newDir = avg > 0 ? 1 : -1;
+      if (newDir !== this.rotationDirection) this.rotationDirection = newDir;
+      const multiplier = Math.min(
+        this.maxSpeedMultiplier,
+        this.minSpeedMultiplier + Math.abs(avg) * 10,
+      );
+      this.currentSpeed = this.baseSpeed * multiplier;
+    } else if (Math.abs(avg) < stopThreshold) {
+      this.isStopped = true;
+      this.currentSpeed = 0;
+    }
+  }
+
+  // Main render loop
+  private animate() {
+    // Clear with full alpha to allow layering over background
+    this.ctx.clearRect(0, 0, this.width, this.height);
+
+    // Standard composition
+    this.ctx.globalCompositeOperation = "source-over";
+
+    // Update rotation speed (decay)
+    if (!this.isDragging && !this.isStopped) {
+      if (this.currentSpeed > this.baseSpeed) {
+        this.currentSpeed =
+          this.baseSpeed +
+          (this.currentSpeed - this.baseSpeed) * this.speedDecayRate;
+        if (this.currentSpeed - this.baseSpeed < 0.00001) {
+          this.currentSpeed = this.baseSpeed;
+        }
+      }
+      this.angle += this.currentSpeed * this.rotationDirection;
+    }
+
+    // Center positions
+    const cx = this.width * 0.6;
+    const cy = this.height * 0.5;
+
+    // Pre-calc rotations
+    const rotationY = this.angle;
+    const rotationX = 0.4;
+    const rotationZ = 0.15;
+
+    const sinY = Math.sin(rotationY);
+    const cosY = Math.cos(rotationY);
+    const sinX = Math.sin(rotationX);
+    const cosX = Math.cos(rotationX);
+    const sinZ = Math.sin(rotationZ);
+    const cosZ = Math.cos(rotationZ);
+
+    const fov = 1500;
+    const scaleFactor = this.scaleFactor;
+
+    if (!this.xyz || !this.types) {
+      this.animationId = requestAnimationFrame(this.animate);
+      return;
+    }
+
+    // Loop particles
+    for (let i = 0; i < this.count; i++) {
+      const x = this.xyz[i * 3];
+      const y = this.xyz[i * 3 + 1];
+      const z = this.xyz[i * 3 + 2];
+
+      // Scale to screen
+      const px = x * scaleFactor;
+      const py = y * scaleFactor;
+      const pz = z * scaleFactor;
+
+      // Rotate Y then X then Z
+      const x1 = px * cosY - pz * sinY;
+      const z1 = pz * cosY + px * sinY;
+      const y2 = py * cosX - z1 * sinX;
+      const z2 = z1 * cosX + py * sinX;
+      const x3 = x1 * cosZ - y2 * sinZ;
+      const y3 = y2 * cosZ + x1 * sinZ;
+      const z3 = z2;
+
+      const scale = fov / (fov + z3);
+
+      if (z3 > -fov) {
+        const x2d = cx + x3 * scale;
+        const y2d = cy + y3 * scale;
+
+        const type = this.types[i];
+        const sizeBase = type === 0 ? 2.4 : 1.5;
+        const size = sizeBase * scale;
+
+        let alpha = scale * scale * scale;
+        if (alpha > 1) alpha = 1;
+        if (alpha < 0.15) continue;
+
+        if (type === 0) {
+          // Planet: warm-ish
+          this.ctx.fillStyle = `rgba(255, 240, 220, ${alpha})`;
+        } else {
+          // Ring: cool-ish
+          this.ctx.fillStyle = `rgba(220, 240, 255, ${alpha})`;
+        }
+
+        // Render as small rectangles (faster than arc)
+        this.ctx.fillRect(x2d, y2d, size, size);
+      }
+    }
+
+    this.animationId = requestAnimationFrame(this.animate);
+  }
+
+  // Stop animations and release resources
+  destroy() {
+    if (this.animationId) {
+      cancelAnimationFrame(this.animationId);
+      this.animationId = 0;
+    }
+    // Intentionally do not null out arrays to allow reuse if desired.
+  }
+}
diff --git a/packages/ui-new/src/lib/tsrs-utils.ts b/packages/ui-new/src/lib/tsrs-utils.ts
new file mode 100644
index 0000000..f48f851
--- /dev/null
+++ b/packages/ui-new/src/lib/tsrs-utils.ts
@@ -0,0 +1,67 @@
+export type Maybe<T> = T | null | undefined;
+
+export function toNumber(
+  value: Maybe<number | bigint | string>,
+  fallback = 0,
+): number {
+  if (value === null || value === undefined) return fallback;
+
+  if (typeof value === "number") {
+    if (Number.isFinite(value)) return value;
+    return fallback;
+  }
+
+  if (typeof value === "bigint") {
+    // safe conversion for typical values (timestamps, sizes). Might overflow for huge bigint.
+    return Number(value);
+  }
+
+  if (typeof value === "string") {
+    const n = Number(value);
+    return Number.isFinite(n) ? n : fallback;
+  }
+
+  return fallback;
+}
+
+/**
+ * Like `toNumber` but ensures non-negative result (clamps at 0).
+ */
+export function toNonNegativeNumber(
+  value: Maybe<number | bigint | string>,
+  fallback = 0,
+): number {
+  const n = toNumber(value, fallback);
+  return n < 0 ? 0 : n;
+}
+
+export function toDate(
+  value: Maybe<number | bigint | string>,
+  opts?: { isSeconds?: boolean },
+): Date | null {
+  if (value === null || value === undefined) return null;
+
+  const isSeconds = opts?.isSeconds ?? true;
+
+  // accept bigint, number, numeric string
+  const n = toNumber(value, NaN);
+  if (Number.isNaN(n)) return null;
+
+  const ms = isSeconds ? Math.floor(n) * 1000 : Math.floor(n);
+  return new Date(ms);
+}
+
+/**
+ * Convert a binding boolean-ish value (0/1, "true"/"false", boolean) to boolean.
+ */
+export function toBoolean(value: unknown, fallback = false): boolean {
+  if (value === null || value === undefined) return fallback;
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return value !== 0;
+  if (typeof value === "string") {
+    const s = value.toLowerCase().trim();
+    if (s === "true" || s === "1") return true;
+    if (s === "false" || s === "0") return false;
+  }
+  return fallback;
+}
diff --git a/packages/ui-new/src/lib/utils.ts b/packages/ui-new/src/lib/utils.ts
new file mode 100644
index 0000000..365058c
--- /dev/null
+++ b/packages/ui-new/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/packages/ui-new/src/main.tsx b/packages/ui-new/src/main.tsx
new file mode 100644
index 0000000..e2ae9c2
--- /dev/null
+++ b/packages/ui-new/src/main.tsx
@@ -0,0 +1,48 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import { createHashRouter, RouterProvider } from "react-router";
+import { Toaster } from "./components/ui/sonner";
+import { AssistantView } from "./pages/assistant-view";
+import { HomeView } from "./pages/home-view";
+import { IndexPage } from "./pages/index";
+import { InstancesView } from "./pages/instances-view";
+import { SettingsView } from "./pages/settings-view";
+import { VersionsView } from "./pages/versions-view";
+
+const router = createHashRouter([
+  {
+    path: "/",
+    element: <IndexPage />,
+    children: [
+      {
+        index: true,
+        element: <HomeView />,
+      },
+      {
+        path: "instances",
+        element: <InstancesView />,
+      },
+      {
+        path: "versions",
+        element: <VersionsView />,
+      },
+      {
+        path: "settings",
+        element: <SettingsView />,
+      },
+      {
+        path: "guide",
+        element: <AssistantView />,
+      },
+    ],
+  },
+]);
+
+const root = createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <StrictMode>
+    <RouterProvider router={router} />
+    <Toaster />
+  </StrictMode>,
+);
diff --git a/packages/ui-new/src/pages/assistant-view.tsx b/packages/ui-new/src/pages/assistant-view.tsx
new file mode 100644
index 0000000..56f827b
--- /dev/null
+++ b/packages/ui-new/src/pages/assistant-view.tsx
@@ -0,0 +1,485 @@
+import {
+  AlertTriangle,
+  Bot,
+  Brain,
+  ChevronDown,
+  Loader2,
+  RefreshCw,
+  Send,
+  Settings,
+  Trash2,
+} from "lucide-react";
+import { marked } from "marked";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Textarea } from "@/components/ui/textarea";
+import { toNumber } from "@/lib/tsrs-utils";
+import { type Message, useAssistantStore } from "../stores/assistant-store";
+import { useSettingsStore } from "../stores/settings-store";
+import { useUiStore } from "../stores/ui-store";
+
+interface ParsedMessage {
+  thinking: string | null;
+  content: string;
+  isThinking: boolean;
+}
+
+function parseMessageContent(content: string): ParsedMessage {
+  if (!content) return { thinking: null, content: "", isThinking: false };
+
+  // Support both <thinking> and <think> (DeepSeek uses <think>)
+  let startTag = "<thinking>";
+  let endTag = "</thinking>";
+  let startIndex = content.indexOf(startTag);
+
+  if (startIndex === -1) {
+    startTag = "<think>";
+    endTag = "</think>";
+    startIndex = content.indexOf(startTag);
+  }
+
+  // Also check for encoded tags if they weren't decoded properly
+  if (startIndex === -1) {
+    startTag = "\u003cthink\u003e";
+    endTag = "\u003c/think\u003e";
+    startIndex = content.indexOf(startTag);
+  }
+
+  if (startIndex !== -1) {
+    const endIndex = content.indexOf(endTag, startIndex);
+
+    if (endIndex !== -1) {
+      // Completed thinking block
+      const before = content.substring(0, startIndex);
+      const thinking = content
+        .substring(startIndex + startTag.length, endIndex)
+        .trim();
+      const after = content.substring(endIndex + endTag.length);
+
+      return {
+        thinking,
+        content: (before + after).trim(),
+        isThinking: false,
+      };
+    } else {
+      // Incomplete thinking block (still streaming)
+      const before = content.substring(0, startIndex);
+      const thinking = content.substring(startIndex + startTag.length).trim();
+
+      return {
+        thinking,
+        content: before.trim(),
+        isThinking: true,
+      };
+    }
+  }
+
+  return { thinking: null, content, isThinking: false };
+}
+
+function renderMarkdown(content: string): string {
+  if (!content) return "";
+  try {
+    return marked(content, { breaks: true, gfm: true }) as string;
+  } catch {
+    return content;
+  }
+}
+
+export function AssistantView() {
+  const {
+    messages,
+    isProcessing,
+    isProviderHealthy,
+    streamingContent,
+    init,
+    checkHealth,
+    sendMessage,
+    clearHistory,
+  } = useAssistantStore();
+  const { settings } = useSettingsStore();
+  const { setView } = useUiStore();
+
+  const [input, setInput] = useState("");
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const messagesContainerRef = useRef<HTMLDivElement>(null);
+
+  const provider = settings.assistant.llmProvider;
+  const endpoint =
+    provider === "ollama"
+      ? settings.assistant.ollamaEndpoint
+      : settings.assistant.openaiEndpoint;
+  const model =
+    provider === "ollama"
+      ? settings.assistant.ollamaModel
+      : settings.assistant.openaiModel;
+
+  const getProviderName = (): string => {
+    if (provider === "ollama") {
+      return `Ollama (${model})`;
+    } else if (provider === "openai") {
+      return `OpenAI (${model})`;
+    }
+    return provider;
+  };
+
+  const getProviderHelpText = (): string => {
+    if (provider === "ollama") {
+      return `Please ensure Ollama is installed and running at ${endpoint}.`;
+    } else if (provider === "openai") {
+      return "Please check your OpenAI API key in Settings > AI Assistant.";
+    }
+    return "";
+  };
+
+  const scrollToBottom = useCallback(() => {
+    if (messagesContainerRef.current) {
+      setTimeout(() => {
+        if (messagesContainerRef.current) {
+          messagesContainerRef.current.scrollTop =
+            messagesContainerRef.current.scrollHeight;
+        }
+      }, 0);
+    }
+  }, []);
+
+  useEffect(() => {
+    init();
+  }, [init]);
+
+  useEffect(() => {
+    if (messages.length > 0 || isProcessing) {
+      scrollToBottom();
+    }
+  }, [messages.length, isProcessing, scrollToBottom]);
+
+  const handleSubmit = async () => {
+    if (!input.trim() || isProcessing) return;
+    const text = input;
+    setInput("");
+    await sendMessage(text, settings.assistant.enabled, provider, endpoint);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
+  const renderMessage = (message: Message, index: number) => {
+    const isUser = message.role === "user";
+    const parsed = parseMessageContent(message.content);
+
+    return (
+      <div
+        key={index}
+        className={`flex ${isUser ? "justify-end" : "justify-start"} mb-4`}
+      >
+        <div
+          className={`max-w-[80%] rounded-2xl px-4 py-3 ${
+            isUser
+              ? "bg-indigo-500 text-white rounded-br-none"
+              : "bg-zinc-800 text-zinc-100 rounded-bl-none"
+          }`}
+        >
+          {!isUser && parsed.thinking && (
+            <div className="mb-3 max-w-full overflow-hidden">
+              <details className="group" open={parsed.isThinking}>
+                <summary className="list-none cursor-pointer flex items-center gap-2 text-zinc-500 hover:text-zinc-300 transition-colors text-xs font-medium select-none bg-black/20 p-2 rounded-lg border border-white/5 w-fit mb-2 outline-none">
+                  <Brain className="h-3 w-3" />
+                  <span>Thinking Process</span>
+                  <ChevronDown className="h-3 w-3 transition-transform duration-200 group-open:rotate-180" />
+                </summary>
+                <div className="pl-3 border-l-2 border-zinc-700 text-zinc-500 text-xs italic leading-relaxed whitespace-pre-wrap font-mono max-h-96 overflow-y-auto custom-scrollbar bg-black/10 p-2 rounded-r-md">
+                  {parsed.thinking}
+                  {parsed.isThinking && (
+                    <span className="inline-block w-1.5 h-3 bg-zinc-500 ml-1 animate-pulse align-middle" />
+                  )}
+                </div>
+              </details>
+            </div>
+          )}
+          <div
+            className="prose prose-invert max-w-none"
+            dangerouslySetInnerHTML={{
+              __html: renderMarkdown(parsed.content),
+            }}
+          />
+          {!isUser && message.stats && (
+            <div className="mt-2 pt-2 border-t border-zinc-700/50">
+              <div className="text-xs text-zinc-400">
+                {message.stats.evalCount} tokens ·{" "}
+                {Math.round(toNumber(message.stats.totalDuration) / 1000000)}
+                ms
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-full w-full flex flex-col gap-4 p-4 lg:p-8">
+      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center gap-3">
+          <div className="p-2 bg-indigo-500/20 rounded-lg text-indigo-400">
+            <Bot size={24} />
+          </div>
+          <div>
+            <h2 className="text-2xl font-bold">Game Assistant</h2>
+            <p className="text-zinc-400 text-sm">
+              Powered by {getProviderName()}
+            </p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {!settings.assistant.enabled ? (
+            <Badge
+              variant="outline"
+              className="bg-zinc-500/10 text-zinc-400 border-zinc-500/20"
+            >
+              <AlertTriangle className="h-3 w-3 mr-1" />
+              Disabled
+            </Badge>
+          ) : !isProviderHealthy ? (
+            <Badge
+              variant="outline"
+              className="bg-red-500/10 text-red-400 border-red-500/20"
+            >
+              <AlertTriangle className="h-3 w-3 mr-1" />
+              Offline
+            </Badge>
+          ) : (
+            <Badge
+              variant="outline"
+              className="bg-emerald-500/10 text-emerald-400 border-emerald-500/20"
+            >
+              <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse mr-1" />
+              Online
+            </Badge>
+          )}
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={checkHealth}
+            title="Check Connection"
+            disabled={isProcessing}
+          >
+            <RefreshCw
+              className={`h-4 w-4 ${isProcessing ? "animate-spin" : ""}`}
+            />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={clearHistory}
+            title="Clear History"
+            disabled={isProcessing}
+          >
+            <Trash2 className="h-4 w-4" />
+          </Button>
+
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setView("settings")}
+            title="Settings"
+          >
+            <Settings className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+
+      {/* Chat Area */}
+      <div className="flex-1 bg-black/20 border border-white/5 rounded-xl overflow-hidden flex flex-col relative">
+        {/* Warning when assistant is disabled */}
+        {!settings.assistant.enabled && (
+          <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-10">
+            <Card className="bg-yellow-500/10 border-yellow-500/20">
+              <CardContent className="p-3 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4 text-yellow-500" />
+                <span className="text-yellow-500 text-sm font-medium">
+                  Assistant is disabled. Enable it in Settings &gt; AI
+                  Assistant.
+                </span>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
+        {/* Provider offline warning */}
+        {settings.assistant.enabled && !isProviderHealthy && (
+          <div className="absolute top-4 left-1/2 transform -translate-x-1/2 z-10">
+            <Card className="bg-red-500/10 border-red-500/20">
+              <CardContent className="p-3 flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4 text-red-500" />
+                <div className="flex flex-col">
+                  <span className="text-red-500 text-sm font-medium">
+                    Assistant is offline
+                  </span>
+                  <span className="text-red-400 text-xs">
+                    {getProviderHelpText()}
+                  </span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        )}
+
+        {/* Messages Container */}
+        <ScrollArea className="flex-1 p-4 lg:p-6" ref={messagesContainerRef}>
+          {messages.length === 0 ? (
+            <div className="flex flex-col items-center justify-center h-full text-zinc-400 gap-4 mt-8">
+              <div className="p-4 bg-zinc-800/50 rounded-full">
+                <Bot className="h-12 w-12" />
+              </div>
+              <h3 className="text-xl font-medium">How can I help you today?</h3>
+              <p className="text-center max-w-md text-sm">
+                I can analyze your game logs, diagnose crashes, or explain mod
+                features.
+                {!settings.assistant.enabled && (
+                  <span className="block mt-2 text-yellow-500">
+                    Assistant is disabled. Enable it in{" "}
+                    <button
+                      type="button"
+                      onClick={() => setView("settings")}
+                      className="text-indigo-400 hover:underline"
+                    >
+                      Settings &gt; AI Assistant
+                    </button>
+                    .
+                  </span>
+                )}
+              </p>
+              <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-2 max-w-lg">
+                <Button
+                  variant="outline"
+                  className="text-left h-auto py-3"
+                  onClick={() =>
+                    setInput("How do I fix Minecraft crashing on launch?")
+                  }
+                  disabled={isProcessing}
+                >
+                  <div className="text-sm">
+                    How do I fix Minecraft crashing on launch?
+                  </div>
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-left h-auto py-3"
+                  onClick={() =>
+                    setInput("What's the best way to improve FPS?")
+                  }
+                  disabled={isProcessing}
+                >
+                  <div className="text-sm">
+                    What's the best way to improve FPS?
+                  </div>
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-left h-auto py-3"
+                  onClick={() =>
+                    setInput(
+                      "Can you help me install Fabric for Minecraft 1.20.4?",
+                    )
+                  }
+                  disabled={isProcessing}
+                >
+                  <div className="text-sm">
+                    Can you help me install Fabric for 1.20.4?
+                  </div>
+                </Button>
+                <Button
+                  variant="outline"
+                  className="text-left h-auto py-3"
+                  onClick={() =>
+                    setInput("What mods do you recommend for performance?")
+                  }
+                  disabled={isProcessing}
+                >
+                  <div className="text-sm">
+                    What mods do you recommend for performance?
+                  </div>
+                </Button>
+              </div>
+            </div>
+          ) : (
+            <>
+              {messages.map((message, index) => renderMessage(message, index))}
+              {isProcessing && streamingContent && (
+                <div className="flex justify-start mb-4">
+                  <div className="max-w-[80%] bg-zinc-800 text-zinc-100 rounded-2xl rounded-bl-none px-4 py-3">
+                    <div
+                      className="prose prose-invert max-w-none"
+                      dangerouslySetInnerHTML={{
+                        __html: renderMarkdown(streamingContent),
+                      }}
+                    />
+                    <div className="flex items-center gap-1 mt-2 text-xs text-zinc-400">
+                      <Loader2 className="h-3 w-3 animate-spin" />
+                      <span>Assistant is typing...</span>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </>
+          )}
+          <div ref={messagesEndRef} />
+        </ScrollArea>
+
+        <Separator />
+
+        {/* Input Area */}
+        <div className="p-3 lg:p-4">
+          <div className="flex gap-2">
+            <Textarea
+              placeholder={
+                settings.assistant.enabled
+                  ? "Ask about your game..."
+                  : "Assistant is disabled. Enable it in Settings to use."
+              }
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={handleKeyDown}
+              className="min-h-11 max-h-50 resize-none border-zinc-700 bg-zinc-900/50 focus:bg-zinc-900/80"
+              disabled={!settings.assistant.enabled || isProcessing}
+            />
+            <Button
+              onClick={handleSubmit}
+              disabled={
+                !settings.assistant.enabled || !input.trim() || isProcessing
+              }
+              className="px-6 bg-indigo-600 hover:bg-indigo-700 text-white"
+            >
+              {isProcessing ? (
+                <Loader2 className="h-4 w-4 animate-spin" />
+              ) : (
+                <Send className="h-4 w-4" />
+              )}
+            </Button>
+          </div>
+          <div className="mt-2 flex items-center justify-between">
+            <div className="text-xs text-zinc-500">
+              {settings.assistant.enabled
+                ? "Press Enter to send, Shift+Enter for new line"
+                : "Enable the assistant in Settings to use"}
+            </div>
+            <div className="text-xs text-zinc-500">
+              Model: {model} • Provider: {provider}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/pages/home-view.tsx b/packages/ui-new/src/pages/home-view.tsx
new file mode 100644
index 0000000..bcee7e6
--- /dev/null
+++ b/packages/ui-new/src/pages/home-view.tsx
@@ -0,0 +1,382 @@
+import { Calendar, ExternalLink } from "lucide-react";
+import { useEffect, useState } from "react";
+import type { SaturnEffect } from "@/lib/effects/SaturnEffect";
+import { useGameStore } from "../stores/game-store";
+import { useReleasesStore } from "../stores/releases-store";
+
+export function HomeView() {
+  const gameStore = useGameStore();
+  const releasesStore = useReleasesStore();
+  const [mouseX, setMouseX] = useState(0);
+  const [mouseY, setMouseY] = useState(0);
+
+  useEffect(() => {
+    releasesStore.loadReleases();
+  }, [releasesStore.loadReleases]);
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    const x = (e.clientX / window.innerWidth) * 2 - 1;
+    const y = (e.clientY / window.innerHeight) * 2 - 1;
+    setMouseX(x);
+    setMouseY(y);
+
+    // Forward mouse move to SaturnEffect (if available) for parallax/rotation interactions
+    try {
+      const saturn = (
+        window as unknown as {
+          getSaturnEffect?: () => SaturnEffect;
+        }
+      ).getSaturnEffect?.();
+      if (saturn?.handleMouseMove) {
+        saturn.handleMouseMove(e.clientX);
+      }
+    } catch {
+      /* best-effort, ignore errors from effect */
+    }
+  };
+
+  const handleSaturnMouseDown = (e: React.MouseEvent) => {
+    try {
+      const saturn = (window as any).getSaturnEffect?.();
+      if (saturn?.handleMouseDown) {
+        saturn.handleMouseDown(e.clientX);
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleSaturnMouseUp = () => {
+    try {
+      const saturn = (window as any).getSaturnEffect?.();
+      if (saturn?.handleMouseUp) {
+        saturn.handleMouseUp();
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleSaturnMouseLeave = () => {
+    // Treat leaving the area as mouse-up for the effect
+    try {
+      const saturn = (window as any).getSaturnEffect?.();
+      if (saturn?.handleMouseUp) {
+        saturn.handleMouseUp();
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const handleSaturnTouchStart = (e: React.TouchEvent) => {
+    if (e.touches && e.touches.length === 1) {
+      try {
+        const clientX = e.touches[0].clientX;
+        const saturn = (window as any).getSaturnEffect?.();
+        if (saturn?.handleTouchStart) {
+          saturn.handleTouchStart(clientX);
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+  };
+
+  const handleSaturnTouchMove = (e: React.TouchEvent) => {
+    if (e.touches && e.touches.length === 1) {
+      try {
+        const clientX = e.touches[0].clientX;
+        const saturn = (window as any).getSaturnEffect?.();
+        if (saturn?.handleTouchMove) {
+          saturn.handleTouchMove(clientX);
+        }
+      } catch {
+        /* ignore */
+      }
+    }
+  };
+
+  const handleSaturnTouchEnd = () => {
+    try {
+      const saturn = (window as any).getSaturnEffect?.();
+      if (saturn?.handleTouchEnd) {
+        saturn.handleTouchEnd();
+      }
+    } catch {
+      /* ignore */
+    }
+  };
+
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  };
+
+  const escapeHtml = (unsafe: string) => {
+    return unsafe
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  };
+
+  const formatBody = (body: string) => {
+    if (!body) return "";
+
+    let processed = escapeHtml(body);
+
+    const emojiMap: Record<string, string> = {
+      ":tada:": "🎉",
+      ":sparkles:": "✨",
+      ":bug:": "🐛",
+      ":memo:": "📝",
+      ":rocket:": "🚀",
+      ":white_check_mark:": "✅",
+      ":construction:": "🚧",
+      ":recycle:": "♻️",
+      ":wrench:": "🔧",
+      ":package:": "📦",
+      ":arrow_up:": "⬆️",
+      ":arrow_down:": "⬇️",
+      ":warning:": "⚠️",
+      ":fire:": "🔥",
+      ":heart:": "❤️",
+      ":star:": "⭐",
+      ":zap:": "⚡",
+      ":art:": "🎨",
+      ":lipstick:": "💄",
+      ":globe_with_meridians:": "🌐",
+    };
+
+    processed = processed.replace(
+      /:[a-z0-9_]+:/g,
+      (match) => emojiMap[match] || match,
+    );
+
+    processed = processed.replace(/`([0-9a-f]{7,40})`/g, (_match, hash) => {
+      return `<a href="https://github.com/HydroRoll-Team/DropOut/commit/${hash}" target="_blank" class="text-emerald-500 hover:underline font-mono bg-emerald-500/10 px-1 rounded text-[10px] py-0.5 transition-colors border border-emerald-500/20 hover:border-emerald-500/50">${hash.substring(
+        0,
+        7,
+      )}</a>`;
+    });
+
+    processed = processed.replace(
+      /@([a-zA-Z0-9-]+)/g,
+      '<a href="https://github.com/$1" target="_blank" class="text-zinc-300 hover:text-white hover:underline font-medium">@$1</a>',
+    );
+
+    return processed
+      .split("\n")
+      .map((line) => {
+        line = line.trim();
+
+        const formatLine = (text: string) =>
+          text
+            .replace(
+              /\*\*(.*?)\*\*/g,
+              '<strong class="text-zinc-200">$1</strong>',
+            )
+            .replace(
+              /(?<!\*)\*([^*]+)\*(?!\*)/g,
+              '<em class="text-zinc-400 italic">$1</em>',
+            )
+            .replace(
+              /`([^`]+)`/g,
+              '<code class="bg-zinc-800 px-1 py-0.5 rounded text-xs text-zinc-300 font-mono border border-white/5 break-all whitespace-normal">$1</code>',
+            )
+            .replace(
+              /\[(.*?)\]\((.*?)\)/g,
+              '<a href="$2" target="_blank" class="text-indigo-400 hover:text-indigo-300 hover:underline decoration-indigo-400/30 break-all">$1</a>',
+            );
+
+        if (line.startsWith("- ") || line.startsWith("* ")) {
+          return `<li class="ml-4 list-disc marker:text-zinc-600 mb-1 pl-1 text-zinc-400">${formatLine(
+            line.substring(2),
+          )}</li>`;
+        }
+
+        if (line.startsWith("##")) {
+          return `<h3 class="text-sm font-bold mt-6 mb-3 text-zinc-100 flex items-center gap-2 border-b border-white/5 pb-2 uppercase tracking-wide">${line.replace(
+            /^#+\s+/,
+            "",
+          )}</h3>`;
+        }
+
+        if (line.startsWith("#")) {
+          return `<h3 class="text-base font-bold mt-6 mb-3 text-white">${line.replace(
+            /^#+\s+/,
+            "",
+          )}</h3>`;
+        }
+
+        if (line.startsWith("> ")) {
+          return `<blockquote class="border-l-2 border-zinc-700 pl-4 py-1 my-2 text-zinc-500 italic bg-white/5 rounded-r-sm">${formatLine(
+            line.substring(2),
+          )}</blockquote>`;
+        }
+
+        if (line === "") return '<div class="h-2"></div>';
+
+        return `<p class="mb-1.5 leading-relaxed">${formatLine(line)}</p>`;
+      })
+      .join("");
+  };
+
+  return (
+    <div
+      className="relative z-10 h-full overflow-y-auto custom-scrollbar scroll-smooth"
+      style={{
+        overflow: releasesStore.isLoading ? "hidden" : "auto",
+      }}
+    >
+      {/* Hero Section (Full Height) - Interactive area */}
+      <div
+        role="tab"
+        className="min-h-full flex flex-col justify-end p-12 pb-32 cursor-grab active:cursor-grabbing select-none"
+        onMouseDown={handleSaturnMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleSaturnMouseUp}
+        onMouseLeave={handleSaturnMouseLeave}
+        onTouchStart={handleSaturnTouchStart}
+        onTouchMove={handleSaturnTouchMove}
+        onTouchEnd={handleSaturnTouchEnd}
+        tabIndex={0}
+      >
+        {/* 3D Floating Hero Text */}
+        <div
+          className="transition-transform duration-200 ease-out origin-bottom-left"
+          style={{
+            transform: `perspective(1000px) rotateX(${mouseY * -1}deg) rotateY(${mouseX * 1}deg)`,
+          }}
+        >
+          <div className="flex items-center gap-3 mb-6">
+            <div className="h-px w-12 bg-white/50"></div>
+            <span className="text-xs font-mono font-bold tracking-[0.2em] text-white/50 uppercase">
+              Launcher Active
+            </span>
+          </div>
+
+          <h1 className="text-8xl font-black tracking-tighter text-white mb-6 leading-none">
+            MINECRAFT
+          </h1>
+
+          <div className="flex items-center gap-4">
+            <div className="bg-white/10 backdrop-blur-md border border-white/10 px-3 py-1 rounded-sm text-xs font-bold uppercase tracking-widest text-white shadow-sm">
+              Java Edition
+            </div>
+            <div className="h-4 w-px bg-white/20"></div>
+            <div className="text-sm text-zinc-400">
+              Latest Release{" "}
+              <span className="text-white font-medium">
+                {gameStore.latestRelease?.id || "..."}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Action Area */}
+        <div className="mt-8 flex gap-4">
+          <div className="text-zinc-500 text-sm font-mono">
+            &gt; Ready to launch session.
+          </div>
+        </div>
+
+        {/* Scroll Hint */}
+        {!releasesStore.isLoading && releasesStore.releases.length > 0 && (
+          <div className="absolute bottom-10 left-12 animate-bounce text-zinc-600 flex flex-col items-center gap-2 w-fit opacity-50 hover:opacity-100 transition-opacity">
+            <span className="text-[10px] font-mono uppercase tracking-widest">
+              Scroll for Updates
+            </span>
+            <svg
+              width="20"
+              height="20"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <title>Scroll for Updates</title>
+              <path d="M7 13l5 5 5-5M7 6l5 5 5-5" />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      {/* Changelog / Updates Section */}
+      <div className="bg-[#09090b] relative z-20 px-12 pb-24 pt-12 border-t border-white/5 min-h-[50vh]">
+        <div className="max-w-4xl">
+          <h2 className="text-2xl font-bold text-white mb-10 flex items-center gap-3">
+            <span className="w-1.5 h-8 bg-emerald-500 rounded-sm"></span>
+            LATEST UPDATES
+          </h2>
+
+          {releasesStore.isLoading ? (
+            <div className="flex flex-col gap-8">
+              {Array(3)
+                .fill(0)
+                .map((_, i) => (
+                  <div
+                    key={`release_skeleton_${i.toString()}`}
+                    className="h-48 bg-white/5 rounded-sm animate-pulse border border-white/5"
+                  ></div>
+                ))}
+            </div>
+          ) : releasesStore.error ? (
+            <div className="p-6 border border-red-500/20 bg-red-500/10 text-red-400 rounded-sm">
+              Failed to load updates: {releasesStore.error}
+            </div>
+          ) : releasesStore.releases.length === 0 ? (
+            <div className="text-zinc-500 italic">No releases found.</div>
+          ) : (
+            <div className="space-y-12">
+              {releasesStore.releases.map((release, index) => (
+                <div
+                  key={`${release.name}_${index.toString()}`}
+                  className="group relative pl-8 border-l border-white/10 pb-4 last:pb-0 last:border-l-0"
+                >
+                  {/* Timeline Dot */}
+                  <div className="absolute -left-1.25 top-1.5 w-2.5 h-2.5 rounded-full bg-zinc-800 border border-zinc-600 group-hover:bg-emerald-500 group-hover:border-emerald-400 transition-colors"></div>
+
+                  <div className="flex items-baseline gap-4 mb-3">
+                    <h3 className="text-xl font-bold text-white group-hover:text-emerald-400 transition-colors">
+                      {release.name || release.tagName}
+                    </h3>
+                    <div className="text-xs font-mono text-zinc-500 flex items-center gap-2">
+                      <Calendar size={12} />
+                      {formatDate(release.publishedAt)}
+                    </div>
+                  </div>
+
+                  <div className="bg-zinc-900/50 border border-white/5 hover:border-white/10 rounded-sm p-6 text-zinc-400 text-sm leading-relaxed transition-colors overflow-hidden">
+                    <div
+                      className="prose prose-invert prose-sm max-w-none prose-p:text-zinc-400 prose-headings:text-zinc-200 prose-ul:my-2 prose-li:my-0 break-words whitespace-normal"
+                      dangerouslySetInnerHTML={{
+                        __html: formatBody(release.body),
+                      }}
+                    />
+                  </div>
+
+                  <a
+                    href={release.htmlUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="inline-flex items-center gap-2 mt-3 text-[10px] font-bold uppercase tracking-wider text-zinc-600 hover:text-white transition-colors"
+                  >
+                    View full changelog on GitHub <ExternalLink size={10} />
+                  </a>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/pages/index.tsx b/packages/ui-new/src/pages/index.tsx
new file mode 100644
index 0000000..180cf0c
--- /dev/null
+++ b/packages/ui-new/src/pages/index.tsx
@@ -0,0 +1,189 @@
+import { useEffect } from "react";
+import { Outlet } from "react-router";
+import { BottomBar } from "@/components/bottom-bar";
+import { DownloadMonitor } from "@/components/download-monitor";
+import { GameConsole } from "@/components/game-console";
+import { LoginModal } from "@/components/login-modal";
+import { ParticleBackground } from "@/components/particle-background";
+import { Sidebar } from "@/components/sidebar";
+
+import { useAuthStore } from "@/stores/auth-store";
+import { useGameStore } from "@/stores/game-store";
+import { useInstancesStore } from "@/stores/instances-store";
+import { useLogsStore } from "@/stores/logs-store";
+import { useSettingsStore } from "@/stores/settings-store";
+import { useUIStore } from "@/stores/ui-store";
+
+export function IndexPage() {
+  const authStore = useAuthStore();
+  const settingsStore = useSettingsStore();
+  const uiStore = useUIStore();
+  const instancesStore = useInstancesStore();
+  const gameStore = useGameStore();
+  const logsStore = useLogsStore();
+  useEffect(() => {
+    // ENFORCE DARK MODE: Always add 'dark' class and attribute
+    document.documentElement.classList.add("dark");
+    document.documentElement.setAttribute("data-theme", "dark");
+    document.documentElement.classList.remove("light");
+
+    // Initialize stores
+    // Include store functions in the dependency array to satisfy hooks lint.
+    // These functions are stable in our store implementation, so listing them
+    // here is safe and prevents lint warnings.
+    authStore.checkAccount();
+    settingsStore.loadSettings();
+    logsStore.init();
+    settingsStore.detectJava();
+    instancesStore.loadInstances();
+    gameStore.loadVersions();
+
+    // Note: getVersion() would need Tauri API setup
+    // getVersion().then((v) => uiStore.setAppVersion(v));
+  }, [
+    authStore.checkAccount,
+    settingsStore.loadSettings,
+    logsStore.init,
+    settingsStore.detectJava,
+    instancesStore.loadInstances,
+    gameStore.loadVersions,
+  ]);
+
+  // Refresh versions when active instance changes
+  useEffect(() => {
+    if (instancesStore.activeInstanceId) {
+      gameStore.loadVersions();
+    } else {
+      gameStore.setVersions([]);
+    }
+  }, [
+    instancesStore.activeInstanceId,
+    gameStore.loadVersions,
+    gameStore.setVersions,
+  ]);
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden dark:text-white text-gray-900 font-sans selection:bg-indigo-500/30">
+      {/* Modern Animated Background */}
+      <div className="absolute inset-0 z-0 bg-gray-100 dark:bg-[#09090b] overflow-hidden">
+        {settingsStore.settings.customBackgroundPath && (
+          <img
+            src={settingsStore.settings.customBackgroundPath}
+            alt="Background"
+            className="absolute inset-0 w-full h-full object-cover transition-transform duration-[20s] ease-linear hover:scale-105"
+            onError={(e) => console.error("Failed to load main background:", e)}
+          />
+        )}
+
+        {/* Dimming Overlay for readability */}
+        {settingsStore.settings.customBackgroundPath && (
+          <div className="absolute inset-0 bg-black/50"></div>
+        )}
+
+        {!settingsStore.settings.customBackgroundPath && (
+          <>
+            {settingsStore.settings.theme === "dark" ? (
+              <div className="absolute inset-0 opacity-60 bg-linear-to-br from-emerald-900 via-zinc-900 to-indigo-950"></div>
+            ) : (
+              <div className="absolute inset-0 opacity-100 bg-linear-to-br from-emerald-100 via-gray-100 to-indigo-100"></div>
+            )}
+
+            {uiStore.currentView === "home" && <ParticleBackground />}
+
+            <div className="absolute inset-0 bg-linear-to-t from-zinc-900 via-transparent to-black/50 dark:from-zinc-900 dark:to-black/50"></div>
+          </>
+        )}
+
+        {/* Subtle Grid Overlay */}
+        <div
+          className="absolute inset-0 z-0 dark:opacity-10 opacity-30 pointer-events-none"
+          style={{
+            backgroundImage: `linear-gradient(${
+              settingsStore.settings.theme === "dark" ? "#ffffff" : "#000000"
+            } 1px, transparent 1px), linear-gradient(90deg, ${
+              settingsStore.settings.theme === "dark" ? "#ffffff" : "#000000"
+            } 1px, transparent 1px)`,
+            backgroundSize: "40px 40px",
+            maskImage:
+              "radial-gradient(circle at 50% 50%, black 30%, transparent 70%)",
+          }}
+        ></div>
+      </div>
+
+      {/* Content Wrapper */}
+      <div className="relative z-10 flex h-full p-4 gap-4 text-gray-900 dark:text-white">
+        {/* Floating Sidebar */}
+        <Sidebar />
+
+        {/* Main Content Area - Transparent & Flat */}
+        <main className="flex-1 flex flex-col relative min-w-0 overflow-hidden transition-all duration-300">
+          {/* Window Drag Region */}
+          <div
+            className="h-8 w-full absolute top-0 left-0 z-50 drag-region"
+            data-tauri-drag-region
+          ></div>
+
+          {/* App Content */}
+          <div className="flex-1 relative overflow-hidden flex flex-col">
+            {/* Views Container */}
+            <div className="flex-1 relative overflow-hidden">
+              <Outlet />
+            </div>
+
+            {/* Download Monitor Overlay */}
+            <div className="absolute bottom-20 left-4 right-4 pointer-events-none z-20">
+              <div className="pointer-events-auto">
+                <DownloadMonitor />
+              </div>
+            </div>
+
+            {/* Bottom Bar */}
+            {uiStore.currentView === "home" && <BottomBar />}
+          </div>
+        </main>
+      </div>
+
+      <LoginModal />
+
+      {/* Logout Confirmation Dialog */}
+      {authStore.isLogoutConfirmOpen && (
+        <div className="fixed inset-0 z-200 bg-black/70 backdrop-blur-sm flex items-center justify-center p-4">
+          <div className="bg-zinc-900 border border-zinc-700 rounded-xl shadow-2xl p-6 max-w-sm w-full animate-in fade-in zoom-in-95 duration-200">
+            <h3 className="text-lg font-bold text-white mb-2">Logout</h3>
+            <p className="text-zinc-400 text-sm mb-6">
+              Are you sure you want to logout{" "}
+              <span className="text-white font-medium">
+                {authStore.currentAccount?.username}
+              </span>
+              ?
+            </p>
+            <div className="flex gap-3 justify-end">
+              <button
+                type="button"
+                onClick={() => authStore.cancelLogout()}
+                className="px-4 py-2 text-sm font-medium text-zinc-300 hover:text-white bg-zinc-800 hover:bg-zinc-700 rounded-lg transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={() => authStore.confirmLogout()}
+                className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-500 rounded-lg transition-colors"
+              >
+                Logout
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {uiStore.showConsole && (
+        <div className="fixed inset-0 z-100 bg-black/80 backdrop-blur-sm flex items-center justify-center p-8">
+          <div className="w-full h-full max-w-6xl max-h-[85vh] bg-[#1e1e1e] rounded-lg overflow-hidden border border-zinc-700 shadow-2xl relative flex flex-col">
+            <GameConsole />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/pages/instances-view.tsx b/packages/ui-new/src/pages/instances-view.tsx
new file mode 100644
index 0000000..0c511a1
--- /dev/null
+++ b/packages/ui-new/src/pages/instances-view.tsx
@@ -0,0 +1,370 @@
+import { Copy, Edit2, Plus, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
+import InstanceEditorModal from "@/components/instance-editor-modal";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { toNumber } from "@/lib/tsrs-utils";
+import { useInstancesStore } from "@/stores/instances-store";
+import type { Instance } from "../types/bindings/instance";
+
+export function InstancesView() {
+  const instancesStore = useInstancesStore();
+
+  // Modal / UI state
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [showEditModal, setShowEditModal] = useState(false);
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+  const [showDuplicateModal, setShowDuplicateModal] = useState(false);
+
+  // Selected / editing instance state
+  const [selectedInstance, setSelectedInstance] = useState<Instance | null>(
+    null,
+  );
+  const [editingInstance, setEditingInstance] = useState<Instance | null>(null);
+
+  // Form fields
+  const [newInstanceName, setNewInstanceName] = useState("");
+  const [duplicateName, setDuplicateName] = useState("");
+
+  // Load instances on mount (matches Svelte onMount behavior)
+  useEffect(() => {
+    instancesStore.loadInstances();
+    // instancesStore methods are stable (Zustand); do not add to deps to avoid spurious runs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [instancesStore.loadInstances]);
+
+  // Handlers to open modals
+  const openCreate = () => {
+    setNewInstanceName("");
+    setShowCreateModal(true);
+  };
+
+  const openEdit = (instance: Instance) => {
+    setEditingInstance({ ...instance });
+    setShowEditModal(true);
+  };
+
+  const openDelete = (instance: Instance) => {
+    setSelectedInstance(instance);
+    setShowDeleteConfirm(true);
+  };
+
+  const openDuplicate = (instance: Instance) => {
+    setSelectedInstance(instance);
+    setDuplicateName(`${instance.name} (Copy)`);
+    setShowDuplicateModal(true);
+  };
+
+  // Confirm actions
+  const confirmCreate = async () => {
+    const name = newInstanceName.trim();
+    if (!name) return;
+    await instancesStore.createInstance(name);
+    setShowCreateModal(false);
+    setNewInstanceName("");
+  };
+
+  const confirmEdit = async () => {
+    if (!editingInstance) return;
+    await instancesStore.updateInstance(editingInstance);
+    setEditingInstance(null);
+    setShowEditModal(false);
+  };
+
+  const confirmDelete = async () => {
+    if (!selectedInstance) return;
+    await instancesStore.deleteInstance(selectedInstance.id);
+    setSelectedInstance(null);
+    setShowDeleteConfirm(false);
+  };
+
+  const confirmDuplicate = async () => {
+    if (!selectedInstance) return;
+    const name = duplicateName.trim();
+    if (!name) return;
+    await instancesStore.duplicateInstance(selectedInstance.id, name);
+    setSelectedInstance(null);
+    setDuplicateName("");
+    setShowDuplicateModal(false);
+  };
+
+  const setActiveInstance = async (id: string) => {
+    await instancesStore.setActiveInstance(id);
+  };
+
+  const formatDate = (timestamp: number): string =>
+    new Date(timestamp * 1000).toLocaleDateString();
+
+  const formatLastPlayed = (timestamp: number): string => {
+    const date = new Date(timestamp * 1000);
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+
+    if (days === 0) return "Today";
+    if (days === 1) return "Yesterday";
+    if (days < 7) return `${days} days ago`;
+    return date.toLocaleDateString();
+  };
+
+  return (
+    <div className="h-full flex flex-col gap-4 p-6 overflow-y-auto">
+      <div className="flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+          Instances
+        </h1>
+        <Button
+          type="button"
+          onClick={openCreate}
+          className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors"
+        >
+          <Plus size={18} />
+          Create Instance
+        </Button>
+      </div>
+
+      {instancesStore.instances.length === 0 ? (
+        <div className="flex-1 flex items-center justify-center">
+          <div className="text-center text-gray-500 dark:text-gray-400">
+            <p className="text-lg mb-2">No instances yet</p>
+            <p className="text-sm">Create your first instance to get started</p>
+          </div>
+        </div>
+      ) : (
+        <ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          {instancesStore.instances.map((instance) => {
+            const isActive = instancesStore.activeInstanceId === instance.id;
+
+            return (
+              <li
+                key={instance.id}
+                onClick={() => setActiveInstance(instance.id)}
+                onKeyDown={(e) =>
+                  e.key === "Enter" && setActiveInstance(instance.id)
+                }
+                className={`relative p-4 text-left rounded-lg border-2 transition-all cursor-pointer hover:border-blue-500 ${
+                  isActive ? "border-blue-500" : "border-transparent"
+                } bg-gray-100 dark:bg-gray-800`}
+              >
+                {/* Instance Icon */}
+                {instance.iconPath ? (
+                  <div className="w-12 h-12 mb-3 rounded overflow-hidden">
+                    <img
+                      src={instance.iconPath}
+                      alt={instance.name}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : (
+                  <div className="w-12 h-12 mb-3 rounded bg-linear-to-br from-blue-500 to-purple-600 flex items-center justify-center">
+                    <span className="text-white font-bold text-lg">
+                      {instance.name.charAt(0).toUpperCase()}
+                    </span>
+                  </div>
+                )}
+
+                <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
+                  {instance.name}
+                </h3>
+
+                <div className="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  {instance.versionId ? (
+                    <p className="truncate">Version: {instance.versionId}</p>
+                  ) : (
+                    <p className="text-gray-400">No version selected</p>
+                  )}
+
+                  {instance.modLoader && (
+                    <p className="truncate">
+                      Mod Loader:{" "}
+                      <span className="capitalize">{instance.modLoader}</span>
+                    </p>
+                  )}
+
+                  <p className="truncate">
+                    Created: {formatDate(toNumber(instance.createdAt))}
+                  </p>
+
+                  {instance.lastPlayed && (
+                    <p className="truncate">
+                      Last played:{" "}
+                      {formatLastPlayed(toNumber(instance.lastPlayed))}
+                    </p>
+                  )}
+                </div>
+
+                {/* Action Buttons */}
+                <div className="mt-4 flex gap-2">
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openEdit(instance);
+                    }}
+                    className="flex-1 flex items-center justify-center gap-1 px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-sm transition-colors"
+                  >
+                    <Edit2 size={14} />
+                    Edit
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openDuplicate(instance);
+                    }}
+                    className="flex-1 flex items-center justify-center gap-1 px-3 py-1.5 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded text-sm transition-colors"
+                  >
+                    <Copy size={14} />
+                    Duplicate
+                  </button>
+
+                  <button
+                    type="button"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      openDelete(instance);
+                    }}
+                    className="flex-1 flex items-center justify-center gap-1 px-3 py-1.5 bg-red-500 hover:bg-red-600 text-white rounded text-sm transition-colors"
+                  >
+                    <Trash2 size={14} />
+                    Delete
+                  </button>
+                </div>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+
+      {/* Create Modal */}
+      <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Instance</DialogTitle>
+            <DialogDescription>
+              Enter a name for the new instance.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-4">
+            <Input
+              value={newInstanceName}
+              onChange={(e) => setNewInstanceName(e.target.value)}
+              placeholder="Instance name"
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => setShowCreateModal(false)}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={confirmCreate}
+              disabled={!newInstanceName.trim()}
+            >
+              Create
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <InstanceEditorModal
+        open={showEditModal}
+        instance={editingInstance}
+        onOpenChange={(open) => {
+          setShowEditModal(open);
+          if (!open) setEditingInstance(null);
+        }}
+      />
+
+      {/* Delete Confirmation */}
+      <Dialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Instance</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete "{selectedInstance?.name}"? This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setShowDeleteConfirm(false);
+                setSelectedInstance(null);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={confirmDelete}
+              className="bg-red-600 text-white hover:bg-red-500"
+            >
+              Delete
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Duplicate Modal */}
+      <Dialog open={showDuplicateModal} onOpenChange={setShowDuplicateModal}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Duplicate Instance</DialogTitle>
+            <DialogDescription>
+              Provide a name for the duplicated instance.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="mt-4">
+            <Input
+              value={duplicateName}
+              onChange={(e) => setDuplicateName(e.target.value)}
+              placeholder="New instance name"
+              onKeyDown={(e) => e.key === "Enter" && confirmDuplicate()}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setShowDuplicateModal(false);
+                setSelectedInstance(null);
+                setDuplicateName("");
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              onClick={confirmDuplicate}
+              disabled={!duplicateName.trim()}
+            >
+              Duplicate
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/pages/settings-view.tsx b/packages/ui-new/src/pages/settings-view.tsx
new file mode 100644
index 0000000..ac43d9b
--- /dev/null
+++ b/packages/ui-new/src/pages/settings-view.tsx
@@ -0,0 +1,1158 @@
+import { open } from "@tauri-apps/plugin-dialog";
+import {
+  Coffee,
+  Download,
+  FileJson,
+  Loader2,
+  RefreshCw,
+  Upload,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Textarea } from "@/components/ui/textarea";
+import { useSettingsStore } from "../stores/settings-store";
+
+const effectOptions = [
+  { value: "saturn", label: "Saturn" },
+  { value: "constellation", label: "Network (Constellation)" },
+];
+
+const logServiceOptions = [
+  { value: "paste.rs", label: "paste.rs (Free, No Account)" },
+  { value: "pastebin.com", label: "pastebin.com (Requires API Key)" },
+];
+
+const llmProviderOptions = [
+  { value: "ollama", label: "Ollama (Local)" },
+  { value: "openai", label: "OpenAI (Remote)" },
+];
+
+const languageOptions = [
+  { value: "auto", label: "Auto (Match User)" },
+  { value: "English", label: "English" },
+  { value: "Chinese", label: "中文" },
+  { value: "Japanese", label: "日本語" },
+  { value: "Korean", label: "한국어" },
+  { value: "Spanish", label: "Español" },
+  { value: "French", label: "Français" },
+  { value: "German", label: "Deutsch" },
+  { value: "Russian", label: "Русский" },
+];
+
+const ttsProviderOptions = [
+  { value: "disabled", label: "Disabled" },
+  { value: "piper", label: "Piper TTS (Local)" },
+  { value: "edge", label: "Edge TTS (Online)" },
+];
+
+const personas = [
+  {
+    value: "default",
+    label: "Minecraft Expert (Default)",
+    prompt:
+      "You are a helpful Minecraft expert assistant. You help players with game issues, mod installation, performance optimization, and gameplay tips. Analyze any game logs provided and give concise, actionable advice.",
+  },
+  {
+    value: "technical",
+    label: "Technical Debugger",
+    prompt:
+      "You are a technical support specialist for Minecraft. Focus strictly on analyzing logs, identifying crash causes, and providing technical solutions. Be precise and avoid conversational filler.",
+  },
+  {
+    value: "concise",
+    label: "Concise Helper",
+    prompt:
+      "You are a direct and concise assistant. Provide answers in as few words as possible while remaining accurate. Use bullet points for lists.",
+  },
+  {
+    value: "explain",
+    label: "Teacher / Explainer",
+    prompt:
+      "You are a patient teacher. Explain Minecraft concepts, redstone mechanics, and mod features in simple, easy-to-understand terms suitable for beginners.",
+  },
+  {
+    value: "pirate",
+    label: "Pirate Captain",
+    prompt:
+      "You are a salty Minecraft Pirate Captain! Yarr! Speak like a pirate while helping the crew (the user) with their blocky adventures. Use terms like 'matey', 'landlubber', and 'treasure'.",
+  },
+];
+
+export function SettingsView() {
+  const {
+    settings,
+    backgroundUrl,
+    javaInstallations,
+    isDetectingJava,
+    showJavaDownloadModal,
+    selectedDownloadSource,
+    javaCatalog,
+    isLoadingCatalog,
+    catalogError,
+    selectedMajorVersion,
+    selectedImageType,
+    showOnlyRecommended,
+    searchQuery,
+    isDownloadingJava,
+    downloadProgress,
+    javaDownloadStatus,
+    pendingDownloads,
+    ollamaModels,
+    openaiModels,
+    isLoadingOllamaModels,
+    isLoadingOpenaiModels,
+    ollamaModelsError,
+    openaiModelsError,
+    showConfigEditor,
+    rawConfigContent,
+    configFilePath,
+    configEditorError,
+    filteredReleases,
+    availableMajorVersions,
+    installStatus,
+    selectedRelease,
+    currentModelOptions,
+    loadSettings,
+    saveSettings,
+    detectJava,
+    selectJava,
+    openJavaDownloadModal,
+    closeJavaDownloadModal,
+    loadJavaCatalog,
+    refreshCatalog,
+    loadPendingDownloads,
+    selectMajorVersion,
+    downloadJava,
+    cancelDownload,
+    resumeDownloads,
+    openConfigEditor,
+    closeConfigEditor,
+    saveRawConfig,
+    loadOllamaModels,
+    loadOpenaiModels,
+    set,
+    setSetting,
+    setAssistantSetting,
+    setFeatureFlag,
+  } = useSettingsStore();
+
+  // Mark potentially-unused variables as referenced so TypeScript does not report
+  // them as unused in this file (they are part of the store API and used elsewhere).
+  // This is a no-op but satisfies the compiler.
+  void selectedDownloadSource;
+  void javaCatalog;
+  void javaDownloadStatus;
+  void pendingDownloads;
+  void ollamaModels;
+  void openaiModels;
+  void isLoadingOllamaModels;
+  void isLoadingOpenaiModels;
+  void ollamaModelsError;
+  void openaiModelsError;
+  void selectedRelease;
+  void loadJavaCatalog;
+  void loadPendingDownloads;
+  void cancelDownload;
+  void resumeDownloads;
+  void setFeatureFlag;
+  const [selectedPersona, setSelectedPersona] = useState("default");
+  const [migrating, setMigrating] = useState(false);
+  const [activeTab, setActiveTab] = useState("appearance");
+
+  useEffect(() => {
+    loadSettings();
+    detectJava();
+  }, [loadSettings, detectJava]);
+
+  useEffect(() => {
+    if (activeTab === "assistant") {
+      if (settings.assistant.llmProvider === "ollama") {
+        loadOllamaModels();
+      } else if (settings.assistant.llmProvider === "openai") {
+        loadOpenaiModels();
+      }
+    }
+  }, [
+    activeTab,
+    settings.assistant.llmProvider,
+    loadOllamaModels,
+    loadOpenaiModels,
+  ]);
+
+  const handleSelectBackground = async () => {
+    try {
+      const selected = await open({
+        multiple: false,
+        filters: [
+          {
+            name: "Images",
+            extensions: ["png", "jpg", "jpeg", "webp", "gif"],
+          },
+        ],
+      });
+
+      if (selected && typeof selected === "string") {
+        setSetting("customBackgroundPath", selected);
+        saveSettings();
+      }
+    } catch (e) {
+      console.error("Failed to select background:", e);
+      toast.error("Failed to select background");
+    }
+  };
+
+  const handleClearBackground = () => {
+    setSetting("customBackgroundPath", null);
+    saveSettings();
+  };
+
+  const handleApplyPersona = (value: string) => {
+    const persona = personas.find((p) => p.value === value);
+    if (persona) {
+      setAssistantSetting("systemPrompt", persona.prompt);
+      setSelectedPersona(value);
+      saveSettings();
+    }
+  };
+
+  const handleResetSystemPrompt = () => {
+    const defaultPersona = personas.find((p) => p.value === "default");
+    if (defaultPersona) {
+      setAssistantSetting("systemPrompt", defaultPersona.prompt);
+      setSelectedPersona("default");
+      saveSettings();
+    }
+  };
+
+  const handleRunMigration = async () => {
+    if (migrating) return;
+    setMigrating(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      toast.success("Migration complete! Files migrated successfully");
+    } catch (e) {
+      console.error("Migration failed:", e);
+      toast.error(`Migration failed: ${e}`);
+    } finally {
+      setMigrating(false);
+    }
+  };
+
+  return (
+    <div className="h-full flex flex-col p-6 overflow-hidden">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-3xl font-black bg-clip-text text-transparent bg-linear-to-r dark:from-white dark:to-white/60 from-gray-900 to-gray-600">
+          Settings
+        </h2>
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={openConfigEditor}
+          className="gap-2"
+        >
+          <FileJson className="h-4 w-4" />
+          <span className="hidden sm:inline">Open JSON</span>
+        </Button>
+      </div>
+
+      <Tabs
+        value={activeTab}
+        onValueChange={setActiveTab}
+        className="flex-1 overflow-hidden"
+      >
+        <TabsList className="grid grid-cols-4 mb-6">
+          <TabsTrigger value="appearance">Appearance</TabsTrigger>
+          <TabsTrigger value="java">Java</TabsTrigger>
+          <TabsTrigger value="advanced">Advanced</TabsTrigger>
+          <TabsTrigger value="assistant">Assistant</TabsTrigger>
+        </TabsList>
+
+        <ScrollArea className="flex-1 pr-2">
+          <TabsContent value="appearance" className="space-y-6">
+            <Card className="border-border">
+              <CardHeader>
+                <CardTitle className="text-lg">Appearance</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div>
+                  <Label className="mb-3">Custom Background Image</Label>
+                  <div className="flex items-center gap-6">
+                    <div className="w-40 h-24 rounded-xl overflow-hidden bg-secondary border relative group shadow-lg">
+                      {backgroundUrl ? (
+                        <img
+                          src={backgroundUrl}
+                          alt="Background Preview"
+                          className="w-full h-full object-cover"
+                          onError={(e) => {
+                            console.error("Failed to load image");
+                            e.currentTarget.style.display = "none";
+                          }}
+                        />
+                      ) : (
+                        <div className="w-full h-full bg-linear-to-br from-emerald-900 via-zinc-900 to-indigo-950" />
+                      )}
+                      {!backgroundUrl && (
+                        <div className="absolute inset-0 flex items-center justify-center text-xs text-white/50 bg-black/20">
+                          Default Gradient
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex flex-col gap-2">
+                      <Button
+                        variant="outline"
+                        onClick={handleSelectBackground}
+                      >
+                        Select Image
+                      </Button>
+                      {backgroundUrl && (
+                        <Button
+                          variant="ghost"
+                          className="text-red-500"
+                          onClick={handleClearBackground}
+                        >
+                          Reset to Default
+                        </Button>
+                      )}
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-3">
+                    Select an image from your computer to replace the default
+                    gradient background.
+                  </p>
+                </div>
+
+                <Separator />
+
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="text-base">Visual Effects</Label>
+                      <p className="text-sm text-muted-foreground">
+                        Enable particle effects and animated gradients.
+                      </p>
+                    </div>
+                    <Switch
+                      checked={settings.enableVisualEffects}
+                      onCheckedChange={(checked) => {
+                        setSetting("enableVisualEffects", checked);
+                        saveSettings();
+                      }}
+                    />
+                  </div>
+
+                  {settings.enableVisualEffects && (
+                    <div className="pl-4 border-l-2 border-border">
+                      <div className="space-y-2">
+                        <Label>Theme Effect</Label>
+                        <Select
+                          value={settings.activeEffect}
+                          onValueChange={(value) => {
+                            setSetting("activeEffect", value);
+                            saveSettings();
+                          }}
+                        >
+                          <SelectTrigger className="w-52">
+                            <SelectValue />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {effectOptions.map((option) => (
+                              <SelectItem
+                                key={option.value}
+                                value={option.value}
+                              >
+                                {option.label}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                        <p className="text-sm text-muted-foreground">
+                          Select the active visual theme.
+                        </p>
+                      </div>
+                    </div>
+                  )}
+
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="text-base">GPU Acceleration</Label>
+                      <p className="text-sm text-muted-foreground">
+                        Enable GPU acceleration for the interface.
+                      </p>
+                    </div>
+                    <Switch
+                      checked={settings.enableGpuAcceleration}
+                      onCheckedChange={(checked) => {
+                        setSetting("enableGpuAcceleration", checked);
+                        saveSettings();
+                      }}
+                    />
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="java" className="space-y-6">
+            <Card className="border-border">
+              <CardHeader>
+                <CardTitle className="text-lg">Java Environment</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div>
+                  <Label className="mb-2">Java Path</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      value={settings.javaPath}
+                      onChange={(e) => setSetting("javaPath", e.target.value)}
+                      className="flex-1"
+                      placeholder="java or full path to java executable"
+                    />
+                    <Button
+                      variant="outline"
+                      onClick={() => detectJava()}
+                      disabled={isDetectingJava}
+                    >
+                      {isDetectingJava ? (
+                        <Loader2 className="h-4 w-4 animate-spin" />
+                      ) : (
+                        "Detect"
+                      )}
+                    </Button>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-2">
+                    Path to Java executable.
+                  </p>
+                </div>
+
+                <div>
+                  <Label className="mb-2">Memory Settings (MB)</Label>
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label htmlFor="min-memory" className="text-sm">
+                        Minimum Memory
+                      </Label>
+                      <Input
+                        id="min-memory"
+                        type="number"
+                        value={settings.minMemory}
+                        onChange={(e) =>
+                          setSetting(
+                            "minMemory",
+                            parseInt(e.target.value, 10) || 1024,
+                          )
+                        }
+                        min={512}
+                        step={256}
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="max-memory" className="text-sm">
+                        Maximum Memory
+                      </Label>
+                      <Input
+                        id="max-memory"
+                        type="number"
+                        value={settings.maxMemory}
+                        onChange={(e) =>
+                          setSetting(
+                            "maxMemory",
+                            parseInt(e.target.value, 10) || 2048,
+                          )
+                        }
+                        min={1024}
+                        step={256}
+                      />
+                    </div>
+                  </div>
+                  <p className="text-sm text-muted-foreground mt-2">
+                    Memory allocation for Minecraft.
+                  </p>
+                </div>
+
+                <Separator />
+
+                <div>
+                  <div className="flex items-center justify-between mb-4">
+                    <Label className="text-base">
+                      Detected Java Installations
+                    </Label>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => detectJava()}
+                      disabled={isDetectingJava}
+                    >
+                      <RefreshCw
+                        className={`h-4 w-4 mr-2 ${isDetectingJava ? "animate-spin" : ""}`}
+                      />
+                      Rescan
+                    </Button>
+                  </div>
+
+                  {javaInstallations.length === 0 ? (
+                    <div className="text-center py-8 text-muted-foreground border rounded-lg">
+                      <Coffee className="h-12 w-12 mx-auto mb-4 opacity-30" />
+                      <p>No Java installations detected</p>
+                    </div>
+                  ) : (
+                    <div className="space-y-2">
+                      {javaInstallations.map((installation) => (
+                        <Card
+                          key={installation.path}
+                          className={`p-3 cursor-pointer transition-colors ${
+                            settings.javaPath === installation.path
+                              ? "border-primary bg-primary/5"
+                              : ""
+                          }`}
+                          onClick={() => selectJava(installation.path)}
+                        >
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="font-medium flex items-center gap-2">
+                                <Coffee className="h-4 w-4" />
+                                {installation.version}
+                              </div>
+                              <div className="text-sm text-muted-foreground font-mono">
+                                {installation.path}
+                              </div>
+                            </div>
+                            {settings.javaPath === installation.path && (
+                              <div className="h-5 w-5 text-primary">✓</div>
+                            )}
+                          </div>
+                        </Card>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="mt-4">
+                    <Button
+                      variant="default"
+                      className="w-full"
+                      onClick={openJavaDownloadModal}
+                    >
+                      <Download className="h-4 w-4 mr-2" />
+                      Download Java
+                    </Button>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="advanced" className="space-y-6">
+            <Card className="border-border">
+              <CardHeader>
+                <CardTitle className="text-lg">Advanced Settings</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div>
+                  <Label className="mb-2">Download Threads</Label>
+                  <Input
+                    type="number"
+                    value={settings.downloadThreads}
+                    onChange={(e) =>
+                      setSetting(
+                        "downloadThreads",
+                        parseInt(e.target.value, 10) || 32,
+                      )
+                    }
+                    min={1}
+                    max={64}
+                  />
+                  <p className="text-sm text-muted-foreground mt-2">
+                    Number of concurrent downloads.
+                  </p>
+                </div>
+
+                <div>
+                  <Label className="mb-2">Log Upload Service</Label>
+                  <Select
+                    value={settings.logUploadService}
+                    onValueChange={(value) => {
+                      setSetting("logUploadService", value as any);
+                      saveSettings();
+                    }}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {logServiceOptions.map((option) => (
+                        <SelectItem key={option.value} value={option.value}>
+                          {option.label}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                {settings.logUploadService === "pastebin.com" && (
+                  <div>
+                    <Label className="mb-2">Pastebin API Key</Label>
+                    <Input
+                      type="password"
+                      value={settings.pastebinApiKey || ""}
+                      onChange={(e) =>
+                        setSetting("pastebinApiKey", e.target.value || null)
+                      }
+                      placeholder="Enter your Pastebin API key"
+                    />
+                  </div>
+                )}
+
+                <Separator />
+
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <Label className="text-base">Use Shared Caches</Label>
+                      <p className="text-sm text-muted-foreground">
+                        Share downloaded assets between instances.
+                      </p>
+                    </div>
+                    <Switch
+                      checked={settings.useSharedCaches}
+                      onCheckedChange={(checked) => {
+                        setSetting("useSharedCaches", checked);
+                        saveSettings();
+                      }}
+                    />
+                  </div>
+
+                  {!settings.useSharedCaches && (
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <Label className="text-base">
+                          Keep Legacy Per-Instance Storage
+                        </Label>
+                        <p className="text-sm text-muted-foreground">
+                          Maintain separate cache folders for compatibility.
+                        </p>
+                      </div>
+                      <Switch
+                        checked={settings.keepLegacyPerInstanceStorage}
+                        onCheckedChange={(checked) => {
+                          setSetting("keepLegacyPerInstanceStorage", checked);
+                          saveSettings();
+                        }}
+                      />
+                    </div>
+                  )}
+
+                  {settings.useSharedCaches && (
+                    <div className="mt-4">
+                      <Button
+                        variant="outline"
+                        className="w-full"
+                        onClick={handleRunMigration}
+                        disabled={migrating}
+                      >
+                        {migrating ? (
+                          <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+                        ) : (
+                          <Upload className="h-4 w-4 mr-2" />
+                        )}
+                        {migrating
+                          ? "Migrating..."
+                          : "Migrate to Shared Caches"}
+                      </Button>
+                    </div>
+                  )}
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="assistant" className="space-y-6">
+            <Card className="border-border">
+              <CardHeader>
+                <CardTitle className="text-lg">AI Assistant</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <Label className="text-base">Enable Assistant</Label>
+                    <p className="text-sm text-muted-foreground">
+                      Enable the AI assistant for help with Minecraft issues.
+                    </p>
+                  </div>
+                  <Switch
+                    checked={settings.assistant.enabled}
+                    onCheckedChange={(checked) => {
+                      setAssistantSetting("enabled", checked);
+                      saveSettings();
+                    }}
+                  />
+                </div>
+
+                {settings.assistant.enabled && (
+                  <>
+                    <div>
+                      <Label className="mb-2">LLM Provider</Label>
+                      <Select
+                        value={settings.assistant.llmProvider}
+                        onValueChange={(value) => {
+                          setAssistantSetting("llmProvider", value as any);
+                          saveSettings();
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {llmProviderOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label className="mb-2">Model</Label>
+                      <Select
+                        value={
+                          settings.assistant.llmProvider === "ollama"
+                            ? settings.assistant.ollamaModel
+                            : settings.assistant.openaiModel
+                        }
+                        onValueChange={(value) => {
+                          if (settings.assistant.llmProvider === "ollama") {
+                            setAssistantSetting("ollamaModel", value);
+                          } else {
+                            setAssistantSetting("openaiModel", value);
+                          }
+                          saveSettings();
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {currentModelOptions.map((model) => (
+                            <SelectItem key={model.value} value={model.value}>
+                              {model.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {settings.assistant.llmProvider === "ollama" && (
+                      <div>
+                        <Label className="mb-2">Ollama Endpoint</Label>
+                        <Input
+                          value={settings.assistant.ollamaEndpoint}
+                          onChange={(e) => {
+                            setAssistantSetting(
+                              "ollamaEndpoint",
+                              e.target.value,
+                            );
+                            saveSettings();
+                          }}
+                          placeholder="http://localhost:11434"
+                        />
+                      </div>
+                    )}
+
+                    {settings.assistant.llmProvider === "openai" && (
+                      <>
+                        <div>
+                          <Label className="mb-2">OpenAI API Key</Label>
+                          <Input
+                            type="password"
+                            value={settings.assistant.openaiApiKey || ""}
+                            onChange={(e) => {
+                              setAssistantSetting(
+                                "openaiApiKey",
+                                e.target.value || null,
+                              );
+                              saveSettings();
+                            }}
+                            placeholder="Enter your OpenAI API key"
+                          />
+                        </div>
+                        <div>
+                          <Label className="mb-2">OpenAI Endpoint</Label>
+                          <Input
+                            value={settings.assistant.openaiEndpoint}
+                            onChange={(e) => {
+                              setAssistantSetting(
+                                "openaiEndpoint",
+                                e.target.value,
+                              );
+                              saveSettings();
+                            }}
+                            placeholder="https://api.openai.com/v1"
+                          />
+                        </div>
+                      </>
+                    )}
+
+                    <div>
+                      <Label className="mb-2">Response Language</Label>
+                      <Select
+                        value={settings.assistant.responseLanguage}
+                        onValueChange={(value) => {
+                          setAssistantSetting("responseLanguage", value);
+                          saveSettings();
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {languageOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    <div>
+                      <Label className="mb-2">Assistant Persona</Label>
+                      <Select
+                        value={selectedPersona}
+                        onValueChange={handleApplyPersona}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {personas.map((persona) => (
+                            <SelectItem
+                              key={persona.value}
+                              value={persona.value}
+                            >
+                              {persona.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                      <div className="mt-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={handleResetSystemPrompt}
+                        >
+                          Reset to Default
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div>
+                      <Label className="mb-2">System Prompt</Label>
+
+                      <Textarea
+                        value={settings.assistant.systemPrompt}
+                        onChange={(e) => {
+                          setAssistantSetting("systemPrompt", e.target.value);
+                          saveSettings();
+                        }}
+                        rows={6}
+                        className="font-mono text-sm"
+                      />
+                    </div>
+
+                    <div>
+                      <Label className="mb-2">Text-to-Speech</Label>
+
+                      <Select
+                        value={settings.assistant.ttsProvider}
+                        onValueChange={(value) => {
+                          setAssistantSetting("ttsProvider", value);
+                          saveSettings();
+                        }}
+                      >
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+
+                        <SelectContent>
+                          {ttsProviderOptions.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                              {option.label}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </>
+                )}
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </ScrollArea>
+      </Tabs>
+
+      {/* Java Download Modal */}
+      <Dialog
+        open={showJavaDownloadModal}
+        onOpenChange={closeJavaDownloadModal}
+      >
+        <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>Download Java</DialogTitle>
+            <DialogDescription>
+              Download and install Java for Minecraft.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="space-y-4">
+              <div>
+                <Label className="mb-2">Java Version</Label>
+                <Select
+                  value={selectedMajorVersion?.toString() || ""}
+                  onValueChange={(v) => selectMajorVersion(parseInt(v, 10))}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select version" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {availableMajorVersions.map((version) => (
+                      <SelectItem key={version} value={version.toString()}>
+                        Java {version}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label className="mb-2">Type</Label>
+                <Select
+                  value={selectedImageType}
+                  onValueChange={(v) => set({ selectedImageType: v as any })}
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="jre">JRE (Runtime)</SelectItem>
+                    <SelectItem value="jdk">JDK (Development)</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                <Checkbox
+                  id="recommended"
+                  checked={showOnlyRecommended}
+                  onCheckedChange={(checked) =>
+                    set({ showOnlyRecommended: !!checked })
+                  }
+                />
+                <Label htmlFor="recommended">Show only LTS/Recommended</Label>
+              </div>
+
+              <div>
+                <Label className="mb-2">Search</Label>
+                <Input
+                  placeholder="Search versions..."
+                  value={searchQuery}
+                  onChange={(e) => set({ searchQuery: e.target.value })}
+                />
+              </div>
+
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={refreshCatalog}
+                disabled={isLoadingCatalog}
+              >
+                <RefreshCw
+                  className={`h-4 w-4 mr-2 ${isLoadingCatalog ? "animate-spin" : ""}`}
+                />
+                Refresh Catalog
+              </Button>
+            </div>
+
+            <div className="md:col-span-2">
+              <ScrollArea className="h-75 pr-4">
+                {isLoadingCatalog ? (
+                  <div className="flex items-center justify-center h-full">
+                    <Loader2 className="h-8 w-8 animate-spin" />
+                  </div>
+                ) : catalogError ? (
+                  <div className="text-red-500 p-4">{catalogError}</div>
+                ) : filteredReleases.length === 0 ? (
+                  <div className="text-muted-foreground p-4 text-center">
+                    No Java versions found
+                  </div>
+                ) : (
+                  <div className="space-y-2">
+                    {filteredReleases.map((release) => {
+                      const status = installStatus(
+                        release.majorVersion,
+                        release.imageType,
+                      );
+                      return (
+                        <Card
+                          key={`${release.majorVersion}-${release.imageType}`}
+                          className="p-3 cursor-pointer hover:bg-accent"
+                          onClick={() =>
+                            selectMajorVersion(release.majorVersion)
+                          }
+                        >
+                          <div className="flex items-center justify-between">
+                            <div>
+                              <div className="font-medium">
+                                Java {release.majorVersion}{" "}
+                                {release.imageType.toUpperCase()}
+                              </div>
+                              <div className="text-sm text-muted-foreground">
+                                {release.releaseName} • {release.architecture}{" "}
+                                {release.architecture}
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              {release.isLts && (
+                                <Badge variant="secondary">LTS</Badge>
+                              )}
+                              {status === "installed" && (
+                                <Badge variant="default">Installed</Badge>
+                              )}
+                              {status === "available" && (
+                                <Button
+                                  variant="ghost"
+                                  size="sm"
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    selectMajorVersion(release.majorVersion);
+                                    downloadJava();
+                                  }}
+                                >
+                                  <Download className="h-3 w-3 mr-1" />
+                                  Download
+                                </Button>
+                              )}
+                            </div>
+                          </div>
+                        </Card>
+                      );
+                    })}
+                  </div>
+                )}
+              </ScrollArea>
+            </div>
+          </div>
+
+          {isDownloadingJava && downloadProgress && (
+            <div className="mt-4 p-4 border rounded-lg">
+              <div className="flex justify-between items-center mb-2">
+                <span className="text-sm font-medium">
+                  {downloadProgress.fileName}
+                </span>
+                <span className="text-sm text-muted-foreground">
+                  {Math.round(downloadProgress.percentage)}%
+                </span>
+              </div>
+              <div className="w-full bg-secondary h-2 rounded-full overflow-hidden">
+                <div
+                  className="bg-primary h-full transition-all duration-300"
+                  style={{ width: `${downloadProgress.percentage}%` }}
+                />
+              </div>
+            </div>
+          )}
+
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={closeJavaDownloadModal}
+              disabled={isDownloadingJava}
+            >
+              Cancel
+            </Button>
+            {selectedMajorVersion && (
+              <Button
+                onClick={() => downloadJava()}
+                disabled={isDownloadingJava}
+              >
+                {isDownloadingJava ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Downloading...
+                  </>
+                ) : (
+                  <>
+                    <Download className="mr-2 h-4 w-4" />
+                    Download Java {selectedMajorVersion}
+                  </>
+                )}
+              </Button>
+            )}
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Config Editor Modal */}
+      <Dialog open={showConfigEditor} onOpenChange={closeConfigEditor}>
+        <DialogContent className="max-w-4xl max-h-[80vh] overflow-hidden">
+          <DialogHeader>
+            <DialogTitle>Edit Configuration</DialogTitle>
+            <DialogDescription>
+              Edit the raw JSON configuration file.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="text-sm text-muted-foreground mb-2">
+            File: {configFilePath}
+          </div>
+
+          {configEditorError && (
+            <div className="text-red-500 p-3 bg-red-50 dark:bg-red-950/30 rounded-md">
+              {configEditorError}
+            </div>
+          )}
+
+          <Textarea
+            value={rawConfigContent}
+            onChange={(e) => set({ rawConfigContent: e.target.value })}
+            className="font-mono text-sm h-100 resize-none"
+            spellCheck={false}
+          />
+
+          <DialogFooter>
+            <Button variant="outline" onClick={closeConfigEditor}>
+              Cancel
+            </Button>
+            <Button onClick={() => saveRawConfig()}>Save Changes</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/pages/versions-view.tsx b/packages/ui-new/src/pages/versions-view.tsx
new file mode 100644
index 0000000..7f44611
--- /dev/null
+++ b/packages/ui-new/src/pages/versions-view.tsx
@@ -0,0 +1,662 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { Coffee, Loader2, Search, Trash2 } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useGameStore } from "../stores/game-store";
+import { useInstancesStore } from "../stores/instances-store";
+import type { Version } from "../types/bindings/manifest";
+
+interface InstalledModdedVersion {
+  id: string;
+  javaVersion?: number;
+}
+
+type TypeFilter = "all" | "release" | "snapshot" | "installed";
+
+export function VersionsView() {
+  const { versions, selectedVersion, loadVersions, setSelectedVersion } =
+    useGameStore();
+  const { activeInstanceId } = useInstancesStore();
+
+  const [searchQuery, setSearchQuery] = useState("");
+  const [typeFilter, setTypeFilter] = useState<TypeFilter>("all");
+  const [installedModdedVersions, setInstalledModdedVersions] = useState<
+    InstalledModdedVersion[]
+  >([]);
+  const [, setIsLoadingModded] = useState(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [versionToDelete, setVersionToDelete] = useState<string | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [selectedVersionMetadata, setSelectedVersionMetadata] = useState<{
+    id: string;
+    javaVersion?: number;
+    isInstalled: boolean;
+  } | null>(null);
+  const [isLoadingMetadata, setIsLoadingMetadata] = useState(false);
+  const [showModLoaderSelector, setShowModLoaderSelector] = useState(false);
+
+  const normalizedQuery = searchQuery.trim().toLowerCase().replace(/。/g, ".");
+
+  // Load installed modded versions with Java version info
+  const loadInstalledModdedVersions = useCallback(async () => {
+    if (!activeInstanceId) {
+      setInstalledModdedVersions([]);
+      setIsLoadingModded(false);
+      return;
+    }
+
+    setIsLoadingModded(true);
+    try {
+      const allInstalled = await invoke<Array<{ id: string; type: string }>>(
+        "list_installed_versions",
+        { instanceId: activeInstanceId },
+      );
+
+      const moddedIds = allInstalled
+        .filter((v) => v.type === "fabric" || v.type === "forge")
+        .map((v) => v.id);
+
+      const versionsWithJava = await Promise.all(
+        moddedIds.map(async (id) => {
+          try {
+            const javaVersion = await invoke<number | null>(
+              "get_version_java_version",
+              {
+                instanceId: activeInstanceId,
+                versionId: id,
+              },
+            );
+            return {
+              id,
+              javaVersion: javaVersion ?? undefined,
+            };
+          } catch (e) {
+            console.error(`Failed to get Java version for ${id}:`, e);
+            return { id, javaVersion: undefined };
+          }
+        }),
+      );
+
+      setInstalledModdedVersions(versionsWithJava);
+    } catch (e) {
+      console.error("Failed to load installed modded versions:", e);
+      toast.error("Error loading modded versions");
+    } finally {
+      setIsLoadingModded(false);
+    }
+  }, [activeInstanceId]);
+
+  // Combined versions list (vanilla + modded)
+  const allVersions = (() => {
+    const moddedVersions: Version[] = installedModdedVersions.map((v) => {
+      const versionType = v.id.startsWith("fabric-loader-")
+        ? "fabric"
+        : v.id.includes("-forge-")
+          ? "forge"
+          : "fabric";
+      return {
+        id: v.id,
+        type: versionType,
+        url: "",
+        time: "",
+        releaseTime: new Date().toISOString(),
+        javaVersion: BigInt(v.javaVersion ?? 0),
+        isInstalled: true,
+      };
+    });
+    return [...moddedVersions, ...versions];
+  })();
+
+  // Filter versions based on search and type filter
+  const filteredVersions = allVersions.filter((version) => {
+    if (typeFilter === "release" && version.type !== "release") return false;
+    if (typeFilter === "snapshot" && version.type !== "snapshot") return false;
+    if (typeFilter === "installed" && !version.isInstalled) return false;
+
+    if (
+      normalizedQuery &&
+      !version.id.toLowerCase().includes(normalizedQuery)
+    ) {
+      return false;
+    }
+
+    return true;
+  });
+
+  // Get version badge styling
+  const getVersionBadge = (type: string) => {
+    switch (type) {
+      case "release":
+        return {
+          text: "Release",
+          variant: "default" as const,
+          className: "bg-emerald-500 hover:bg-emerald-600",
+        };
+      case "snapshot":
+        return {
+          text: "Snapshot",
+          variant: "secondary" as const,
+          className: "bg-amber-500 hover:bg-amber-600",
+        };
+      case "fabric":
+        return {
+          text: "Fabric",
+          variant: "outline" as const,
+          className: "border-indigo-500 text-indigo-700 dark:text-indigo-300",
+        };
+      case "forge":
+        return {
+          text: "Forge",
+          variant: "outline" as const,
+          className: "border-orange-500 text-orange-700 dark:text-orange-300",
+        };
+      case "modpack":
+        return {
+          text: "Modpack",
+          variant: "outline" as const,
+          className: "border-purple-500 text-purple-700 dark:text-purple-300",
+        };
+      default:
+        return {
+          text: type,
+          variant: "outline" as const,
+          className: "border-gray-500 text-gray-700 dark:text-gray-300",
+        };
+    }
+  };
+
+  // Load version metadata
+  const loadVersionMetadata = useCallback(
+    async (versionId: string) => {
+      if (!versionId || !activeInstanceId) {
+        setSelectedVersionMetadata(null);
+        return;
+      }
+
+      setIsLoadingMetadata(true);
+      try {
+        const metadata = await invoke<{
+          id: string;
+          javaVersion?: number;
+          isInstalled: boolean;
+        }>("get_version_metadata", {
+          instanceId: activeInstanceId,
+          versionId,
+        });
+        setSelectedVersionMetadata(metadata);
+      } catch (e) {
+        console.error("Failed to load version metadata:", e);
+        setSelectedVersionMetadata(null);
+      } finally {
+        setIsLoadingMetadata(false);
+      }
+    },
+    [activeInstanceId],
+  );
+
+  // Get base version for mod loader selector
+  const selectedBaseVersion = (() => {
+    if (!selectedVersion) return "";
+
+    if (selectedVersion.startsWith("fabric-loader-")) {
+      const parts = selectedVersion.split("-");
+      return parts[parts.length - 1];
+    }
+    if (selectedVersion.includes("-forge-")) {
+      return selectedVersion.split("-forge-")[0];
+    }
+
+    const version = versions.find((v) => v.id === selectedVersion);
+    return version ? selectedVersion : "";
+  })();
+
+  // Handle version deletion
+  const handleDeleteVersion = async () => {
+    if (!versionToDelete || !activeInstanceId) return;
+
+    setIsDeleting(true);
+    try {
+      await invoke("delete_version", {
+        instanceId: activeInstanceId,
+        versionId: versionToDelete,
+      });
+
+      if (selectedVersion === versionToDelete) {
+        setSelectedVersion("");
+      }
+
+      setShowDeleteDialog(false);
+      setVersionToDelete(null);
+      toast.success("Version deleted successfully");
+
+      await loadVersions(activeInstanceId);
+      await loadInstalledModdedVersions();
+    } catch (e) {
+      console.error("Failed to delete version:", e);
+      toast.error(`Failed to delete version: ${e}`);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Show delete confirmation dialog
+  const showDeleteConfirmation = (versionId: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    setVersionToDelete(versionId);
+    setShowDeleteDialog(true);
+  };
+
+  // Setup event listeners for version updates
+  useEffect(() => {
+    let unlisteners: UnlistenFn[] = [];
+
+    const setupEventListeners = async () => {
+      try {
+        const versionDeletedUnlisten = await listen(
+          "version-deleted",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const downloadCompleteUnlisten = await listen(
+          "download-complete",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const versionInstalledUnlisten = await listen(
+          "version-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const fabricInstalledUnlisten = await listen(
+          "fabric-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        const forgeInstalledUnlisten = await listen(
+          "forge-installed",
+          async () => {
+            await loadVersions(activeInstanceId ?? undefined);
+            await loadInstalledModdedVersions();
+          },
+        );
+
+        unlisteners = [
+          versionDeletedUnlisten,
+          downloadCompleteUnlisten,
+          versionInstalledUnlisten,
+          fabricInstalledUnlisten,
+          forgeInstalledUnlisten,
+        ];
+      } catch (e) {
+        console.error("Failed to setup event listeners:", e);
+      }
+    };
+
+    setupEventListeners();
+    loadInstalledModdedVersions();
+
+    return () => {
+      unlisteners.forEach((unlisten) => {
+        unlisten();
+      });
+    };
+  }, [activeInstanceId, loadVersions, loadInstalledModdedVersions]);
+
+  // Load metadata when selected version changes
+  useEffect(() => {
+    if (selectedVersion) {
+      loadVersionMetadata(selectedVersion);
+    } else {
+      setSelectedVersionMetadata(null);
+    }
+  }, [selectedVersion, loadVersionMetadata]);
+
+  return (
+    <div className="h-full flex flex-col p-6 overflow-hidden">
+      <div className="flex items-center justify-between mb-6">
+        <h2 className="text-3xl font-black bg-clip-text text-transparent bg-linear-to-r from-gray-900 to-gray-600 dark:from-white dark:to-white/60">
+          Version Manager
+        </h2>
+        <div className="text-sm dark:text-white/40 text-black/50">
+          Select a version to play or modify
+        </div>
+      </div>
+
+      <div className="flex-1 grid grid-cols-1 lg:grid-cols-3 gap-6 overflow-hidden">
+        {/* Left: Version List */}
+        <div className="lg:col-span-2 flex flex-col gap-4 overflow-hidden">
+          {/* Search and Filters */}
+          <div className="flex gap-3">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                type="text"
+                placeholder="Search versions..."
+                className="pl-9 bg-white/60 dark:bg-black/20 border-black/10 dark:border-white/10 dark:text-white text-gray-900 placeholder-black/30 dark:placeholder-white/30 focus:border-indigo-500/50 dark:focus:bg-black/40 focus:bg-white/80 backdrop-blur-sm"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+              />
+            </div>
+          </div>
+
+          {/* Type Filter Tabs */}
+          <Tabs
+            value={typeFilter}
+            onValueChange={(v) => setTypeFilter(v as TypeFilter)}
+            className="w-full"
+          >
+            <TabsList className="grid grid-cols-4 bg-white/60 dark:bg-black/20 border-black/5 dark:border-white/5">
+              <TabsTrigger value="all">All</TabsTrigger>
+              <TabsTrigger value="release">Release</TabsTrigger>
+              <TabsTrigger value="snapshot">Snapshot</TabsTrigger>
+              <TabsTrigger value="installed">Installed</TabsTrigger>
+            </TabsList>
+          </Tabs>
+
+          {/* Version List */}
+          <ScrollArea className="flex-1 pr-2">
+            {versions.length === 0 ? (
+              <div className="flex items-center justify-center h-40 dark:text-white/30 text-black/30 italic animate-pulse">
+                Loading versions...
+              </div>
+            ) : filteredVersions.length === 0 ? (
+              <div className="flex flex-col items-center justify-center h-40 dark:text-white/30 text-black/30 gap-2">
+                <span className="text-2xl">👻</span>
+                <span>No matching versions found</span>
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {filteredVersions.map((version) => {
+                  const badge = getVersionBadge(version.type);
+                  const isSelected = selectedVersion === version.id;
+
+                  return (
+                    <Card
+                      key={version.id}
+                      className={`w-full cursor-pointer transition-all duration-200 relative overflow-hidden group ${
+                        isSelected
+                          ? "border-indigo-200 dark:border-indigo-500/50 bg-indigo-50 dark:bg-indigo-600/20 shadow-[0_0_20px_rgba(99,102,241,0.2)]"
+                          : "border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 hover:bg-white/60 dark:hover:bg-white/10 hover:border-black/10 dark:hover:border-white/10 hover:translate-x-1"
+                      }`}
+                      onClick={() => setSelectedVersion(version.id)}
+                    >
+                      {isSelected && (
+                        <div className="absolute inset-0 bg-linear-to-r from-indigo-500/10 to-transparent pointer-events-none" />
+                      )}
+
+                      <CardContent className="p-4">
+                        <div className="flex items-center justify-between">
+                          <div className="flex items-center gap-4 flex-1">
+                            <Badge
+                              variant={badge.variant}
+                              className={badge.className}
+                            >
+                              {badge.text}
+                            </Badge>
+                            <div className="flex-1">
+                              <div
+                                className={`font-bold font-mono text-lg tracking-tight ${
+                                  isSelected
+                                    ? "text-black dark:text-white"
+                                    : "text-gray-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white"
+                                }`}
+                              >
+                                {version.id}
+                              </div>
+                              <div className="flex items-center gap-2 mt-0.5">
+                                {version.releaseTime &&
+                                  version.type !== "fabric" &&
+                                  version.type !== "forge" && (
+                                    <div className="text-xs dark:text-white/30 text-black/30">
+                                      {new Date(
+                                        version.releaseTime,
+                                      ).toLocaleDateString()}
+                                    </div>
+                                  )}
+                                {version.javaVersion && (
+                                  <div className="flex items-center gap-1 text-xs dark:text-white/40 text-black/40">
+                                    <Coffee className="h-3 w-3 opacity-60" />
+                                    <span className="font-medium">
+                                      Java {version.javaVersion}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+
+                          <div className="flex items-center gap-2">
+                            {version.isInstalled && (
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="opacity-0 group-hover:opacity-100 transition-opacity text-red-500 dark:text-red-400 hover:bg-red-500/10 dark:hover:bg-red-500/20"
+                                onClick={(e) =>
+                                  showDeleteConfirmation(version.id, e)
+                                }
+                                title="Delete version"
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  );
+                })}
+              </div>
+            )}
+          </ScrollArea>
+        </div>
+
+        {/* Right: Version Details */}
+        <div className="flex flex-col gap-6">
+          <Card className="border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 backdrop-blur-sm">
+            <CardHeader>
+              <CardTitle className="text-lg">Version Details</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              {selectedVersion ? (
+                <>
+                  <div>
+                    <div className="text-sm text-muted-foreground mb-1">
+                      Selected Version
+                    </div>
+                    <div className="font-mono text-xl font-bold">
+                      {selectedVersion}
+                    </div>
+                  </div>
+
+                  {isLoadingMetadata ? (
+                    <div className="flex items-center gap-2">
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                      <span className="text-sm">Loading metadata...</span>
+                    </div>
+                  ) : selectedVersionMetadata ? (
+                    <div className="space-y-3">
+                      <div>
+                        <div className="text-sm text-muted-foreground mb-1">
+                          Installation Status
+                        </div>
+                        <Badge
+                          variant={
+                            selectedVersionMetadata.isInstalled
+                              ? "default"
+                              : "outline"
+                          }
+                        >
+                          {selectedVersionMetadata.isInstalled
+                            ? "Installed"
+                            : "Not Installed"}
+                        </Badge>
+                      </div>
+
+                      {selectedVersionMetadata.javaVersion && (
+                        <div>
+                          <div className="text-sm text-muted-foreground mb-1">
+                            Java Version
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Coffee className="h-4 w-4" />
+                            <span>
+                              Java {selectedVersionMetadata.javaVersion}
+                            </span>
+                          </div>
+                        </div>
+                      )}
+
+                      {!selectedVersionMetadata.isInstalled && (
+                        <Button
+                          className="w-full"
+                          onClick={() => setShowModLoaderSelector(true)}
+                        >
+                          Install with Mod Loader
+                        </Button>
+                      )}
+                    </div>
+                  ) : null}
+                </>
+              ) : (
+                <div className="text-center py-8 text-muted-foreground">
+                  Select a version to view details
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          {/* Mod Loader Installation */}
+          {showModLoaderSelector && selectedBaseVersion && (
+            <Card className="border-black/5 dark:border-white/5 bg-white/40 dark:bg-white/5 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-lg">Install Mod Loader</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="text-sm text-muted-foreground">
+                  Install {selectedBaseVersion} with Fabric or Forge
+                </div>
+                <div className="flex gap-2">
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={async () => {
+                      if (!activeInstanceId) return;
+                      try {
+                        await invoke("install_fabric", {
+                          instanceId: activeInstanceId,
+                          gameVersion: selectedBaseVersion,
+                          loaderVersion: "latest",
+                        });
+                        toast.success("Fabric installation started");
+                        setShowModLoaderSelector(false);
+                      } catch (e) {
+                        console.error("Failed to install Fabric:", e);
+                        toast.error(`Failed to install Fabric: ${e}`);
+                      }
+                    }}
+                  >
+                    Install Fabric
+                  </Button>
+                  <Button
+                    variant="outline"
+                    className="flex-1"
+                    onClick={async () => {
+                      if (!activeInstanceId) return;
+                      try {
+                        await invoke("install_forge", {
+                          instanceId: activeInstanceId,
+                          gameVersion: selectedBaseVersion,
+                          installerVersion: "latest",
+                        });
+                        toast.success("Forge installation started");
+                        setShowModLoaderSelector(false);
+                      } catch (e) {
+                        console.error("Failed to install Forge:", e);
+                        toast.error(`Failed to install Forge: ${e}`);
+                      }
+                    }}
+                  >
+                    Install Forge
+                  </Button>
+                </div>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowModLoaderSelector(false)}
+                >
+                  Cancel
+                </Button>
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete Version</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to delete version "{versionToDelete}"? This
+              action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button
+              variant="outline"
+              onClick={() => {
+                setShowDeleteDialog(false);
+                setVersionToDelete(null);
+              }}
+              disabled={isDeleting}
+            >
+              Cancel
+            </Button>
+            <Button
+              variant="destructive"
+              onClick={handleDeleteVersion}
+              disabled={isDeleting}
+            >
+              {isDeleting ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                "Delete"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}
diff --git a/packages/ui-new/src/stores/assistant-store.ts b/packages/ui-new/src/stores/assistant-store.ts
new file mode 100644
index 0000000..180031b
--- /dev/null
+++ b/packages/ui-new/src/stores/assistant-store.ts
@@ -0,0 +1,201 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { create } from "zustand";
+import type { GenerationStats, StreamChunk } from "@/types/bindings/assistant";
+
+export interface Message {
+  role: "user" | "assistant" | "system";
+  content: string;
+  stats?: GenerationStats;
+}
+
+interface AssistantState {
+  // State
+  messages: Message[];
+  isProcessing: boolean;
+  isProviderHealthy: boolean | undefined;
+  streamingContent: string;
+  initialized: boolean;
+  streamUnlisten: UnlistenFn | null;
+
+  // Actions
+  init: () => Promise<void>;
+  checkHealth: () => Promise<void>;
+  sendMessage: (
+    content: string,
+    isEnabled: boolean,
+    provider: string,
+    endpoint: string,
+  ) => Promise<void>;
+  finishStreaming: () => void;
+  clearHistory: () => void;
+  setMessages: (messages: Message[]) => void;
+  setIsProcessing: (isProcessing: boolean) => void;
+  setIsProviderHealthy: (isProviderHealthy: boolean | undefined) => void;
+  setStreamingContent: (streamingContent: string) => void;
+}
+
+export const useAssistantStore = create<AssistantState>((set, get) => ({
+  // Initial state
+  messages: [],
+  isProcessing: false,
+  isProviderHealthy: false,
+  streamingContent: "",
+  initialized: false,
+  streamUnlisten: null,
+
+  // Actions
+  init: async () => {
+    const { initialized } = get();
+    if (initialized) return;
+    set({ initialized: true });
+    await get().checkHealth();
+  },
+
+  checkHealth: async () => {
+    try {
+      const isHealthy = await invoke<boolean>("assistant_check_health");
+      set({ isProviderHealthy: isHealthy });
+    } catch (e) {
+      console.error("Failed to check provider health:", e);
+      set({ isProviderHealthy: false });
+    }
+  },
+
+  finishStreaming: () => {
+    const { streamUnlisten } = get();
+    set({ isProcessing: false, streamingContent: "" });
+
+    if (streamUnlisten) {
+      streamUnlisten();
+      set({ streamUnlisten: null });
+    }
+  },
+
+  sendMessage: async (content, isEnabled, provider, endpoint) => {
+    if (!content.trim()) return;
+
+    const { messages } = get();
+
+    if (!isEnabled) {
+      const newMessage: Message = {
+        role: "assistant",
+        content: "Assistant is disabled. Enable it in Settings > AI Assistant.",
+      };
+      set({ messages: [...messages, { role: "user", content }, newMessage] });
+      return;
+    }
+
+    // Add user message
+    const userMessage: Message = { role: "user", content };
+    const updatedMessages = [...messages, userMessage];
+    set({
+      messages: updatedMessages,
+      isProcessing: true,
+      streamingContent: "",
+    });
+
+    // Add empty assistant message for streaming
+    const assistantMessage: Message = { role: "assistant", content: "" };
+    const withAssistantMessage = [...updatedMessages, assistantMessage];
+    set({ messages: withAssistantMessage });
+
+    try {
+      // Set up stream listener
+      const unlisten = await listen<StreamChunk>(
+        "assistant-stream",
+        (event) => {
+          const chunk = event.payload;
+          const currentState = get();
+
+          if (chunk.content) {
+            const newStreamingContent =
+              currentState.streamingContent + chunk.content;
+            const currentMessages = [...currentState.messages];
+            const lastIdx = currentMessages.length - 1;
+
+            if (lastIdx >= 0 && currentMessages[lastIdx].role === "assistant") {
+              currentMessages[lastIdx] = {
+                ...currentMessages[lastIdx],
+                content: newStreamingContent,
+              };
+              set({
+                streamingContent: newStreamingContent,
+                messages: currentMessages,
+              });
+            }
+          }
+
+          if (chunk.done) {
+            const finalMessages = [...currentState.messages];
+            const lastIdx = finalMessages.length - 1;
+
+            if (
+              chunk.stats &&
+              lastIdx >= 0 &&
+              finalMessages[lastIdx].role === "assistant"
+            ) {
+              finalMessages[lastIdx] = {
+                ...finalMessages[lastIdx],
+                stats: chunk.stats,
+              };
+              set({ messages: finalMessages });
+            }
+
+            get().finishStreaming();
+          }
+        },
+      );
+
+      set({ streamUnlisten: unlisten });
+
+      // Start streaming chat
+      await invoke<string>("assistant_chat_stream", {
+        messages: withAssistantMessage.slice(0, -1), // Exclude the empty assistant message
+      });
+    } catch (e) {
+      console.error("Failed to send message:", e);
+      const errorMessage = e instanceof Error ? e.message : String(e);
+
+      let helpText = "";
+      if (provider === "ollama") {
+        helpText = `\n\nPlease ensure Ollama is running at ${endpoint}.`;
+      } else if (provider === "openai") {
+        helpText = "\n\nPlease check your OpenAI API key in Settings.";
+      }
+
+      // Update the last message with error
+      const currentMessages = [...get().messages];
+      const lastIdx = currentMessages.length - 1;
+      if (lastIdx >= 0 && currentMessages[lastIdx].role === "assistant") {
+        currentMessages[lastIdx] = {
+          role: "assistant",
+          content: `Error: ${errorMessage}${helpText}`,
+        };
+        set({ messages: currentMessages });
+      }
+
+      get().finishStreaming();
+    }
+  },
+
+  clearHistory: () => {
+    set({ messages: [], streamingContent: "" });
+  },
+
+  setMessages: (messages) => {
+    set({ messages });
+  },
+
+  setIsProcessing: (isProcessing) => {
+    set({ isProcessing });
+  },
+
+  setIsProviderHealthy: (isProviderHealthy) => {
+    set({ isProviderHealthy });
+  },
+
+  setStreamingContent: (streamingContent) => {
+    set({ streamingContent });
+  },
+}));
diff --git a/packages/ui-new/src/stores/auth-store.ts b/packages/ui-new/src/stores/auth-store.ts
new file mode 100644
index 0000000..bf7e3c5
--- /dev/null
+++ b/packages/ui-new/src/stores/auth-store.ts
@@ -0,0 +1,296 @@
+import { invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { open } from "@tauri-apps/plugin-shell";
+import { toast } from "sonner";
+import { create } from "zustand";
+import type { Account, DeviceCodeResponse } from "../types/bindings/auth";
+
+interface AuthState {
+  // State
+  currentAccount: Account | null;
+  isLoginModalOpen: boolean;
+  isLogoutConfirmOpen: boolean;
+  loginMode: "select" | "offline" | "microsoft";
+  offlineUsername: string;
+  deviceCodeData: DeviceCodeResponse | null;
+  msLoginLoading: boolean;
+  msLoginStatus: string;
+
+  // Private state
+  pollInterval: ReturnType<typeof setInterval> | null;
+  isPollingRequestActive: boolean;
+  authProgressUnlisten: UnlistenFn | null;
+
+  // Actions
+  checkAccount: () => Promise<void>;
+  openLoginModal: () => void;
+  openLogoutConfirm: () => void;
+  cancelLogout: () => void;
+  confirmLogout: () => Promise<void>;
+  closeLoginModal: () => void;
+  resetLoginState: () => void;
+  performOfflineLogin: () => Promise<void>;
+  startMicrosoftLogin: () => Promise<void>;
+  checkLoginStatus: (deviceCode: string) => Promise<void>;
+  stopPolling: () => void;
+  cancelMicrosoftLogin: () => void;
+  setLoginMode: (mode: "select" | "offline" | "microsoft") => void;
+  setOfflineUsername: (username: string) => void;
+}
+
+export const useAuthStore = create<AuthState>((set, get) => ({
+  // Initial state
+  currentAccount: null,
+  isLoginModalOpen: false,
+  isLogoutConfirmOpen: false,
+  loginMode: "select",
+  offlineUsername: "",
+  deviceCodeData: null,
+  msLoginLoading: false,
+  msLoginStatus: "Waiting for authorization...",
+
+  // Private state
+  pollInterval: null,
+  isPollingRequestActive: false,
+  authProgressUnlisten: null,
+
+  // Actions
+  checkAccount: async () => {
+    try {
+      const acc = await invoke<Account | null>("get_active_account");
+      set({ currentAccount: acc });
+    } catch (error) {
+      console.error("Failed to check account:", error);
+    }
+  },
+
+  openLoginModal: () => {
+    const { currentAccount } = get();
+    if (currentAccount) {
+      // Show custom logout confirmation dialog
+      set({ isLogoutConfirmOpen: true });
+      return;
+    }
+    get().resetLoginState();
+    set({ isLoginModalOpen: true });
+  },
+
+  openLogoutConfirm: () => {
+    set({ isLogoutConfirmOpen: true });
+  },
+
+  cancelLogout: () => {
+    set({ isLogoutConfirmOpen: false });
+  },
+
+  confirmLogout: async () => {
+    set({ isLogoutConfirmOpen: false });
+    try {
+      await invoke("logout");
+      set({ currentAccount: null });
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  },
+
+  closeLoginModal: () => {
+    get().stopPolling();
+    set({ isLoginModalOpen: false });
+  },
+
+  resetLoginState: () => {
+    set({
+      loginMode: "select",
+      offlineUsername: "",
+      deviceCodeData: null,
+      msLoginLoading: false,
+      msLoginStatus: "Waiting for authorization...",
+    });
+  },
+
+  performOfflineLogin: async () => {
+    const { offlineUsername } = get();
+    if (!offlineUsername.trim()) return;
+
+    try {
+      const account = await invoke<Account>("login_offline", {
+        username: offlineUsername,
+      });
+      set({
+        currentAccount: account,
+        isLoginModalOpen: false,
+        offlineUsername: "",
+      });
+    } catch (error) {
+      // Keep UI-friendly behavior consistent with prior code
+      alert("Login failed: " + String(error));
+    }
+  },
+
+  startMicrosoftLogin: async () => {
+    // Prepare UI state
+    set({
+      msLoginLoading: true,
+      msLoginStatus: "Waiting for authorization...",
+      loginMode: "microsoft",
+      deviceCodeData: null,
+    });
+
+    // Listen to general launcher logs so we can display progress to the user.
+    // The backend emits logs via "launcher-log"; using that keeps this store decoupled
+    // from a dedicated auth event channel (backend may reuse launcher-log).
+    try {
+      const unlisten = await listen("launcher-log", (event) => {
+        const payload = event.payload;
+        // Normalize payload to string if possible
+        const message =
+          typeof payload === "string"
+            ? payload
+            : (payload?.toString?.() ?? JSON.stringify(payload));
+        set({ msLoginStatus: message });
+      });
+      set({ authProgressUnlisten: unlisten });
+    } catch (err) {
+      console.warn("Failed to attach launcher-log listener:", err);
+    }
+
+    try {
+      const deviceCodeData = await invoke<DeviceCodeResponse>(
+        "start_microsoft_login",
+      );
+      set({ deviceCodeData });
+
+      if (deviceCodeData) {
+        // Try to copy user code to clipboard for convenience (best-effort)
+        try {
+          await navigator.clipboard?.writeText(deviceCodeData.userCode ?? "");
+        } catch (err) {
+          // ignore clipboard errors
+          console.debug("Clipboard copy failed:", err);
+        }
+
+        // Open verification URI in default browser
+        try {
+          if (deviceCodeData.verificationUri) {
+            await open(deviceCodeData.verificationUri);
+          }
+        } catch (err) {
+          console.debug("Failed to open verification URI:", err);
+        }
+
+        // Start polling for completion
+        // `interval` from the bindings is a bigint (seconds). Convert safely to number.
+        const intervalSeconds =
+          deviceCodeData.interval !== undefined &&
+          deviceCodeData.interval !== null
+            ? Number(deviceCodeData.interval)
+            : 5;
+        const intervalMs = intervalSeconds * 1000;
+        const pollInterval = setInterval(
+          () => get().checkLoginStatus(deviceCodeData.deviceCode),
+          intervalMs,
+        );
+        set({ pollInterval });
+      }
+    } catch (error) {
+      toast.error(`Failed to start Microsoft login: ${error}`);
+      set({ loginMode: "select" });
+      // cleanup listener if present
+      const { authProgressUnlisten } = get();
+      if (authProgressUnlisten) {
+        authProgressUnlisten();
+        set({ authProgressUnlisten: null });
+      }
+    } finally {
+      set({ msLoginLoading: false });
+    }
+  },
+
+  checkLoginStatus: async (deviceCode: string) => {
+    const { isPollingRequestActive } = get();
+    if (isPollingRequestActive) return;
+
+    set({ isPollingRequestActive: true });
+
+    try {
+      const account = await invoke<Account>("complete_microsoft_login", {
+        deviceCode,
+      });
+
+      // On success, stop polling and cleanup listener
+      get().stopPolling();
+      const { authProgressUnlisten } = get();
+      if (authProgressUnlisten) {
+        authProgressUnlisten();
+        set({ authProgressUnlisten: null });
+      }
+
+      set({
+        currentAccount: account,
+        isLoginModalOpen: false,
+      });
+    } catch (error: unknown) {
+      const errStr = String(error);
+      if (errStr.includes("authorization_pending")) {
+        // Still waiting — keep polling
+      } else {
+        set({ msLoginStatus: "Error: " + errStr });
+
+        if (
+          errStr.includes("expired_token") ||
+          errStr.includes("access_denied")
+        ) {
+          // Terminal errors — stop polling and reset state
+          get().stopPolling();
+          const { authProgressUnlisten } = get();
+          if (authProgressUnlisten) {
+            authProgressUnlisten();
+            set({ authProgressUnlisten: null });
+          }
+          alert("Login failed: " + errStr);
+          set({ loginMode: "select" });
+        }
+      }
+    } finally {
+      set({ isPollingRequestActive: false });
+    }
+  },
+
+  stopPolling: () => {
+    const { pollInterval, authProgressUnlisten } = get();
+    if (pollInterval) {
+      try {
+        clearInterval(pollInterval);
+      } catch (err) {
+        console.debug("Failed to clear poll interval:", err);
+      }
+      set({ pollInterval: null });
+    }
+    if (authProgressUnlisten) {
+      try {
+        authProgressUnlisten();
+      } catch (err) {
+        console.debug("Failed to unlisten auth progress:", err);
+      }
+      set({ authProgressUnlisten: null });
+    }
+  },
+
+  cancelMicrosoftLogin: () => {
+    get().stopPolling();
+    set({
+      deviceCodeData: null,
+      msLoginLoading: false,
+      msLoginStatus: "",
+      loginMode: "select",
+    });
+  },
+
+  setLoginMode: (mode: "select" | "offline" | "microsoft") => {
+    set({ loginMode: mode });
+  },
+
+  setOfflineUsername: (username: string) => {
+    set({ offlineUsername: username });
+  },
+}));
diff --git a/packages/ui-new/src/stores/game-store.ts b/packages/ui-new/src/stores/game-store.ts
new file mode 100644
index 0000000..541b386
--- /dev/null
+++ b/packages/ui-new/src/stores/game-store.ts
@@ -0,0 +1,101 @@
+import { invoke } from "@tauri-apps/api/core";
+import { toast } from "sonner";
+import { create } from "zustand";
+import type { Version } from "@/types/bindings/manifest";
+
+interface GameState {
+  // State
+  versions: Version[];
+  selectedVersion: string;
+
+  // Computed property
+  latestRelease: Version | undefined;
+
+  // Actions
+  loadVersions: (instanceId?: string) => Promise<void>;
+  startGame: (
+    currentAccount: any,
+    openLoginModal: () => void,
+    activeInstanceId: string | null,
+    setView: (view: any) => void,
+  ) => Promise<void>;
+  setSelectedVersion: (version: string) => void;
+  setVersions: (versions: Version[]) => void;
+}
+
+export const useGameStore = create<GameState>((set, get) => ({
+  // Initial state
+  versions: [],
+  selectedVersion: "",
+
+  // Computed property
+  get latestRelease() {
+    return get().versions.find((v) => v.type === "release");
+  },
+
+  // Actions
+  loadVersions: async (instanceId?: string) => {
+    console.log("Loading versions for instance:", instanceId);
+    try {
+      // Ask the backend for known versions (optionally scoped to an instance).
+      // The Tauri command `get_versions` is expected to return an array of `Version`.
+      const versions = await invoke<Version[]>("get_versions", { instanceId });
+      set({ versions: versions ?? [] });
+    } catch (e) {
+      console.error("Failed to load versions:", e);
+      // Keep the store consistent on error by clearing versions.
+      set({ versions: [] });
+    }
+  },
+
+  startGame: async (
+    currentAccount,
+    openLoginModal,
+    activeInstanceId,
+    setView,
+  ) => {
+    const { selectedVersion } = get();
+
+    if (!currentAccount) {
+      alert("Please login first!");
+      openLoginModal();
+      return;
+    }
+
+    if (!selectedVersion) {
+      alert("Please select a version!");
+      return;
+    }
+
+    if (!activeInstanceId) {
+      alert("Please select an instance first!");
+      setView("instances");
+      return;
+    }
+
+    toast.info("Preparing to launch " + selectedVersion + "...");
+
+    try {
+      // Note: In production, this would call Tauri invoke
+      // const msg = await invoke<string>("start_game", {
+      //   instanceId: activeInstanceId,
+      //   versionId: selectedVersion,
+      // });
+
+      // Simulate success
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      toast.success("Game started successfully!");
+    } catch (e) {
+      console.error(e);
+      toast.error(`Error: ${e}`);
+    }
+  },
+
+  setSelectedVersion: (version: string) => {
+    set({ selectedVersion: version });
+  },
+
+  setVersions: (versions: Version[]) => {
+    set({ versions });
+  },
+}));
diff --git a/packages/ui-new/src/stores/instances-store.ts b/packages/ui-new/src/stores/instances-store.ts
new file mode 100644
index 0000000..4636b79
--- /dev/null
+++ b/packages/ui-new/src/stores/instances-store.ts
@@ -0,0 +1,149 @@
+import { invoke } from "@tauri-apps/api/core";
+import { toast } from "sonner";
+import { create } from "zustand";
+import type { Instance } from "../types/bindings/instance";
+
+interface InstancesState {
+  // State
+  instances: Instance[];
+  activeInstanceId: string | null;
+
+  // Computed property
+  activeInstance: Instance | null;
+
+  // Actions
+  loadInstances: () => Promise<void>;
+  createInstance: (name: string) => Promise<Instance | null>;
+  deleteInstance: (id: string) => Promise<void>;
+  updateInstance: (instance: Instance) => Promise<void>;
+  setActiveInstance: (id: string) => Promise<void>;
+  duplicateInstance: (id: string, newName: string) => Promise<Instance | null>;
+  getInstance: (id: string) => Promise<Instance | null>;
+  setInstances: (instances: Instance[]) => void;
+  setActiveInstanceId: (id: string | null) => void;
+}
+
+export const useInstancesStore = create<InstancesState>((set, get) => ({
+  // Initial state
+  instances: [],
+  activeInstanceId: null,
+
+  // Computed property
+  get activeInstance() {
+    const { instances, activeInstanceId } = get();
+    if (!activeInstanceId) return null;
+    return instances.find((i) => i.id === activeInstanceId) || null;
+  },
+
+  // Actions
+  loadInstances: async () => {
+    try {
+      const instances = await invoke<Instance[]>("list_instances");
+      const active = await invoke<Instance | null>("get_active_instance");
+
+      let newActiveInstanceId = null;
+      if (active) {
+        newActiveInstanceId = active.id;
+      } else if (instances.length > 0) {
+        // If no active instance but instances exist, set the first one as active
+        await get().setActiveInstance(instances[0].id);
+        newActiveInstanceId = instances[0].id;
+      }
+
+      set({ instances, activeInstanceId: newActiveInstanceId });
+    } catch (e) {
+      console.error("Failed to load instances:", e);
+      toast.error("Error loading instances: " + String(e));
+    }
+  },
+
+  createInstance: async (name) => {
+    try {
+      const instance = await invoke<Instance>("create_instance", { name });
+      await get().loadInstances();
+      toast.success(`Instance "${name}" created successfully`);
+      return instance;
+    } catch (e) {
+      console.error("Failed to create instance:", e);
+      toast.error("Error creating instance: " + String(e));
+      return null;
+    }
+  },
+
+  deleteInstance: async (id) => {
+    try {
+      await invoke("delete_instance", { instanceId: id });
+      await get().loadInstances();
+
+      // If deleted instance was active, set another as active
+      const { instances, activeInstanceId } = get();
+      if (activeInstanceId === id) {
+        if (instances.length > 0) {
+          await get().setActiveInstance(instances[0].id);
+        } else {
+          set({ activeInstanceId: null });
+        }
+      }
+
+      toast.success("Instance deleted successfully");
+    } catch (e) {
+      console.error("Failed to delete instance:", e);
+      toast.error("Error deleting instance: " + String(e));
+    }
+  },
+
+  updateInstance: async (instance) => {
+    try {
+      await invoke("update_instance", { instance });
+      await get().loadInstances();
+      toast.success("Instance updated successfully");
+    } catch (e) {
+      console.error("Failed to update instance:", e);
+      toast.error("Error updating instance: " + String(e));
+    }
+  },
+
+  setActiveInstance: async (id) => {
+    try {
+      await invoke("set_active_instance", { instanceId: id });
+      set({ activeInstanceId: id });
+      toast.success("Active instance changed");
+    } catch (e) {
+      console.error("Failed to set active instance:", e);
+      toast.error("Error setting active instance: " + String(e));
+    }
+  },
+
+  duplicateInstance: async (id, newName) => {
+    try {
+      const instance = await invoke<Instance>("duplicate_instance", {
+        instanceId: id,
+        newName,
+      });
+      await get().loadInstances();
+      toast.success(`Instance duplicated as "${newName}"`);
+      return instance;
+    } catch (e) {
+      console.error("Failed to duplicate instance:", e);
+      toast.error("Error duplicating instance: " + String(e));
+      return null;
+    }
+  },
+
+  getInstance: async (id) => {
+    try {
+      return await invoke<Instance>("get_instance", { instanceId: id });
+    } catch (e) {
+      console.error("Failed to get instance:", e);
+      return null;
+    }
+  },
+
+  setInstances: (instances) => {
+    set({ instances });
+  },
+
+  setActiveInstanceId: (id) => {
+    set({ activeInstanceId: id });
+  },
+}));
diff --git a/packages/ui-new/src/stores/logs-store.ts b/packages/ui-new/src/stores/logs-store.ts
new file mode 100644
index 0000000..b19f206
--- /dev/null
+++ b/packages/ui-new/src/stores/logs-store.ts
@@ -0,0 +1,200 @@
+import { listen } from "@tauri-apps/api/event";
+import { create } from "zustand";
+
+export interface LogEntry {
+  id: number;
+  timestamp: string;
+  level: "info" | "warn" | "error" | "debug" | "fatal";
+  source: string;
+  message: string;
+}
+
+// Parse Minecraft/Java log format: [HH:MM:SS] [Thread/LEVEL]: message
+// or: [HH:MM:SS] [Thread/LEVEL] [Source]: message
+const GAME_LOG_REGEX =
+  /^\[[\d:]+\]\s*\[([^\]]+)\/(\w+)\](?:\s*\[([^\]]+)\])?:\s*(.*)$/;
+
+function parseGameLogLevel(levelStr: string): LogEntry["level"] {
+  const upper = levelStr.toUpperCase();
+  if (upper === "INFO") return "info";
+  if (upper === "WARN" || upper === "WARNING") return "warn";
+  if (upper === "ERROR" || upper === "SEVERE") return "error";
+  if (
+    upper === "DEBUG" ||
+    upper === "TRACE" ||
+    upper === "FINE" ||
+    upper === "FINER" ||
+    upper === "FINEST"
+  )
+    return "debug";
+  if (upper === "FATAL") return "fatal";
+  return "info";
+}
+
+interface LogsState {
+  // State
+  logs: LogEntry[];
+  sources: Set<string>;
+  nextId: number;
+  maxLogs: number;
+  initialized: boolean;
+
+  // Actions
+  addLog: (level: LogEntry["level"], source: string, message: string) => void;
+  addGameLog: (rawLine: string, isStderr: boolean) => void;
+  clear: () => void;
+  exportLogs: (filteredLogs: LogEntry[]) => string;
+  init: () => Promise<void>;
+  setLogs: (logs: LogEntry[]) => void;
+  setSources: (sources: Set<string>) => void;
+}
+
+export const useLogsStore = create<LogsState>((set, get) => ({
+  // Initial state
+  logs: [],
+  sources: new Set(["Launcher"]),
+  nextId: 0,
+  maxLogs: 5000,
+  initialized: false,
+
+  // Actions
+  addLog: (level, source, message) => {
+    const { nextId, logs, maxLogs, sources } = get();
+    const now = new Date();
+    const timestamp =
+      now.toLocaleTimeString() +
+      "." +
+      now.getMilliseconds().toString().padStart(3, "0");
+
+    const newLog: LogEntry = {
+      id: nextId,
+      timestamp,
+      level,
+      source,
+      message,
+    };
+
+    const newLogs = [...logs, newLog];
+    const newSources = new Set(sources);
+
+    // Track source
+    if (!newSources.has(source)) {
+      newSources.add(source);
+    }
+
+    // Trim logs if exceeding max
+    const trimmedLogs =
+      newLogs.length > maxLogs ? newLogs.slice(-maxLogs) : newLogs;
+
+    set({
+      logs: trimmedLogs,
+      sources: newSources,
+      nextId: nextId + 1,
+    });
+  },
+
+  addGameLog: (rawLine, isStderr) => {
+    const match = rawLine.match(GAME_LOG_REGEX);
+
+    if (match) {
+      const [, thread, levelStr, extraSource, message] = match;
+      const level = parseGameLogLevel(levelStr);
+      // Use extraSource if available, otherwise use thread name as source hint
+      const source = extraSource || `Game/${thread.split("-")[0]}`;
+      get().addLog(level, source, message);
+    } else {
+      // Fallback: couldn't parse, use stderr as error indicator
+      const level = isStderr ? "error" : "info";
+      get().addLog(level, "Game", rawLine);
+    }
+  },
+
+  clear: () => {
+    set({
+      logs: [],
+      sources: new Set(["Launcher"]),
+    });
+    get().addLog("info", "Launcher", "Logs cleared");
+  },
+
+  exportLogs: (filteredLogs) => {
+    return filteredLogs
+      .map(
+        (l) =>
+          `[${l.timestamp}] [${l.source}/${l.level.toUpperCase()}] ${l.message}`,
+      )
+      .join("\n");
+  },
+
+  init: async () => {
+    const { initialized } = get();
+    if (initialized) return;
+
+    set({ initialized: true });
+
+    // Initial log
+    get().addLog("info", "Launcher", "Logs initialized");
+
+    // General Launcher Logs
+    await listen<string>("launcher-log", (e) => {
+      get().addLog("info", "Launcher", e.payload);
+    });
+
+    // Game Stdout - parse log level
+    await listen<string>("game-stdout", (e) => {
+      get().addGameLog(e.payload, false);
+    });
+
+    // Game Stderr - parse log level, default to error
+    await listen<string>("game-stderr", (e) => {
+      get().addGameLog(e.payload, true);
+    });
+
+    // Download Events (Summarized)
+    await listen("download-start", (e: any) => {
+      get().addLog(
+        "info",
+        "Downloader",
+        `Starting batch download of ${e.payload} files...`,
+      );
+    });
+
+    await listen("download-complete", () => {
+      get().addLog("info", "Downloader", "All downloads completed.");
+    });
+
+    // Listen to file download progress to log finished files
+    await listen<any>("download-progress", (e) => {
+      const p = e.payload;
+      if (p.status === "Finished") {
+        if (p.file.endsWith(".jar")) {
+          get().addLog("info", "Downloader", `Downloaded ${p.file}`);
+        }
+      }
+    });
+
+    // Java Download
+    await listen<any>("java-download-progress", (e) => {
+      const p = e.payload;
+      if (p.status === "Downloading" && p.percentage === 0) {
+        get().addLog(
+          "info",
+          "JavaInstaller",
+          `Downloading Java: ${p.file_name}`,
+        );
+      } else if (p.status === "Completed") {
+        get().addLog("info", "JavaInstaller", `Java installed: ${p.file_name}`);
+      } else if (p.status === "Error") {
+        get().addLog("error", "JavaInstaller", `Java download error`);
+      }
+    });
+  },
+
+  setLogs: (logs) => {
+    set({ logs });
+  },
+
+  setSources: (sources) => {
+    set({ sources });
+  },
+}));
diff --git a/packages/ui-new/src/stores/releases-store.ts b/packages/ui-new/src/stores/releases-store.ts
new file mode 100644
index 0000000..56afa08
--- /dev/null
+++ b/packages/ui-new/src/stores/releases-store.ts
@@ -0,0 +1,63 @@
+import { invoke } from "@tauri-apps/api/core";
+import { create } from "zustand";
+import type { GithubRelease } from "@/types/bindings/core";
+
+interface ReleasesState {
+  // State
+  releases: GithubRelease[];
+  isLoading: boolean;
+  isLoaded: boolean;
+  error: string | null;
+
+  // Actions
+  loadReleases: () => Promise<void>;
+  setReleases: (releases: GithubRelease[]) => void;
+  setIsLoading: (isLoading: boolean) => void;
+  setIsLoaded: (isLoaded: boolean) => void;
+  setError: (error: string | null) => void;
+}
+
+export const useReleasesStore = create<ReleasesState>((set, get) => ({
+  // Initial state
+  releases: [],
+  isLoading: false,
+  isLoaded: false,
+  error: null,
+
+  // Actions
+  loadReleases: async () => {
+    const { isLoaded, isLoading } = get();
+
+    // If already loaded or currently loading, skip to prevent duplicate requests
+    if (isLoaded || isLoading) return;
+
+    set({ isLoading: true, error: null });
+
+    try {
+      const releases = await invoke<GithubRelease[]>("get_github_releases");
+      set({ releases, isLoaded: true });
+    } catch (e) {
+      const error = e instanceof Error ? e.message : String(e);
+      console.error("Failed to load releases:", e);
+      set({ error });
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+
+  setReleases: (releases) => {
+    set({ releases });
+  },
+
+  setIsLoading: (isLoading) => {
+    set({ isLoading });
+  },
+
+  setIsLoaded: (isLoaded) => {
+    set({ isLoaded });
+  },
+
+  setError: (error) => {
+    set({ error });
+  },
+}));
diff --git a/packages/ui-new/src/stores/settings-store.ts b/packages/ui-new/src/stores/settings-store.ts
new file mode 100644
index 0000000..52da7fd
--- /dev/null
+++ b/packages/ui-new/src/stores/settings-store.ts
@@ -0,0 +1,568 @@
+import { convertFileSrc, invoke } from "@tauri-apps/api/core";
+import { listen, type UnlistenFn } from "@tauri-apps/api/event";
+import { toast } from "sonner";
+import { create } from "zustand";
+import type { ModelInfo } from "../types/bindings/assistant";
+import type { LauncherConfig } from "../types/bindings/config";
+import type {
+  JavaDownloadProgress,
+  PendingJavaDownload,
+} from "../types/bindings/downloader";
+import type {
+  JavaCatalog,
+  JavaDownloadInfo,
+  JavaInstallation,
+  JavaReleaseInfo,
+} from "../types/bindings/java";
+
+type JavaDownloadSource = "adoptium" | "mojang" | "azul";
+
+/**
+ * State shape for settings store.
+ *
+ * Note: Uses camelCase naming to match ts-rs generated bindings (which now use
+ * `serde(rename_all = "camelCase")`). When reading raw binding objects from
+ * invoke, convert/mapping should be applied where necessary.
+ */
+interface SettingsState {
+  // State
+  settings: LauncherConfig;
+  javaInstallations: JavaInstallation[];
+  isDetectingJava: boolean;
+  showJavaDownloadModal: boolean;
+  selectedDownloadSource: JavaDownloadSource;
+  javaCatalog: JavaCatalog | null;
+  isLoadingCatalog: boolean;
+  catalogError: string;
+  selectedMajorVersion: number | null;
+  selectedImageType: "jre" | "jdk";
+  showOnlyRecommended: boolean;
+  searchQuery: string;
+  isDownloadingJava: boolean;
+  downloadProgress: JavaDownloadProgress | null;
+  javaDownloadStatus: string;
+  pendingDownloads: PendingJavaDownload[];
+  ollamaModels: ModelInfo[];
+  openaiModels: ModelInfo[];
+  isLoadingOllamaModels: boolean;
+  isLoadingOpenaiModels: boolean;
+  ollamaModelsError: string;
+  openaiModelsError: string;
+  showConfigEditor: boolean;
+  rawConfigContent: string;
+  configFilePath: string;
+  configEditorError: string;
+
+  // Computed / derived
+  backgroundUrl: string | undefined;
+  filteredReleases: JavaReleaseInfo[];
+  availableMajorVersions: number[];
+  installStatus: (
+    version: number,
+    imageType: string,
+  ) => "installed" | "downloading" | "available";
+  selectedRelease: JavaReleaseInfo | null;
+  currentModelOptions: Array<{
+    value: string;
+    label: string;
+    details?: string;
+  }>;
+
+  // Actions
+  loadSettings: () => Promise<void>;
+  saveSettings: () => Promise<void>;
+  // compatibility helper to mirror the older set({ key: value }) usage
+  set: (patch: Partial<Record<string, unknown>>) => void;
+
+  detectJava: () => Promise<void>;
+  selectJava: (path: string) => void;
+
+  openJavaDownloadModal: () => Promise<void>;
+  closeJavaDownloadModal: () => void;
+  loadJavaCatalog: (forceRefresh: boolean) => Promise<void>;
+  refreshCatalog: () => Promise<void>;
+  loadPendingDownloads: () => Promise<void>;
+  selectMajorVersion: (version: number) => void;
+  downloadJava: () => Promise<void>;
+  cancelDownload: () => Promise<void>;
+  resumeDownloads: () => Promise<void>;
+
+  openConfigEditor: () => Promise<void>;
+  closeConfigEditor: () => void;
+  saveRawConfig: () => Promise<void>;
+
+  loadOllamaModels: () => Promise<void>;
+  loadOpenaiModels: () => Promise<void>;
+
+  setSetting: <K extends keyof LauncherConfig>(
+    key: K,
+    value: LauncherConfig[K],
+  ) => void;
+  setAssistantSetting: <K extends keyof LauncherConfig["assistant"]>(
+    key: K,
+    value: LauncherConfig["assistant"][K],
+  ) => void;
+  setFeatureFlag: <K extends keyof LauncherConfig["featureFlags"]>(
+    key: K,
+    value: LauncherConfig["featureFlags"][K],
+  ) => void;
+
+  // Private
+  progressUnlisten: UnlistenFn | null;
+}
+
+/**
+ * Default settings (camelCase) — lightweight defaults used until `get_settings`
+ * returns real values.
+ */
+const defaultSettings: LauncherConfig = {
+  minMemory: 1024,
+  maxMemory: 2048,
+  javaPath: "java",
+  width: 854,
+  height: 480,
+  downloadThreads: 32,
+  enableGpuAcceleration: false,
+  enableVisualEffects: true,
+  activeEffect: "constellation",
+  theme: "dark",
+  customBackgroundPath: null,
+  logUploadService: "paste.rs",
+  pastebinApiKey: null,
+  assistant: {
+    enabled: true,
+    llmProvider: "ollama",
+    ollamaEndpoint: "http://localhost:11434",
+    ollamaModel: "llama3",
+    openaiApiKey: null,
+    openaiEndpoint: "https://api.openai.com/v1",
+    openaiModel: "gpt-3.5-turbo",
+    systemPrompt:
+      "You are a helpful Minecraft expert assistant. You help players with game issues, mod installation, performance optimization, and gameplay tips. Analyze any game logs provided and give concise, actionable advice.",
+    responseLanguage: "auto",
+    ttsEnabled: false,
+    ttsProvider: "disabled",
+  },
+  useSharedCaches: false,
+  keepLegacyPerInstanceStorage: true,
+  featureFlags: {
+    demoUser: false,
+    quickPlayEnabled: false,
+    quickPlayPath: null,
+    quickPlaySingleplayer: true,
+    quickPlayMultiplayerServer: null,
+  },
+};
+
+export const useSettingsStore = create<SettingsState>((set, get) => ({
+  // initial state
+  settings: defaultSettings,
+  javaInstallations: [],
+  isDetectingJava: false,
+  showJavaDownloadModal: false,
+  selectedDownloadSource: "adoptium",
+  javaCatalog: null,
+  isLoadingCatalog: false,
+  catalogError: "",
+  selectedMajorVersion: null,
+  selectedImageType: "jre",
+  showOnlyRecommended: true,
+  searchQuery: "",
+  isDownloadingJava: false,
+  downloadProgress: null,
+  javaDownloadStatus: "",
+  pendingDownloads: [],
+  ollamaModels: [],
+  openaiModels: [],
+  isLoadingOllamaModels: false,
+  isLoadingOpenaiModels: false,
+  ollamaModelsError: "",
+  openaiModelsError: "",
+  showConfigEditor: false,
+  rawConfigContent: "",
+  configFilePath: "",
+  configEditorError: "",
+  progressUnlisten: null,
+
+  // derived getters
+  get backgroundUrl() {
+    const { settings } = get();
+    if (settings.customBackgroundPath) {
+      return convertFileSrc(settings.customBackgroundPath);
+    }
+    return undefined;
+  },
+
+  get filteredReleases() {
+    const {
+      javaCatalog,
+      selectedMajorVersion,
+      selectedImageType,
+      showOnlyRecommended,
+      searchQuery,
+    } = get();
+
+    if (!javaCatalog) return [];
+
+    let releases = javaCatalog.releases;
+
+    if (selectedMajorVersion !== null) {
+      releases = releases.filter(
+        (r) => r.majorVersion === selectedMajorVersion,
+      );
+    }
+
+    releases = releases.filter((r) => r.imageType === selectedImageType);
+
+    if (showOnlyRecommended) {
+      releases = releases.filter((r) => r.isLts);
+    }
+
+    if (searchQuery.trim() !== "") {
+      const q = searchQuery.toLowerCase();
+      releases = releases.filter(
+        (r) =>
+          r.version.toLowerCase().includes(q) ||
+          (r.releaseName ?? "").toLowerCase().includes(q),
+      );
+    }
+
+    // sort newest-first by parsed version number
+    return releases.sort((a, b) => {
+      const aVer = parseFloat(a.version.split("-")[0]);
+      const bVer = parseFloat(b.version.split("-")[0]);
+      return bVer - aVer;
+    });
+  },
+
+  get availableMajorVersions() {
+    return get().javaCatalog?.availableMajorVersions || [];
+  },
+
+  installStatus: (version: number, imageType: string) => {
+    const {
+      javaInstallations,
+      pendingDownloads,
+      isDownloadingJava,
+      downloadProgress,
+    } = get();
+
+    const installed = javaInstallations.some(
+      (inst) => parseInt(inst.version.split(".")[0], 10) === version,
+    );
+    if (installed) return "installed";
+
+    if (
+      isDownloadingJava &&
+      downloadProgress?.fileName?.includes(`${version}`)
+    ) {
+      return "downloading";
+    }
+
+    const pending = pendingDownloads.some(
+      (d) => d.majorVersion === version && d.imageType === imageType,
+    );
+    if (pending) return "downloading";
+
+    return "available";
+  },
+
+  get selectedRelease() {
+    const { javaCatalog, selectedMajorVersion, selectedImageType } = get();
+    if (!javaCatalog || selectedMajorVersion === null) return null;
+    return (
+      javaCatalog.releases.find(
+        (r) =>
+          r.majorVersion === selectedMajorVersion &&
+          r.imageType === selectedImageType,
+      ) || null
+    );
+  },
+
+  get currentModelOptions() {
+    const { settings, ollamaModels, openaiModels } = get();
+    const provider = settings.assistant.llmProvider;
+    if (provider === "ollama") {
+      return ollamaModels.map((m) => ({
+        value: m.id,
+        label: m.name,
+        details: m.details || m.size || "",
+      }));
+    } else {
+      return openaiModels.map((m) => ({
+        value: m.id,
+        label: m.name,
+        details: m.details || "",
+      }));
+    }
+  },
+
+  // actions
+  loadSettings: async () => {
+    try {
+      const result = await invoke<LauncherConfig>("get_settings");
+      // result already uses camelCase fields from bindings
+      set({ settings: result });
+
+      // enforce dark theme at app-level if necessary
+      if (result.theme !== "dark") {
+        const updated = { ...result, theme: "dark" } as LauncherConfig;
+        set({ settings: updated });
+        await invoke("save_settings", { config: updated });
+      }
+
+      // ensure customBackgroundPath is undefined rather than null for reactiveness
+      if (!result.customBackgroundPath) {
+        set((s) => ({
+          settings: { ...s.settings, customBackgroundPath: null },
+        }));
+      }
+    } catch (e) {
+      console.error("Failed to load settings:", e);
+    }
+  },
+
+  saveSettings: async () => {
+    try {
+      const { settings } = get();
+
+      // Clean up empty strings to null where appropriate
+      if ((settings.customBackgroundPath ?? "") === "") {
+        set((state) => ({
+          settings: { ...state.settings, customBackgroundPath: null },
+        }));
+      }
+
+      await invoke("save_settings", { config: settings });
+      toast.success("Settings saved!");
+    } catch (e) {
+      console.error("Failed to save settings:", e);
+      toast.error(`Error saving settings: ${String(e)}`);
+    }
+  },
+
+  set: (patch: Partial<Record<string, unknown>>) => {
+    set(patch);
+  },
+
+  detectJava: async () => {
+    set({ isDetectingJava: true });
+    try {
+      const installs = await invoke<JavaInstallation[]>("detect_java");
+      set({ javaInstallations: installs });
+      if (installs.length === 0) toast.info("No Java installations found");
+      else toast.success(`Found ${installs.length} Java installation(s)`);
+    } catch (e) {
+      console.error("Failed to detect Java:", e);
+      toast.error(`Error detecting Java: ${String(e)}`);
+    } finally {
+      set({ isDetectingJava: false });
+    }
+  },
+
+  selectJava: (path: string) => {
+    set((s) => ({ settings: { ...s.settings, javaPath: path } }));
+  },
+
+  openJavaDownloadModal: async () => {
+    set({
+      showJavaDownloadModal: true,
+      javaDownloadStatus: "",
+      catalogError: "",
+      downloadProgress: null,
+    });
+
+    // attach event listener for download progress
+    const state = get();
+    if (state.progressUnlisten) {
+      state.progressUnlisten();
+    }
+
+    const unlisten = await listen<JavaDownloadProgress>(
+      "java-download-progress",
+      (event) => {
+        set({ downloadProgress: event.payload });
+      },
+    );
+
+    set({ progressUnlisten: unlisten });
+
+    // load catalog and pending downloads
+    await get().loadJavaCatalog(false);
+    await get().loadPendingDownloads();
+  },
+
+  closeJavaDownloadModal: () => {
+    const { isDownloadingJava, progressUnlisten } = get();
+
+    if (!isDownloadingJava) {
+      set({ showJavaDownloadModal: false });
+      if (progressUnlisten) {
+        try {
+          progressUnlisten();
+        } catch {
+          // ignore
+        }
+        set({ progressUnlisten: null });
+      }
+    }
+  },
+
+  loadJavaCatalog: async (forceRefresh: boolean) => {
+    set({ isLoadingCatalog: true, catalogError: "" });
+    try {
+      const cmd = forceRefresh ? "refresh_java_catalog" : "get_java_catalog";
+      const result = await invoke<JavaCatalog>(cmd);
+      set({ javaCatalog: result, isLoadingCatalog: false });
+    } catch (e) {
+      console.error("Failed to load Java catalog:", e);
+      set({ catalogError: String(e), isLoadingCatalog: false });
+    }
+  },
+
+  refreshCatalog: async () => {
+    await get().loadJavaCatalog(true);
+  },
+
+  loadPendingDownloads: async () => {
+    try {
+      const pending = await invoke<PendingJavaDownload[]>(
+        "get_pending_java_downloads",
+      );
+      set({ pendingDownloads: pending });
+    } catch (e) {
+      console.error("Failed to load pending downloads:", e);
+    }
+  },
+
+  selectMajorVersion: (version: number) => {
+    set({ selectedMajorVersion: version });
+  },
+
+  downloadJava: async () => {
+    const { selectedMajorVersion, selectedImageType, selectedDownloadSource } =
+      get();
+    if (!selectedMajorVersion) return;
+    set({ isDownloadingJava: true, javaDownloadStatus: "Starting..." });
+    try {
+      const result = await invoke<JavaDownloadInfo>("download_java", {
+        majorVersion: selectedMajorVersion,
+        imageType: selectedImageType,
+        source: selectedDownloadSource,
+      });
+      set({
+        javaDownloadStatus: `Java ${selectedMajorVersion} download started: ${result.fileName}`,
+      });
+      toast.success("Download started");
+    } catch (e) {
+      console.error("Failed to download Java:", e);
+      toast.error(`Failed to start Java download: ${String(e)}`);
+    } finally {
+      set({ isDownloadingJava: false });
+    }
+  },
+
+  cancelDownload: async () => {
+    try {
+      await invoke("cancel_java_download");
+      toast.success("Cancelled Java download");
+      set({ isDownloadingJava: false, javaDownloadStatus: "" });
+    } catch (e) {
+      console.error("Failed to cancel download:", e);
+      toast.error(`Failed to cancel download: ${String(e)}`);
+    }
+  },
+
+  resumeDownloads: async () => {
+    try {
+      const installed = await invoke<boolean>("resume_java_downloads");
+      if (installed) toast.success("Resumed Java downloads");
+      else toast.info("No downloads to resume");
+    } catch (e) {
+      console.error("Failed to resume downloads:", e);
+      toast.error(`Failed to resume downloads: ${String(e)}`);
+    }
+  },
+
+  openConfigEditor: async () => {
+    try {
+      const path = await invoke<string>("get_config_path");
+      const content = await invoke<string>("read_config_raw");
+      set({
+        configFilePath: path,
+        rawConfigContent: content,
+        showConfigEditor: true,
+      });
+    } catch (e) {
+      console.error("Failed to open config editor:", e);
+      set({ configEditorError: String(e) });
+    }
+  },
+
+  closeConfigEditor: () => {
+    set({
+      showConfigEditor: false,
+      rawConfigContent: "",
+      configFilePath: "",
+      configEditorError: "",
+    });
+  },
+
+  saveRawConfig: async () => {
+    try {
+      await invoke("write_config_raw", { content: get().rawConfigContent });
+      toast.success("Config saved");
+      set({ showConfigEditor: false });
+    } catch (e) {
+      console.error("Failed to save config:", e);
+      set({ configEditorError: String(e) });
+      toast.error(`Failed to save config: ${String(e)}`);
+    }
+  },
+
+  loadOllamaModels: async () => {
+    set({ isLoadingOllamaModels: true, ollamaModelsError: "" });
+    try {
+      const models = await invoke<ModelInfo[]>("get_ollama_models");
+      set({ ollamaModels: models, isLoadingOllamaModels: false });
+    } catch (e) {
+      console.error("Failed to load Ollama models:", e);
+      set({ isLoadingOllamaModels: false, ollamaModelsError: String(e) });
+    }
+  },
+
+  loadOpenaiModels: async () => {
+    set({ isLoadingOpenaiModels: true, openaiModelsError: "" });
+    try {
+      const models = await invoke<ModelInfo[]>("get_openai_models");
+      set({ openaiModels: models, isLoadingOpenaiModels: false });
+    } catch (e) {
+      console.error("Failed to load OpenAI models:", e);
+      set({ isLoadingOpenaiModels: false, openaiModelsError: String(e) });
+    }
+  },
+
+  setSetting: (key, value) => {
+    set((s) => ({
+      settings: { ...s.settings, [key]: value } as unknown as LauncherConfig,
+    }));
+  },
+
+  setAssistantSetting: (key, value) => {
+    set((s) => ({
+      settings: {
+        ...s.settings,
+        assistant: { ...s.settings.assistant, [key]: value },
+      } as LauncherConfig,
+    }));
+  },
+
+  setFeatureFlag: (key, value) => {
+    set((s) => ({
+      settings: {
+        ...s.settings,
+        featureFlags: { ...s.settings.featureFlags, [key]: value },
+      } as LauncherConfig,
+    }));
+  },
+}));
diff --git a/packages/ui-new/src/stores/ui-store.ts b/packages/ui-new/src/stores/ui-store.ts
new file mode 100644
index 0000000..89b9191
--- /dev/null
+++ b/packages/ui-new/src/stores/ui-store.ts
@@ -0,0 +1,42 @@
+import { create } from "zustand";
+
+export type ViewType = "home" | "versions" | "settings" | "guide" | "instances";
+
+interface UIState {
+  // State
+  currentView: ViewType;
+  showConsole: boolean;
+  appVersion: string;
+
+  // Actions
+  toggleConsole: () => void;
+  setView: (view: ViewType) => void;
+  setAppVersion: (version: string) => void;
+}
+
+export const useUIStore = create<UIState>((set) => ({
+  // Initial state
+  currentView: "home",
+  showConsole: false,
+  appVersion: "...",
+
+  // Actions
+  toggleConsole: () => {
+    set((state) => ({ showConsole: !state.showConsole }));
+  },
+
+  setView: (view: ViewType) => {
+    set({ currentView: view });
+  },
+
+  setAppVersion: (version: string) => {
+    set({ appVersion: version });
+  },
+}));
+
+// Provide lowercase alias for compatibility with existing imports.
+// Use a function wrapper to ensure the named export exists as a callable value
+// at runtime (some bundlers/tree-shakers may remove simple aliases).
+export function useUiStore() {
+  return useUIStore();
+}
diff --git a/packages/ui-new/src/types/bindings/assistant.ts b/packages/ui-new/src/types/bindings/assistant.ts
new file mode 100644
index 0000000..827f008
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/assistant.ts
@@ -0,0 +1,25 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type GenerationStats = {
+  totalDuration: bigint;
+  loadDuration: bigint;
+  promptEvalCount: bigint;
+  promptEvalDuration: bigint;
+  evalCount: bigint;
+  evalDuration: bigint;
+};
+
+export type Message = { role: string; content: string };
+
+export type ModelInfo = {
+  id: string;
+  name: string;
+  size: string | null;
+  details: string | null;
+};
+
+export type StreamChunk = {
+  content: string;
+  done: boolean;
+  stats: GenerationStats | null;
+};
diff --git a/packages/ui-new/src/types/bindings/auth.ts b/packages/ui-new/src/types/bindings/auth.ts
new file mode 100644
index 0000000..a65f0a4
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/auth.ts
@@ -0,0 +1,32 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Account =
+  | ({ type: "offline" } & OfflineAccount)
+  | ({ type: "microsoft" } & MicrosoftAccount);
+
+export type DeviceCodeResponse = {
+  userCode: string;
+  deviceCode: string;
+  verificationUri: string;
+  expiresIn: bigint;
+  interval: bigint;
+  message: string | null;
+};
+
+export type MicrosoftAccount = {
+  username: string;
+  uuid: string;
+  accessToken: string;
+  refreshToken: string | null;
+  expiresAt: bigint;
+};
+
+export type MinecraftProfile = { id: string; name: string };
+
+export type OfflineAccount = { username: string; uuid: string };
+
+export type TokenResponse = {
+  accessToken: string;
+  refreshToken: string | null;
+  expiresIn: bigint;
+};
diff --git a/packages/ui-new/src/types/bindings/config.ts b/packages/ui-new/src/types/bindings/config.ts
new file mode 100644
index 0000000..e9de4f5
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/config.ts
@@ -0,0 +1,61 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type AssistantConfig = {
+  enabled: boolean;
+  llmProvider: string;
+  ollamaEndpoint: string;
+  ollamaModel: string;
+  openaiApiKey: string | null;
+  openaiEndpoint: string;
+  openaiModel: string;
+  systemPrompt: string;
+  responseLanguage: string;
+  ttsEnabled: boolean;
+  ttsProvider: string;
+};
+
+/**
+ * Feature-gated arguments configuration
+ */
+export type FeatureFlags = {
+  /**
+   * Demo user: enables demo-related arguments when rules require it
+   */
+  demoUser: boolean;
+  /**
+   * Quick Play: enable quick play arguments
+   */
+  quickPlayEnabled: boolean;
+  /**
+   * Quick Play singleplayer world path (if provided)
+   */
+  quickPlayPath: string | null;
+  /**
+   * Quick Play singleplayer flag
+   */
+  quickPlaySingleplayer: boolean;
+  /**
+   * Quick Play multiplayer server address (optional)
+   */
+  quickPlayMultiplayerServer: string | null;
+};
+
+export type LauncherConfig = {
+  minMemory: number;
+  maxMemory: number;
+  javaPath: string;
+  width: number;
+  height: number;
+  downloadThreads: number;
+  customBackgroundPath: string | null;
+  enableGpuAcceleration: boolean;
+  enableVisualEffects: boolean;
+  activeEffect: string;
+  theme: string;
+  logUploadService: string;
+  pastebinApiKey: string | null;
+  assistant: AssistantConfig;
+  useSharedCaches: boolean;
+  keepLegacyPerInstanceStorage: boolean;
+  featureFlags: FeatureFlags;
+};
diff --git a/packages/ui-new/src/types/bindings/core.ts b/packages/ui-new/src/types/bindings/core.ts
new file mode 100644
index 0000000..94e3bde
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/core.ts
@@ -0,0 +1,47 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * File information for instance file browser
+ */
+export type FileInfo = {
+  name: string;
+  path: string;
+  isDirectory: boolean;
+  size: bigint;
+  modified: bigint;
+};
+
+export type GithubRelease = {
+  tagName: string;
+  name: string;
+  publishedAt: string;
+  body: string;
+  htmlUrl: string;
+};
+
+/**
+ * Installed version info
+ */
+export type InstalledVersion = { id: string; type: string };
+
+/**
+ * Migrate instance caches to shared global caches
+ */
+export type MigrationResult = {
+  movedFiles: number;
+  hardlinks: number;
+  copies: number;
+  savedBytes: bigint;
+  savedMb: number;
+};
+
+export type PastebinResponse = { url: string };
+
+/**
+ * Version metadata for display in the UI
+ */
+export type VersionMetadata = {
+  id: string;
+  javaVersion: bigint | null;
+  isInstalled: boolean;
+};
diff --git a/packages/ui-new/src/types/bindings/downloader.ts b/packages/ui-new/src/types/bindings/downloader.ts
new file mode 100644
index 0000000..a1734d5
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/downloader.ts
@@ -0,0 +1,63 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Metadata for resumable downloads stored in .part.meta file
+ */
+export type DownloadMetadata = {
+  url: string;
+  fileName: string;
+  totalSize: bigint;
+  downloadedBytes: bigint;
+  checksum: string | null;
+  timestamp: bigint;
+  segments: Array<DownloadSegment>;
+};
+
+/**
+ * Download queue for persistence
+ */
+export type DownloadQueue = { pendingDownloads: Array<PendingJavaDownload> };
+
+/**
+ * A download segment for multi-segment parallel downloading
+ */
+export type DownloadSegment = {
+  start: bigint;
+  end: bigint;
+  downloaded: bigint;
+  completed: boolean;
+};
+
+export type DownloadTask = {
+  url: string;
+  path: string;
+  sha1: string | null;
+  sha256: string | null;
+};
+
+/**
+ * Progress event for Java download
+ */
+export type JavaDownloadProgress = {
+  fileName: string;
+  downloadedBytes: bigint;
+  totalBytes: bigint;
+  speedBytesPerSec: bigint;
+  etaSeconds: bigint;
+  status: string;
+  percentage: number;
+};
+
+/**
+ * Pending download task for queue persistence
+ */
+export type PendingJavaDownload = {
+  majorVersion: number;
+  imageType: string;
+  downloadUrl: string;
+  fileName: string;
+  fileSize: bigint;
+  checksum: string | null;
+  installPath: string;
+  createdAt: bigint;
+};
diff --git a/packages/ui-new/src/types/bindings/fabric.ts b/packages/ui-new/src/types/bindings/fabric.ts
new file mode 100644
index 0000000..181f8be
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/fabric.ts
@@ -0,0 +1,74 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Represents a Minecraft version supported by Fabric.
+ */
+export type FabricGameVersion = { version: string; stable: boolean };
+
+/**
+ * Represents a Fabric intermediary mapping version.
+ */
+export type FabricIntermediaryVersion = {
+  maven: string;
+  version: string;
+  stable: boolean;
+};
+
+/**
+ * Launcher metadata from Fabric Meta API.
+ */
+export type FabricLauncherMeta = {
+  version: number;
+  libraries: FabricLibraries;
+  mainClass: FabricMainClass;
+};
+
+/**
+ * Libraries required by Fabric loader.
+ */
+export type FabricLibraries = {
+  client: Array<FabricLibrary>;
+  common: Array<FabricLibrary>;
+  server: Array<FabricLibrary>;
+};
+
+/**
+ * A single Fabric library dependency.
+ */
+export type FabricLibrary = { name: string; url: string | null };
+
+/**
+ * Represents a combined loader + intermediary version entry.
+ */
+export type FabricLoaderEntry = {
+  loader: FabricLoaderVersion;
+  intermediary: FabricIntermediaryVersion;
+  launcherMeta: FabricLauncherMeta;
+};
+
+/**
+ * Represents a Fabric loader version from the Meta API.
+ */
+export type FabricLoaderVersion = {
+  separator: string;
+  build: number;
+  maven: string;
+  version: string;
+  stable: boolean;
+};
+
+/**
+ * Main class configuration for Fabric.
+ * Can be either a struct with client/server fields or a simple string.
+ */
+export type FabricMainClass = { client: string; server: string } | string;
+
+/**
+ * Information about an installed Fabric version.
+ */
+export type InstalledFabricVersion = {
+  id: string;
+  minecraftVersion: string;
+  loaderVersion: string;
+  path: string;
+};
diff --git a/packages/ui-new/src/types/bindings/forge.ts b/packages/ui-new/src/types/bindings/forge.ts
new file mode 100644
index 0000000..a9790e7
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/forge.ts
@@ -0,0 +1,21 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Represents a Forge version entry.
+ */
+export type ForgeVersion = {
+  version: string;
+  minecraftVersion: string;
+  recommended: boolean;
+  latest: boolean;
+};
+
+/**
+ * Information about an installed Forge version.
+ */
+export type InstalledForgeVersion = {
+  id: string;
+  minecraftVersion: string;
+  forgeVersion: string;
+  path: string;
+};
diff --git a/packages/ui-new/src/types/bindings/game_version.ts b/packages/ui-new/src/types/bindings/game_version.ts
new file mode 100644
index 0000000..1b1c395
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/game_version.ts
@@ -0,0 +1,89 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Arguments = {
+  game: Record<string, unknown>;
+  jvm: Record<string, unknown>;
+};
+
+export type AssetIndex = {
+  id: string;
+  sha1: string;
+  size: bigint;
+  url: string;
+  totalSize: bigint | null;
+};
+
+export type DownloadArtifact = {
+  sha1: string | null;
+  size: bigint | null;
+  url: string;
+  path: string | null;
+};
+
+export type Downloads = {
+  client: DownloadArtifact;
+  server: DownloadArtifact | null;
+};
+
+/**
+ * Represents a Minecraft version JSON, supporting both vanilla and modded (Fabric/Forge) formats.
+ * Modded versions use `inheritsFrom` to reference a parent vanilla version.
+ */
+export type GameVersion = {
+  id: string;
+  /**
+   * Optional for mod loaders that inherit from vanilla
+   */
+  downloads: Downloads | null;
+  /**
+   * Optional for mod loaders that inherit from vanilla
+   */
+  assetIndex: AssetIndex | null;
+  libraries: Array<Library>;
+  mainClass: string;
+  minecraftArguments: string | null;
+  arguments: Arguments | null;
+  javaVersion: JavaVersion | null;
+  /**
+   * For mod loaders: the vanilla version this inherits from
+   */
+  inheritsFrom: string | null;
+  /**
+   * Fabric/Forge may specify a custom assets version
+   */
+  assets: string | null;
+  /**
+   * Release type (release, snapshot, old_beta, etc.)
+   */
+  type: string | null;
+};
+
+export type JavaVersion = { component: string; majorVersion: bigint };
+
+export type Library = {
+  downloads: LibraryDownloads | null;
+  name: string;
+  rules: Array<Rule> | null;
+  natives: Record<string, unknown>;
+  /**
+   * Maven repository URL for mod loader libraries
+   */
+  url: string | null;
+};
+
+export type LibraryDownloads = {
+  artifact: DownloadArtifact | null;
+  classifiers: Record<string, unknown>;
+};
+
+export type OsRule = {
+  name: string | null;
+  version: string | null;
+  arch: string | null;
+};
+
+export type Rule = {
+  action: string;
+  os: OsRule | null;
+  features: Record<string, unknown>;
+};
diff --git a/packages/ui-new/src/types/bindings/index.ts b/packages/ui-new/src/types/bindings/index.ts
new file mode 100644
index 0000000..510c240
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/index.ts
@@ -0,0 +1,11 @@
+export * from "./assistant";
+export * from "./auth";
+export * from "./config";
+export * from "./core";
+export * from "./downloader";
+export * from "./fabric";
+export * from "./forge";
+export * from "./game_version";
+export * from "./instance";
+export * from "./java";
+export * from "./manifest";
diff --git a/packages/ui-new/src/types/bindings/instance.ts b/packages/ui-new/src/types/bindings/instance.ts
new file mode 100644
index 0000000..079e8f0
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/instance.ts
@@ -0,0 +1,32 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Represents a game instance/profile
+ */
+export type Instance = {
+  id: string;
+  name: string;
+  gameDir: string;
+  versionId: string | null;
+  createdAt: bigint;
+  lastPlayed: bigint | null;
+  iconPath: string | null;
+  notes: string | null;
+  modLoader: string | null;
+  modLoaderVersion: string | null;
+  jvmArgsOverride: string | null;
+  memoryOverride: MemoryOverride | null;
+};
+
+/**
+ * Configuration for all instances
+ */
+export type InstanceConfig = {
+  instances: Array<Instance>;
+  activeInstanceId: string | null;
+};
+
+/**
+ * Memory settings override for an instance
+ */
+export type MemoryOverride = { min: number; max: number };
diff --git a/packages/ui-new/src/types/bindings/java.ts b/packages/ui-new/src/types/bindings/java.ts
new file mode 100644
index 0000000..5db128e
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/java.ts
@@ -0,0 +1,52 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+/**
+ * Java image type: JRE or JDK
+ */
+export type ImageType = "jre" | "jdk";
+
+/**
+ * Java catalog containing all available versions
+ */
+export type JavaCatalog = {
+  releases: Array<JavaReleaseInfo>;
+  availableMajorVersions: Array<number>;
+  ltsVersions: Array<number>;
+  cachedAt: bigint;
+};
+
+/**
+ * Java download information from Adoptium
+ */
+export type JavaDownloadInfo = {
+  version: string;
+  releaseName: string;
+  downloadUrl: string;
+  fileName: string;
+  fileSize: bigint;
+  checksum: string | null;
+  imageType: string;
+};
+
+export type JavaInstallation = {
+  path: string;
+  version: string;
+  is64bit: boolean;
+};
+
+/**
+ * Java release information for UI display
+ */
+export type JavaReleaseInfo = {
+  majorVersion: number;
+  imageType: string;
+  version: string;
+  releaseName: string;
+  releaseDate: string | null;
+  fileSize: bigint;
+  checksum: string | null;
+  downloadUrl: string;
+  isLts: boolean;
+  isAvailable: boolean;
+  architecture: string;
+};
diff --git a/packages/ui-new/src/types/bindings/manifest.ts b/packages/ui-new/src/types/bindings/manifest.ts
new file mode 100644
index 0000000..2180962
--- /dev/null
+++ b/packages/ui-new/src/types/bindings/manifest.ts
@@ -0,0 +1,22 @@
+// This file was generated by [ts-rs](https://github.com/Aleph-Alpha/ts-rs). Do not edit this file manually.
+
+export type Latest = { release: string; snapshot: string };
+
+export type Version = {
+  id: string;
+  type: string;
+  url: string;
+  time: string;
+  releaseTime: string;
+  /**
+   * Java version requirement (major version number)
+   * This is populated from the version JSON file if the version is installed locally
+   */
+  javaVersion: bigint | null;
+  /**
+   * Whether this version is installed locally
+   */
+  isInstalled: boolean | null;
+};
+
+export type VersionManifest = { latest: Latest; versions: Array<Version> };
diff --git a/packages/ui-new/tsconfig.app.json b/packages/ui-new/tsconfig.app.json
new file mode 100644
index 0000000..ce9121a
--- /dev/null
+++ b/packages/ui-new/tsconfig.app.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+  },
+  "include": ["src"],
+}
diff --git a/packages/ui-new/tsconfig.json b/packages/ui-new/tsconfig.json
new file mode 100644
index 0000000..59578c3
--- /dev/null
+++ b/packages/ui-new/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" },
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+    },
+  },
+}
diff --git a/packages/ui-new/tsconfig.node.json b/packages/ui-new/tsconfig.node.json
new file mode 100644
index 0000000..8a67f62
--- /dev/null
+++ b/packages/ui-new/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/packages/ui-new/vite.config.ts b/packages/ui-new/vite.config.ts
new file mode 100644
index 0000000..27ce1ff
--- /dev/null
+++ b/packages/ui-new/vite.config.ts
@@ -0,0 +1,18 @@
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+      "@components": path.resolve(__dirname, "./src/components"),
+      "@stores": path.resolve(__dirname, "./src/stores"),
+      "@types": path.resolve(__dirname, "./src/types"),
+      "@pages": path.resolve(__dirname, "./src/pages"),
+    },
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d6ff489..73eadcd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,112 @@ importers:
         specifier: npm:rolldown-vite@^7
         version: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
 
+  packages/ui-new:
+    dependencies:
+      '@radix-ui/react-checkbox':
+        specifier: ^1.3.3
+        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dialog':
+        specifier: ^1.1.15
+        version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-label':
+        specifier: ^2.1.8
+        version: 2.1.8(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-scroll-area':
+        specifier: ^1.2.10
+        version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-select':
+        specifier: ^2.2.6
+        version: 2.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-separator':
+        specifier: ^1.1.8
+        version: 1.1.8(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot':
+        specifier: ^1.2.4
+        version: 1.2.4(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-switch':
+        specifier: ^1.2.6
+        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.13
+        version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@tauri-apps/api':
+        specifier: ^2.9.1
+        version: 2.9.1
+      '@tauri-apps/plugin-dialog':
+        specifier: ^2.6.0
+        version: 2.6.0
+      '@tauri-apps/plugin-fs':
+        specifier: ^2.4.5
+        version: 2.4.5
+      '@tauri-apps/plugin-shell':
+        specifier: ^2.3.4
+        version: 2.3.4
+      class-variance-authority:
+        specifier: ^0.7.1
+        version: 0.7.1
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
+      lucide-react:
+        specifier: ^0.562.0
+        version: 0.562.0(react@19.2.3)
+      marked:
+        specifier: ^17.0.1
+        version: 17.0.1
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react:
+        specifier: ^19.2.0
+        version: 19.2.3
+      react-dom:
+        specifier: ^19.2.0
+        version: 19.2.3(react@19.2.3)
+      react-router:
+        specifier: ^7.12.0
+        version: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      tailwind-merge:
+        specifier: ^3.4.0
+        version: 3.4.0
+      zustand:
+        specifier: ^5.0.10
+        version: 5.0.10(@types/react@19.2.8)(react@19.2.3)
+    devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.1.18
+        version: 4.1.18(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))
+      '@types/node':
+        specifier: ^24.10.1
+        version: 24.10.9
+      '@types/react':
+        specifier: ^19.2.5
+        version: 19.2.8
+      '@types/react-dom':
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@19.2.8)
+      '@vitejs/plugin-react':
+        specifier: ^5.1.1
+        version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))
+      globals:
+        specifier: ^16.5.0
+        version: 16.5.0
+      tailwindcss:
+        specifier: ^4.1.18
+        version: 4.1.18
+      tw-animate-css:
+        specifier: ^1.4.0
+        version: 1.4.0
+      typescript:
+        specifier: ~5.9.3
+        version: 5.9.3
+      vite:
+        specifier: npm:rolldown-vite@^7
+        version: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
+
 packages:
 
   '@babel/code-frame@7.28.6':
@@ -278,6 +384,18 @@ packages:
     peerDependencies:
       '@babel/core': ^7.0.0-0
 
+  '@babel/plugin-transform-react-jsx-self@7.27.1':
+    resolution: {integrity: sha512-6UzkCs+ejGdZ5mFFC/OCUrv028ab2fp1znZmCZjAOBKiBK2jXD1O+BPSfX8X2qjJ75fZBMSnQn3Rq2mrBJK2mw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1':
+    resolution: {integrity: sha512-zbwoTsBruTeKB9hSq73ha66iFeJHuaFkUbwvqElnygoNbj/jHRsSeokowZFN3CZ64IvEqcmmkVe89OPXc7ldAw==}
+    engines: {node: '>=6.9.0'}
+    peerDependencies:
+      '@babel/core': ^7.0.0-0
+
   '@babel/plugin-transform-typescript@7.28.6':
     resolution: {integrity: sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw==}
     engines: {node: '>=6.9.0'}
@@ -729,6 +847,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-checkbox@1.3.3':
+    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collapsible@1.1.12':
     resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
@@ -839,6 +970,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-label@2.1.8':
+    resolution: {integrity: sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-navigation-menu@1.2.14':
     resolution: {integrity: sha512-YB9mTFQvCOAQMHU+C/jVl96WmuWeltyUEpRJJky51huhds5W2FQr1J8D/16sQlf0ozxkPK8uF3niQMdUwZPv5w==}
     peerDependencies:
@@ -917,6 +1061,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.4':
+    resolution: {integrity: sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
@@ -943,6 +1100,32 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-select@2.2.6':
+    resolution: {integrity: sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@radix-ui/react-separator@1.1.8':
+    resolution: {integrity: sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.2.3':
     resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
     peerDependencies:
@@ -961,6 +1144,19 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-switch@1.2.6':
+    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tabs@1.1.13':
     resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
@@ -1203,6 +1399,9 @@ packages:
   '@rolldown/pluginutils@1.0.0-beta.50':
     resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
 
+  '@rolldown/pluginutils@1.0.0-beta.53':
+    resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
+
   '@rollup/rollup-darwin-arm64@4.55.2':
     resolution: {integrity: sha512-UCbaTklREjrc5U47ypLulAgg4njaqfOVLU18VrCrI+6E5MQjuG0lSWaqLlAJwsD7NpFV249XgB0Bi37Zh5Sz4g==}
     cpu: [arm64]
@@ -1515,6 +1714,18 @@ packages:
   '@tybys/wasm-util@0.10.1':
     resolution: {integrity: sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg==}
 
+  '@types/babel__core@7.20.5':
+    resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
+
+  '@types/babel__generator@7.27.0':
+    resolution: {integrity: sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg==}
+
+  '@types/babel__template@7.4.4':
+    resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==}
+
+  '@types/babel__traverse@7.28.0':
+    resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
+
   '@types/d3-hierarchy@1.1.11':
     resolution: {integrity: sha512-lnQiU7jV+Gyk9oQYk0GGYccuexmQPTp08E0+4BidgFdiJivjEvf+esPSdZqCZ2C7UwTWejWpqetVaU8A+eX3FA==}
 
@@ -1565,6 +1776,12 @@ packages:
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
 
+  '@vitejs/plugin-react@5.1.2':
+    resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    peerDependencies:
+      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+
   accepts@1.3.8:
     resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
     engines: {node: '>= 0.6'}
@@ -2145,6 +2362,89 @@ packages:
       tailwindcss:
         optional: true
 
+  fumadocs-core@16.4.7:
+    resolution: {integrity: sha512-oEsoha5EjyQnhRb6s5tNYEM+AiDA4BN80RyevRohsKPXGRQ2K3ddMaFAQq5kBaqA/Xxb+vqrElyRtzmdif7w2A==}
+    peerDependencies:
+      '@mixedbread/sdk': ^0.46.0
+      '@orama/core': 1.x.x
+      '@oramacloud/client': 2.x.x
+      '@tanstack/react-router': 1.x.x
+      '@types/react': '*'
+      algoliasearch: 5.x.x
+      lucide-react: '*'
+      next: 16.x.x
+      react: ^19.2.0
+      react-dom: ^19.2.0
+      react-router: 7.x.x
+      waku: ^0.26.0 || ^0.27.0
+      zod: 4.x.x
+    peerDependenciesMeta:
+      '@mixedbread/sdk':
+        optional: true
+      '@orama/core':
+        optional: true
+      '@oramacloud/client':
+        optional: true
+      '@tanstack/react-router':
+        optional: true
+      '@types/react':
+        optional: true
+      algoliasearch:
+        optional: true
+      lucide-react:
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+      react-router:
+        optional: true
+      waku:
+        optional: true
+      zod:
+        optional: true
+
+  fumadocs-mdx@14.2.6:
+    resolution: {integrity: sha512-T8i5IllZ6OGaZ3/4Wwjl1zovvypSsr6Cco9ZACvoABLqpqTQ2TDfrW1nBt1o9YUKyfzkwDnjKdrnrq/nDexfcg==}
+    hasBin: true
+    peerDependencies:
+      '@fumadocs/mdx-remote': ^1.4.0
+      '@types/react': '*'
+      fumadocs-core: ^15.0.0 || ^16.0.0
+      next: ^15.3.0 || ^16.0.0
+      react: '*'
+      vite: 6.x.x || 7.x.x
+    peerDependenciesMeta:
+      '@fumadocs/mdx-remote':
+        optional: true
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      react:
+        optional: true
+      vite:
+        optional: true
+
+  fumadocs-ui@16.4.7:
+    resolution: {integrity: sha512-ShEftF54mj89EW7Wll2wwGcH6bNTmPrPtUUmO+ThakK13skJmY7GSBH3Ft51TzQNLhN3kBKEQipIlJWc7LT5NQ==}
+    peerDependencies:
+      '@types/react': '*'
+      fumadocs-core: 16.4.7
+      next: 16.x.x
+      react: ^19.2.0
+      react-dom: ^19.2.0
+      tailwindcss: ^4.0.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      next:
+        optional: true
+      tailwindcss:
+        optional: true
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -2178,6 +2478,10 @@ packages:
     resolution: {integrity: sha512-tvZgpqk6fz4BaNZ66ZsRaZnbHvP/jG3uKJvAZOwEVUL4RTA5nJeeLYfyN9/VA8NX/V3IBG+hkeuGpKjvELkVhA==}
     engines: {node: 20 || >=22}
 
+  globals@16.5.0:
+    resolution: {integrity: sha512-c/c15i26VrJ4IRt5Z89DnIzCGDn9EcebibhAOjw5ibqEHsE1wLUgkPn9RDmNcUKyU87GeaL633nyJ+pplFR2ZQ==}
+    engines: {node: '>=18'}
+
   globrex@0.1.2:
     resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
 
@@ -2299,41 +2603,126 @@ packages:
     cpu: [arm64]
     os: [android]
 
-  lightningcss-darwin-arm64@1.30.2:
-    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [darwin]
-
-  lightningcss-darwin-x64@1.30.2:
-    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [darwin]
+  hast-util-to-string@3.0.1:
+    resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==}
 
-  lightningcss-freebsd-x64@1.30.2:
-    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [x64]
-    os: [freebsd]
+  hast-util-whitespace@3.0.0:
+    resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm]
-    os: [linux]
+  html-void-elements@3.0.0:
+    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
+  http-errors@2.0.1:
+    resolution: {integrity: sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ==}
+    engines: {node: '>= 0.8'}
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
-    engines: {node: '>= 12.0.0'}
-    cpu: [arm64]
-    os: [linux]
+  iconv-lite@0.4.24:
+    resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
+    engines: {node: '>=0.10.0'}
+
+  image-size@2.0.2:
+    resolution: {integrity: sha512-IRqXKlaXwgSMAMtpNzZa1ZAe8m+Sa1770Dhk8VkSsP9LS+iHD62Zd8FQKs8fbPiagBE7BzoFX23cxFnwshpV6w==}
+    engines: {node: '>=16.x'}
+    hasBin: true
+
+  inherits@2.0.4:
+    resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
+
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
+  ipaddr.js@1.9.1:
+    resolution: {integrity: sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==}
+    engines: {node: '>= 0.10'}
+
+  is-alphabetical@2.0.1:
+    resolution: {integrity: sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==}
+
+  is-alphanumerical@2.0.1:
+    resolution: {integrity: sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==}
+
+  is-decimal@2.0.1:
+    resolution: {integrity: sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==}
+
+  is-hexadecimal@2.0.1:
+    resolution: {integrity: sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==}
+
+  is-plain-obj@4.1.0:
+    resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
+    engines: {node: '>=12'}
+
+  is-reference@3.0.3:
+    resolution: {integrity: sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==}
+
+  isbot@5.1.33:
+    resolution: {integrity: sha512-P4Hgb5NqswjkI0J1CM6XKXon/sxKY1SuowE7Qx2hrBhIwICFyXy54mfgB5eMHXsbe/eStzzpbIGNOvGmz+dlKg==}
+    engines: {node: '>=18'}
+
+  jiti@2.6.1:
+    resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
+    hasBin: true
+
+  js-tokens@4.0.0:
+    resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
+
+  js-yaml@4.1.1:
+    resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
+    hasBin: true
+
+  jsesc@3.0.2:
+    resolution: {integrity: sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  json5@2.2.3:
+    resolution: {integrity: sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==}
+    engines: {node: '>=6'}
+    hasBin: true
+
+  launch-editor@2.12.0:
+    resolution: {integrity: sha512-giOHXoOtifjdHqUamwKq6c49GzBdLjvxrd2D+Q4V6uOHopJv7p9VJxikDsQ/CBXZbEITgUqSVHXLTG3VhPP1Dg==}
+
+  lightningcss-android-arm64@1.30.2:
+    resolution: {integrity: sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
+  lightningcss-darwin-arm64@1.30.2:
+    resolution: {integrity: sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
+  lightningcss-darwin-x64@1.30.2:
+    resolution: {integrity: sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
+  lightningcss-freebsd-x64@1.30.2:
+    resolution: {integrity: sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    resolution: {integrity: sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
+  lightningcss-linux-arm64-gnu@1.30.2:
+    resolution: {integrity: sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
+  lightningcss-linux-arm64-musl@1.30.2:
+    resolution: {integrity: sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
 
   lightningcss-linux-x64-gnu@1.30.2:
     resolution: {integrity: sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==}
@@ -2813,6 +3202,10 @@ packages:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
 
+  react-refresh@0.18.0:
+    resolution: {integrity: sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==}
+    engines: {node: '>=0.10.0'}
+
   react-remove-scroll-bar@2.3.8:
     resolution: {integrity: sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==}
     engines: {node: '>=10'}
@@ -2925,6 +3318,54 @@ packages:
   remark@15.0.1:
     resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
 
+  readdirp@5.0.0:
+    resolution: {integrity: sha512-9u/XQ1pvrQtYyMpZe7DXKv2p5CNvyVwzUB6uhLAnQwHMSgKMBR62lc7AHljaeteeHXn11XTAaLLUVZYVZyuRBQ==}
+    engines: {node: '>= 20.19.0'}
+
+  recma-build-jsx@1.0.0:
+    resolution: {integrity: sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew==}
+
+  recma-jsx@1.0.1:
+    resolution: {integrity: sha512-huSIy7VU2Z5OLv6oFLosQGGDqPqdO1iq6bWNAdhzMxSJP7RAso4fCZ1cKu8j9YHCZf3TPrq4dw3okhrylgcd7w==}
+    peerDependencies:
+      acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
+
+  recma-parse@1.0.0:
+    resolution: {integrity: sha512-OYLsIGBB5Y5wjnSnQW6t3Xg7q3fQ7FWbw/vcXtORTnyaSFscOtABg+7Pnz6YZ6c27fG1/aN8CjfwoUEUIdwqWQ==}
+
+  recma-stringify@1.0.0:
+    resolution: {integrity: sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g==}
+
+  regex-recursion@6.0.2:
+    resolution: {integrity: sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==}
+
+  regex-utilities@2.3.0:
+    resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==}
+
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
+  rehype-recma@1.0.0:
+    resolution: {integrity: sha512-lqA4rGUf1JmacCNWWZx0Wv1dHqMwxzsDWYMTowuplHF3xH0N/MmrZ/G3BDZnzAkRmxDadujCjaKM2hqYdCBOGw==}
+
+  remark-gfm@4.0.1:
+    resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
+
+  remark-mdx@3.1.1:
+    resolution: {integrity: sha512-Pjj2IYlUY3+D8x00UJsIOg5BEvfMyeI+2uLPn9VO9Wg4MEtN/VTIq2NEJQfde9PnX15KgtHyl9S0BcTnWrIuWg==}
+
+  remark-parse@11.0.0:
+    resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
+
+  remark-rehype@11.1.2:
+    resolution: {integrity: sha512-Dh7l57ianaEoIpzbp0PC9UKAdCSVklD8E5Rpw7ETfbTl3FqcOOgq5q2LVDhgGCkaBv7p24JXikPdvhhmHvKMsw==}
+
+  remark-stringify@11.0.0:
+    resolution: {integrity: sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==}
+
+  remark@15.0.1:
+    resolution: {integrity: sha512-Eht5w30ruCXgFmxVUSlNWQ9iiimq07URKeFS3hNc8cUWy1llX4KDWfyEDZRycMc+znsN9Ux5/tJ/BFdgdOwA3A==}
+
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
@@ -3060,6 +3501,12 @@ packages:
   solid-js@1.9.10:
     resolution: {integrity: sha512-Coz956cos/EPDlhs6+jsdTxKuJDPT7B5SVIWgABwROyxjY7Xbr8wkzD68Et+NxnV7DLJ3nJdAC2r9InuV/4Jew==}
 
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -3160,6 +3607,9 @@ packages:
     resolution: {integrity: sha512-1h/Lnq9yajKY2PEbBadPXj3VxsDDu844OnaAo52UVmIzIvwwtBPIuNvkjuzBlTWpfJyUbG3ez0KSBibQkj4ojg==}
     engines: {node: '>=0.6.11 <=0.7.0 || >=0.7.3'}
 
+  tw-animate-css@1.4.0:
+    resolution: {integrity: sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ==}
+
   type-is@1.6.18:
     resolution: {integrity: sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==}
     engines: {node: '>= 0.6'}
@@ -3307,6 +3757,24 @@ packages:
   zod@4.3.5:
     resolution: {integrity: sha512-k7Nwx6vuWx1IJ9Bjuf4Zt1PEllcwe7cls3VNzm4CQ1/hgtFUK2bRNG3rvnpPUhFjmqJKAKtjV576KnUkHocg/g==}
 
+  zustand@5.0.10:
+    resolution: {integrity: sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==}
+    engines: {node: '>=12.20.0'}
+    peerDependencies:
+      '@types/react': '>=18.0.0'
+      immer: '>=9.0.6'
+      react: '>=18.0.0'
+      use-sync-external-store: '>=1.2.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+      use-sync-external-store:
+        optional: true
+
   zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
 
@@ -3453,6 +3921,16 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@babel/plugin-transform-react-jsx-self@7.27.1(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-react-jsx-source@7.27.1(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+
   '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.28.6)':
     dependencies:
       '@babel/core': 7.28.6
@@ -3500,64 +3978,252 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.28.5
 
-  '@biomejs/biome@2.3.11':
-    optionalDependencies:
-      '@biomejs/cli-darwin-arm64': 2.3.11
-      '@biomejs/cli-darwin-x64': 2.3.11
-      '@biomejs/cli-linux-arm64': 2.3.11
-      '@biomejs/cli-linux-arm64-musl': 2.3.11
-      '@biomejs/cli-linux-x64': 2.3.11
-      '@biomejs/cli-linux-x64-musl': 2.3.11
-      '@biomejs/cli-win32-arm64': 2.3.11
-      '@biomejs/cli-win32-x64': 2.3.11
-
-  '@biomejs/cli-darwin-arm64@2.3.11':
-    optional: true
-
-  '@biomejs/cli-darwin-x64@2.3.11':
-    optional: true
-
-  '@biomejs/cli-linux-arm64-musl@2.3.11':
-    optional: true
-
-  '@biomejs/cli-linux-arm64@2.3.11':
-    optional: true
-
-  '@biomejs/cli-linux-x64-musl@2.3.11':
-    optional: true
-
-  '@biomejs/cli-linux-x64@2.3.11':
-    optional: true
-
-  '@biomejs/cli-win32-arm64@2.3.11':
-    optional: true
+  '@babel/code-frame@7.28.6':
+    dependencies:
+      '@babel/helper-validator-identifier': 7.28.5
+      js-tokens: 4.0.0
+      picocolors: 1.1.1
 
-  '@biomejs/cli-win32-x64@2.3.11':
-    optional: true
+  '@babel/compat-data@7.28.6': {}
 
-  '@bkrem/react-transition-group@1.3.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  '@babel/core@7.28.6':
     dependencies:
-      chain-function: 1.0.1
-      dom-helpers: 3.4.0
-      loose-envify: 1.4.0
-      prop-types: 15.8.1
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-lifecycles-compat: 3.0.4
-      warning: 3.0.0
+      '@babel/code-frame': 7.28.6
+      '@babel/generator': 7.28.6
+      '@babel/helper-compilation-targets': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.28.6)
+      '@babel/helpers': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/template': 7.28.6
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+      '@jridgewell/remapping': 2.3.5
+      convert-source-map: 2.0.0
+      debug: 4.4.3
+      gensync: 1.0.0-beta.2
+      json5: 2.2.3
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
 
-  '@emnapi/core@1.8.1':
+  '@babel/generator@7.28.6':
     dependencies:
-      '@emnapi/wasi-threads': 1.1.0
-      tslib: 2.8.1
-    optional: true
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+      '@jridgewell/gen-mapping': 0.3.13
+      '@jridgewell/trace-mapping': 0.3.31
+      jsesc: 3.0.2
 
-  '@emnapi/runtime@1.8.1':
+  '@babel/helper-annotate-as-pure@7.27.3':
     dependencies:
-      tslib: 2.8.1
-    optional: true
+      '@babel/types': 7.28.6
 
-  '@emnapi/wasi-threads@1.1.0':
+  '@babel/helper-compilation-targets@7.28.6':
+    dependencies:
+      '@babel/compat-data': 7.28.6
+      '@babel/helper-validator-option': 7.27.1
+      browserslist: 4.28.1
+      lru-cache: 5.1.1
+      semver: 6.3.1
+
+  '@babel/helper-create-class-features-plugin@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/helper-replace-supers': 7.28.6(@babel/core@7.28.6)
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/traverse': 7.28.6
+      semver: 6.3.1
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-globals@7.28.0': {}
+
+  '@babel/helper-member-expression-to-functions@7.28.5':
+    dependencies:
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-imports@7.28.6':
+    dependencies:
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-module-transforms@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-module-imports': 7.28.6
+      '@babel/helper-validator-identifier': 7.28.5
+      '@babel/traverse': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-optimise-call-expression@7.27.1':
+    dependencies:
+      '@babel/types': 7.28.6
+
+  '@babel/helper-plugin-utils@7.28.6': {}
+
+  '@babel/helper-replace-supers@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-member-expression-to-functions': 7.28.5
+      '@babel/helper-optimise-call-expression': 7.27.1
+      '@babel/traverse': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-skip-transparent-expression-wrappers@7.27.1':
+    dependencies:
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/helper-string-parser@7.27.1': {}
+
+  '@babel/helper-validator-identifier@7.28.5': {}
+
+  '@babel/helper-validator-option@7.27.1': {}
+
+  '@babel/helpers@7.28.6':
+    dependencies:
+      '@babel/template': 7.28.6
+      '@babel/types': 7.28.6
+
+  '@babel/parser@7.28.6':
+    dependencies:
+      '@babel/types': 7.28.6
+
+  '@babel/plugin-syntax-jsx@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-syntax-typescript@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+
+  '@babel/plugin-transform-modules-commonjs@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-module-transforms': 7.28.6(@babel/core@7.28.6)
+      '@babel/helper-plugin-utils': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/plugin-transform-typescript@7.28.6(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-annotate-as-pure': 7.27.3
+      '@babel/helper-create-class-features-plugin': 7.28.6(@babel/core@7.28.6)
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-skip-transparent-expression-wrappers': 7.27.1
+      '@babel/plugin-syntax-typescript': 7.28.6(@babel/core@7.28.6)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/preset-typescript@7.28.5(@babel/core@7.28.6)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/helper-plugin-utils': 7.28.6
+      '@babel/helper-validator-option': 7.27.1
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.28.6)
+      '@babel/plugin-transform-modules-commonjs': 7.28.6(@babel/core@7.28.6)
+      '@babel/plugin-transform-typescript': 7.28.6(@babel/core@7.28.6)
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/runtime@7.28.6': {}
+
+  '@babel/template@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+
+  '@babel/traverse@7.28.6':
+    dependencies:
+      '@babel/code-frame': 7.28.6
+      '@babel/generator': 7.28.6
+      '@babel/helper-globals': 7.28.0
+      '@babel/parser': 7.28.6
+      '@babel/template': 7.28.6
+      '@babel/types': 7.28.6
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
+  '@babel/types@7.28.6':
+    dependencies:
+      '@babel/helper-string-parser': 7.27.1
+      '@babel/helper-validator-identifier': 7.28.5
+
+  '@biomejs/biome@2.3.11':
+    optionalDependencies:
+      '@biomejs/cli-darwin-arm64': 2.3.11
+      '@biomejs/cli-darwin-x64': 2.3.11
+      '@biomejs/cli-linux-arm64': 2.3.11
+      '@biomejs/cli-linux-arm64-musl': 2.3.11
+      '@biomejs/cli-linux-x64': 2.3.11
+      '@biomejs/cli-linux-x64-musl': 2.3.11
+      '@biomejs/cli-win32-arm64': 2.3.11
+      '@biomejs/cli-win32-x64': 2.3.11
+
+  '@biomejs/cli-darwin-arm64@2.3.11':
+    optional: true
+
+  '@biomejs/cli-darwin-x64@2.3.11':
+    optional: true
+
+  '@biomejs/cli-linux-arm64-musl@2.3.11':
+    optional: true
+
+  '@biomejs/cli-linux-arm64@2.3.11':
+    optional: true
+
+  '@biomejs/cli-linux-x64-musl@2.3.11':
+    optional: true
+
+  '@biomejs/cli-linux-x64@2.3.11':
+    optional: true
+
+  '@biomejs/cli-win32-arm64@2.3.11':
+    optional: true
+
+  '@biomejs/cli-win32-x64@2.3.11':
+    optional: true
+
+  '@bkrem/react-transition-group@1.3.5(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      chain-function: 1.0.1
+      dom-helpers: 3.4.0
+      loose-envify: 1.4.0
+      prop-types: 15.8.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-lifecycles-compat: 3.0.4
+      warning: 3.0.0
+
+  '@emnapi/core@1.8.1':
+    dependencies:
+      '@emnapi/wasi-threads': 1.1.0
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/runtime@1.8.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@emnapi/wasi-threads@1.1.0':
     dependencies:
       tslib: 2.8.1
     optional: true
@@ -3836,6 +4502,22 @@ snapshots:
       '@types/react': 19.2.8
       '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
+  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -3941,6 +4623,15 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.8
 
+  '@radix-ui/react-label@2.1.8(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
   '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4033,6 +4724,15 @@ snapshots:
       '@types/react': 19.2.8
       '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
+  '@radix-ui/react-primitive@2.1.4(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -4067,27 +4767,80 @@ snapshots:
       '@types/react': 19.2.8
       '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@radix-ui/react-slot@1.2.3(@types/react@19.2.8)(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.8
-
-  '@radix-ui/react-slot@1.2.4(@types/react@19.2.8)(react@19.2.3)':
-    dependencies:
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
-      react: 19.2.3
-    optionalDependencies:
-      '@types/react': 19.2.8
-
-  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+  '@radix-ui/react-select@2.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
+      '@radix-ui/number': 1.1.1
       '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
       '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
       '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
-      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-popper': 1.2.8(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.8)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-separator@1.1.8(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.4(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
       '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
@@ -4244,51 +4997,164 @@ snapshots:
 
   '@remix-run/node-fetch-server@0.9.0': {}
 
-  '@rolldown/binding-android-arm64@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/number@1.1.1': {}
 
-  '@rolldown/binding-darwin-arm64@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/primitive@1.1.3': {}
 
-  '@rolldown/binding-darwin-x64@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-accordion@1.2.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-freebsd-x64@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-arrow@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-compose-refs@1.1.2(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
 
-  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-context@1.1.2(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
 
-  '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-dialog@1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-focus-guards': 1.1.3(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-focus-scope': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-portal': 1.1.9(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      aria-hidden: 1.2.6
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-remove-scroll: 2.7.2(@types/react@19.2.8)(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-direction@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
 
-  '@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
+  '@radix-ui/react-dismissable-layer@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@napi-rs/wasm-runtime': 1.1.1
-    optional: true
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-escape-keydown': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-focus-guards@1.1.3(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
 
-  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-focus-scope@1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
-    optional: true
+  '@radix-ui/react-id@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
 
-  '@rolldown/pluginutils@1.0.0-beta.50': {}
+  '@radix-ui/react-navigation-menu@1.2.14(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-dismissable-layer': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-visually-hidden': 1.2.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@rolldown/pluginutils@1.0.0-beta.53': {}
 
   '@rollup/rollup-darwin-arm64@4.55.2':
     optional: true
@@ -4383,1104 +5249,1954 @@ snapshots:
 
   '@sveltejs/acorn-typescript@1.0.8(acorn@8.15.0)':
     dependencies:
-      acorn: 8.15.0
+      '@floating-ui/react-dom': 2.1.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-arrow': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-rect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
 
-  '@sveltejs/vite-plugin-svelte-inspector@5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4))(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)':
+  '@radix-ui/react-portal@1.1.9(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)
-      obug: 2.1.1
-      svelte: 5.46.4
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-presence@1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-scroll-area@1.2.10(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/number': 1.1.1
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-slot@1.2.3(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-slot@1.2.4(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.3
+      '@radix-ui/react-context': 1.1.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/react-use-callback-ref@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-controllable-state@1.2.2(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-effect-event': 0.0.2(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-effect-event@0.0.2(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-escape-keydown@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-layout-effect@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-previous@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-rect@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/rect': 1.1.1
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-use-size@1.1.1(@types/react@19.2.8)(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      react: 19.2.3
+    optionalDependencies:
+      '@types/react': 19.2.8
+
+  '@radix-ui/react-visually-hidden@1.2.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)':
+    dependencies:
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    optionalDependencies:
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+
+  '@radix-ui/rect@1.1.1': {}
+
+  '@react-router/dev@7.12.0(@react-router/serve@7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3))(@types/node@25.0.9)(jiti@2.6.1)(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0))(tsx@4.21.0)(typescript@5.9.3)':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/generator': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/plugin-syntax-jsx': 7.28.6(@babel/core@7.28.6)
+      '@babel/preset-typescript': 7.28.5(@babel/core@7.28.6)
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@remix-run/node-fetch-server': 0.9.0
+      arg: 5.0.2
+      babel-dead-code-elimination: 1.0.12
+      chokidar: 4.0.3
+      dedent: 1.7.1
+      es-module-lexer: 1.7.0
+      exit-hook: 2.2.1
+      isbot: 5.1.33
+      jsesc: 3.0.2
+      lodash: 4.17.21
+      p-map: 7.0.4
+      pathe: 1.1.2
+      picocolors: 1.1.1
+      pkg-types: 2.3.0
+      prettier: 3.8.0
+      react-refresh: 0.14.2
+      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      semver: 7.7.3
+      tinyglobby: 0.2.15
+      valibot: 1.2.0(typescript@5.9.3)
+      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
+      vite-node: 3.2.4(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
+    optionalDependencies:
+      '@react-router/serve': 7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      typescript: 5.9.3
+    transitivePeerDependencies:
+      - '@types/node'
+      - babel-plugin-macros
+      - esbuild
+      - jiti
+      - less
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+      - tsx
+      - yaml
+
+  '@react-router/express@7.12.0(express@4.22.1)(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      express: 4.22.1
+      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/node@7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+    optionalDependencies:
+      typescript: 5.9.3
+
+  '@react-router/serve@7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)':
+    dependencies:
+      '@mjackson/node-fetch-server': 0.2.0
+      '@react-router/express': 7.12.0(express@4.22.1)(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      '@react-router/node': 7.12.0(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(typescript@5.9.3)
+      compression: 1.8.1
+      express: 4.22.1
+      get-port: 5.1.1
+      morgan: 1.10.1
+      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      source-map-support: 0.5.21
+    transitivePeerDependencies:
+      - supports-color
+      - typescript
+
+  '@remix-run/node-fetch-server@0.9.0': {}
+
+  '@rolldown/binding-android-arm64@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
+    dependencies:
+      '@napi-rs/wasm-runtime': 1.1.1
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
+    optional: true
+
+  '@rolldown/pluginutils@1.0.0-beta.50': {}
+
+  '@rollup/rollup-darwin-arm64@4.55.2':
+    optional: true
+
+  '@rollup/rollup-linux-x64-gnu@4.55.2':
+    optional: true
+
+  '@shikijs/core@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
+  '@shikijs/engine-javascript@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.4
+
+  '@shikijs/engine-oniguruma@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/langs@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+
+  '@shikijs/rehype@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+      '@types/hast': 3.0.4
+      hast-util-to-string: 3.0.1
+      shiki: 3.21.0
+      unified: 11.0.5
+      unist-util-visit: 5.0.0
+
+  '@shikijs/themes@3.21.0':
+    dependencies:
+      '@shikijs/types': 3.21.0
+
+  '@shikijs/transformers@3.21.0':
+    dependencies:
+      '@shikijs/core': 3.21.0
+      '@shikijs/types': 3.21.0
+
+  '@shikijs/types@3.21.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
+  '@shikijs/vscode-textmate@10.0.2': {}
+
+  '@sindresorhus/is@4.6.0': {}
+
+  '@solid-primitives/event-listener@2.4.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/keyboard@1.3.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/rootless': 1.5.2(solid-js@1.9.10)
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/resize-observer@2.1.3(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/rootless': 1.5.2(solid-js@1.9.10)
+      '@solid-primitives/static-store': 0.1.2(solid-js@1.9.10)
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/rootless@1.5.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/static-store@0.1.2(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/utils': 6.3.2(solid-js@1.9.10)
+      solid-js: 1.9.10
+
+  '@solid-primitives/utils@6.3.2(solid-js@1.9.10)':
+    dependencies:
+      solid-js: 1.9.10
+
+  '@standard-schema/spec@1.1.0': {}
+
+  '@sveltejs/acorn-typescript@1.0.8(acorn@8.15.0)':
+    dependencies:
+      acorn: 8.15.0
+
+  '@sveltejs/vite-plugin-svelte-inspector@5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4))(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)
+      obug: 2.1.1
+      svelte: 5.46.4
+      vite: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
+
+  '@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)':
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4))(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)
+      deepmerge: 4.3.1
+      magic-string: 0.30.21
+      obug: 2.1.1
+      svelte: 5.46.4
+      vite: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
+      vitefu: 1.1.1(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))
+
+  '@tailwindcss/node@4.1.18':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.18.4
+      jiti: 2.6.1
+      lightningcss: 1.30.2
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.1.18
+
+  '@tailwindcss/oxide-android-arm64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+    optional: true
+
+  '@tailwindcss/oxide@4.1.18':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-arm64': 4.1.18
+      '@tailwindcss/oxide-darwin-x64': 4.1.18
+      '@tailwindcss/oxide-freebsd-x64': 4.1.18
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+
+  '@tailwindcss/vite@4.1.18(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))':
+    dependencies:
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      tailwindcss: 4.1.18
       vite: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
 
-  '@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)':
+  '@tailwindcss/vite@4.1.18(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0))':
+    dependencies:
+      '@tailwindcss/node': 4.1.18
+      '@tailwindcss/oxide': 4.1.18
+      tailwindcss: 4.1.18
+      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
+
+  '@tanstack/devtools-client@0.0.5':
+    dependencies:
+      '@tanstack/devtools-event-client': 0.4.0
+
+  '@tanstack/devtools-event-bus@0.4.0':
+    dependencies:
+      ws: 8.19.0
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+
+  '@tanstack/devtools-event-client@0.4.0': {}
+
+  '@tanstack/devtools-ui@0.4.4(csstype@3.2.3)(solid-js@1.9.10)':
+    dependencies:
+      clsx: 2.1.1
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - csstype
+
+  '@tanstack/devtools-vite@0.4.1(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0))':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/generator': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+      '@tanstack/devtools-client': 0.0.5
+      '@tanstack/devtools-event-bus': 0.4.0
+      chalk: 5.6.2
+      launch-editor: 2.12.0
+      picomatch: 4.0.3
+      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  '@tanstack/devtools@0.10.3(csstype@3.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
+      '@solid-primitives/keyboard': 1.3.3(solid-js@1.9.10)
+      '@solid-primitives/resize-observer': 2.1.3(solid-js@1.9.10)
+      '@tanstack/devtools-client': 0.0.5
+      '@tanstack/devtools-event-bus': 0.4.0
+      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
+      clsx: 2.1.1
+      goober: 2.1.18(csstype@3.2.3)
+      solid-js: 1.9.10
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - utf-8-validate
+
+  '@tanstack/react-devtools@0.9.2(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)':
+    dependencies:
+      '@tanstack/devtools': 0.10.3(csstype@3.2.3)(solid-js@1.9.10)
+      '@types/react': 19.2.8
+      '@types/react-dom': 19.2.3(@types/react@19.2.8)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+    transitivePeerDependencies:
+      - bufferutil
+      - csstype
+      - solid-js
+      - utf-8-validate
+
+  '@tauri-apps/api@2.9.1': {}
+
+  '@tauri-apps/cli-darwin-arm64@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-darwin-x64@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm-gnueabihf@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-gnu@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-arm64-musl@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-riscv64-gnu@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-gnu@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-linux-x64-musl@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-win32-arm64-msvc@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-win32-ia32-msvc@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli-win32-x64-msvc@2.9.6':
+    optional: true
+
+  '@tauri-apps/cli@2.9.6':
+    optionalDependencies:
+      '@tauri-apps/cli-darwin-arm64': 2.9.6
+      '@tauri-apps/cli-darwin-x64': 2.9.6
+      '@tauri-apps/cli-linux-arm-gnueabihf': 2.9.6
+      '@tauri-apps/cli-linux-arm64-gnu': 2.9.6
+      '@tauri-apps/cli-linux-arm64-musl': 2.9.6
+      '@tauri-apps/cli-linux-riscv64-gnu': 2.9.6
+      '@tauri-apps/cli-linux-x64-gnu': 2.9.6
+      '@tauri-apps/cli-linux-x64-musl': 2.9.6
+      '@tauri-apps/cli-win32-arm64-msvc': 2.9.6
+      '@tauri-apps/cli-win32-ia32-msvc': 2.9.6
+      '@tauri-apps/cli-win32-x64-msvc': 2.9.6
+
+  '@tauri-apps/plugin-dialog@2.6.0':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tauri-apps/plugin-fs@2.4.5':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tauri-apps/plugin-shell@2.3.4':
+    dependencies:
+      '@tauri-apps/api': 2.9.1
+
+  '@tsconfig/svelte@5.0.6': {}
+
+  '@tybys/wasm-util@0.10.1':
+    dependencies:
+      tslib: 2.8.1
+    optional: true
+
+  '@types/babel__core@7.20.5':
+    dependencies:
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+      '@types/babel__generator': 7.27.0
+      '@types/babel__template': 7.4.4
+      '@types/babel__traverse': 7.28.0
+
+  '@types/babel__generator@7.27.0':
+    dependencies:
+      '@babel/types': 7.28.6
+
+  '@types/babel__template@7.4.4':
+    dependencies:
+      '@babel/parser': 7.28.6
+      '@babel/types': 7.28.6
+
+  '@types/babel__traverse@7.28.0':
+    dependencies:
+      '@babel/types': 7.28.6
+
+  '@types/d3-hierarchy@1.1.11': {}
+
+  '@types/debug@4.1.12':
+    dependencies:
+      '@types/ms': 2.1.0
+
+  '@types/estree-jsx@1.0.5':
+    dependencies:
+      '@types/estree': 1.0.8
+
+  '@types/estree@1.0.8': {}
+
+  '@types/hast@3.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdast@4.0.4':
+    dependencies:
+      '@types/unist': 3.0.3
+
+  '@types/mdx@2.0.13': {}
+
+  '@types/ms@2.1.0': {}
+
+  '@types/node@24.10.9':
+    dependencies:
+      undici-types: 7.16.0
+
+  '@types/node@25.0.9':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 5.0.2(@sveltejs/vite-plugin-svelte@6.2.4(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4))(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))(svelte@5.46.4)
-      deepmerge: 4.3.1
-      magic-string: 0.30.21
-      obug: 2.1.1
-      svelte: 5.46.4
+      undici-types: 7.16.0
+
+  '@types/prismjs@1.26.5': {}
+
+  '@types/react-dom@19.2.3(@types/react@19.2.8)':
+    dependencies:
+      '@types/react': 19.2.8
+
+  '@types/react@19.2.8':
+    dependencies:
+      csstype: 3.2.3
+
+  '@types/unist@2.0.11': {}
+
+  '@types/unist@3.0.3': {}
+
+  '@ungap/structured-clone@1.3.0': {}
+
+  '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))':
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.6)
+      '@babel/plugin-transform-react-jsx-source': 7.27.1(@babel/core@7.28.6)
+      '@rolldown/pluginutils': 1.0.0-beta.53
+      '@types/babel__core': 7.20.5
+      react-refresh: 0.18.0
       vite: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
-      vitefu: 1.1.1(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))
+    transitivePeerDependencies:
+      - supports-color
 
-  '@tailwindcss/node@4.1.18':
+  accepts@1.3.8:
     dependencies:
-      '@jridgewell/remapping': 2.3.5
-      enhanced-resolve: 5.18.4
-      jiti: 2.6.1
-      lightningcss: 1.30.2
-      magic-string: 0.30.21
-      source-map-js: 1.2.1
-      tailwindcss: 4.1.18
+      mime-types: 2.1.35
+      negotiator: 0.6.3
 
-  '@tailwindcss/oxide-android-arm64@4.1.18':
-    optional: true
+  acorn-jsx@5.3.2(acorn@8.15.0):
+    dependencies:
+      acorn: 8.15.0
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.18':
-    optional: true
+  acorn@8.15.0: {}
 
-  '@tailwindcss/oxide-darwin-x64@4.1.18':
-    optional: true
+  arg@5.0.2: {}
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.18':
-    optional: true
+  argparse@2.0.1: {}
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.18':
-    optional: true
+  aria-hidden@1.2.6:
+    dependencies:
+      tslib: 2.8.1
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.18':
-    optional: true
+  aria-query@5.3.2: {}
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.18':
-    optional: true
+  array-flatten@1.1.1: {}
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.18':
-    optional: true
+  astring@1.9.0: {}
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.18':
-    optional: true
+  asynckit@0.4.0: {}
 
-  '@tailwindcss/oxide-wasm32-wasi@4.1.18':
-    optional: true
+  autoprefixer@10.4.23(postcss@8.5.6):
+    dependencies:
+      browserslist: 4.28.1
+      caniuse-lite: 1.0.30001764
+      fraction.js: 5.3.4
+      picocolors: 1.1.1
+      postcss: 8.5.6
+      postcss-value-parser: 4.2.0
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.18':
-    optional: true
+  axios-proxy-builder@0.1.2:
+    dependencies:
+      tunnel: 0.0.6
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.18':
+  axios@1.13.2:
+    dependencies:
+      follow-redirects: 1.15.11
+      form-data: 4.0.5
+      proxy-from-env: 1.1.0
+    transitivePeerDependencies:
+      - debug
+
+  axobject-query@4.1.0: {}
+
+  babel-dead-code-elimination@1.0.12:
+    dependencies:
+      '@babel/core': 7.28.6
+      '@babel/parser': 7.28.6
+      '@babel/traverse': 7.28.6
+      '@babel/types': 7.28.6
+    transitivePeerDependencies:
+      - supports-color
+
+  bail@2.0.2: {}
+
+  baseline-browser-mapping@2.9.15: {}
+
+  basic-auth@2.0.1:
+    dependencies:
+      safe-buffer: 5.1.2
+
+  body-parser@1.20.4:
+    dependencies:
+      bytes: 3.1.2
+      content-type: 1.0.5
+      debug: 2.6.9
+      depd: 2.0.0
+      destroy: 1.2.0
+      http-errors: 2.0.1
+      iconv-lite: 0.4.24
+      on-finished: 2.4.1
+      qs: 6.14.1
+      raw-body: 2.5.3
+      type-is: 1.6.18
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+
+  browserslist@4.28.1:
+    dependencies:
+      baseline-browser-mapping: 2.9.15
+      caniuse-lite: 1.0.30001764
+      electron-to-chromium: 1.5.267
+      node-releases: 2.0.27
+      update-browserslist-db: 1.2.3(browserslist@4.28.1)
+
+  buffer-from@1.1.2: {}
+
+  bytes@3.1.2: {}
+
+  cac@6.7.14: {}
+
+  call-bind-apply-helpers@1.0.2:
+    dependencies:
+      es-errors: 1.3.0
+      function-bind: 1.1.2
+
+  call-bound@1.0.4:
+    dependencies:
+      call-bind-apply-helpers: 1.0.2
+      get-intrinsic: 1.3.0
+
+  caniuse-lite@1.0.30001764: {}
+
+  ccount@2.0.1: {}
+
+  chain-function@1.0.1: {}
+
+  chalk@5.6.2: {}
+
+  char-regex@1.0.2: {}
+
+  character-entities-html4@2.1.0: {}
+
+  character-entities-legacy@3.0.0: {}
+
+  character-entities@2.0.2: {}
+
+  character-reference-invalid@2.0.1: {}
+
+  chokidar@4.0.3:
+    dependencies:
+      readdirp: 4.1.2
+
+  chokidar@5.0.0:
+    dependencies:
+      readdirp: 5.0.0
+
+  class-variance-authority@0.7.1:
+    dependencies:
+      clsx: 2.1.1
+
+  classnames@2.5.1: {}
+
+  clone@1.0.4:
     optional: true
 
-  '@tailwindcss/oxide@4.1.18':
-    optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-arm64': 4.1.18
-      '@tailwindcss/oxide-darwin-x64': 4.1.18
-      '@tailwindcss/oxide-freebsd-x64': 4.1.18
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.18
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.18
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.18
-      '@tailwindcss/oxide-wasm32-wasi': 4.1.18
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.18
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.18
+  clone@2.1.2: {}
+
+  clsx@2.1.1: {}
+
+  collapse-white-space@2.1.0: {}
+
+  combined-stream@1.0.8:
+    dependencies:
+      delayed-stream: 1.0.0
+
+  comma-separated-tokens@2.0.3: {}
+
+  compressible@2.0.18:
+    dependencies:
+      mime-db: 1.52.0
+
+  compression@1.8.1:
+    dependencies:
+      bytes: 3.1.2
+      compressible: 2.0.18
+      debug: 2.6.9
+      negotiator: 0.6.4
+      on-headers: 1.1.0
+      safe-buffer: 5.2.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
+
+  compute-scroll-into-view@3.1.1: {}
+
+  confbox@0.2.2: {}
+
+  consola@3.4.2: {}
+
+  console.table@0.10.0:
+    dependencies:
+      easy-table: 1.1.0
+
+  content-disposition@0.5.4:
+    dependencies:
+      safe-buffer: 5.2.1
+
+  content-type@1.0.5: {}
+
+  convert-source-map@2.0.0: {}
+
+  cookie-signature@1.0.7: {}
+
+  cookie@0.7.2: {}
+
+  cookie@1.1.1: {}
+
+  cssesc@3.0.0: {}
 
-  '@tailwindcss/vite@4.1.18(rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0))':
-    dependencies:
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      tailwindcss: 4.1.18
-      vite: rolldown-vite@7.2.5(@types/node@24.10.9)(jiti@2.6.1)(tsx@4.21.0)
+  csstype@3.2.3: {}
 
-  '@tailwindcss/vite@4.1.18(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0))':
-    dependencies:
-      '@tailwindcss/node': 4.1.18
-      '@tailwindcss/oxide': 4.1.18
-      tailwindcss: 4.1.18
-      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
+  d3-color@3.1.0: {}
 
-  '@tanstack/devtools-client@0.0.5':
-    dependencies:
-      '@tanstack/devtools-event-client': 0.4.0
+  d3-dispatch@3.0.1: {}
 
-  '@tanstack/devtools-event-bus@0.4.0':
+  d3-drag@3.0.0:
     dependencies:
-      ws: 8.19.0
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
 
-  '@tanstack/devtools-event-client@0.4.0': {}
+  d3-ease@3.0.1: {}
 
-  '@tanstack/devtools-ui@0.4.4(csstype@3.2.3)(solid-js@1.9.10)':
+  d3-hierarchy@1.1.9: {}
+
+  d3-interpolate@3.0.1:
     dependencies:
-      clsx: 2.1.1
-      goober: 2.1.18(csstype@3.2.3)
-      solid-js: 1.9.10
-    transitivePeerDependencies:
-      - csstype
+      d3-color: 3.1.0
 
-  '@tanstack/devtools-vite@0.4.1(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0))':
+  d3-path@1.0.9: {}
+
+  d3-selection@3.0.0: {}
+
+  d3-shape@1.3.7:
     dependencies:
-      '@babel/core': 7.28.6
-      '@babel/generator': 7.28.6
-      '@babel/parser': 7.28.6
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
-      '@tanstack/devtools-client': 0.0.5
-      '@tanstack/devtools-event-bus': 0.4.0
-      chalk: 5.6.2
-      launch-editor: 2.12.0
-      picomatch: 4.0.3
-      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
+      d3-path: 1.0.9
 
-  '@tanstack/devtools@0.10.3(csstype@3.2.3)(solid-js@1.9.10)':
+  d3-timer@3.0.1: {}
+
+  d3-transition@3.0.1(d3-selection@3.0.0):
     dependencies:
-      '@solid-primitives/event-listener': 2.4.3(solid-js@1.9.10)
-      '@solid-primitives/keyboard': 1.3.3(solid-js@1.9.10)
-      '@solid-primitives/resize-observer': 2.1.3(solid-js@1.9.10)
-      '@tanstack/devtools-client': 0.0.5
-      '@tanstack/devtools-event-bus': 0.4.0
-      '@tanstack/devtools-ui': 0.4.4(csstype@3.2.3)(solid-js@1.9.10)
-      clsx: 2.1.1
-      goober: 2.1.18(csstype@3.2.3)
-      solid-js: 1.9.10
-    transitivePeerDependencies:
-      - bufferutil
-      - csstype
-      - utf-8-validate
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
 
-  '@tanstack/react-devtools@0.9.2(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(csstype@3.2.3)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(solid-js@1.9.10)':
+  d3-zoom@3.0.0:
     dependencies:
-      '@tanstack/devtools': 0.10.3(csstype@3.2.3)(solid-js@1.9.10)
-      '@types/react': 19.2.8
-      '@types/react-dom': 19.2.3(@types/react@19.2.8)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-    transitivePeerDependencies:
-      - bufferutil
-      - csstype
-      - solid-js
-      - utf-8-validate
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
 
-  '@tauri-apps/api@2.9.1': {}
+  debug@2.6.9:
+    dependencies:
+      ms: 2.0.0
 
-  '@tauri-apps/cli-darwin-arm64@2.9.6':
-    optional: true
+  debug@4.4.3:
+    dependencies:
+      ms: 2.1.3
 
-  '@tauri-apps/cli-darwin-x64@2.9.6':
-    optional: true
+  decode-named-character-reference@1.3.0:
+    dependencies:
+      character-entities: 2.0.2
 
-  '@tauri-apps/cli-linux-arm-gnueabihf@2.9.6':
-    optional: true
+  dedent@1.7.1: {}
 
-  '@tauri-apps/cli-linux-arm64-gnu@2.9.6':
-    optional: true
+  deepmerge@4.3.1: {}
 
-  '@tauri-apps/cli-linux-arm64-musl@2.9.6':
+  defaults@1.0.4:
+    dependencies:
+      clone: 1.0.4
     optional: true
 
-  '@tauri-apps/cli-linux-riscv64-gnu@2.9.6':
-    optional: true
+  delayed-stream@1.0.0: {}
 
-  '@tauri-apps/cli-linux-x64-gnu@2.9.6':
-    optional: true
+  depd@2.0.0: {}
 
-  '@tauri-apps/cli-linux-x64-musl@2.9.6':
-    optional: true
+  dequal@2.0.3: {}
 
-  '@tauri-apps/cli-win32-arm64-msvc@2.9.6':
-    optional: true
+  destroy@1.2.0: {}
 
-  '@tauri-apps/cli-win32-ia32-msvc@2.9.6':
-    optional: true
+  detect-libc@2.1.2: {}
 
-  '@tauri-apps/cli-win32-x64-msvc@2.9.6':
-    optional: true
+  detect-node-es@1.1.0: {}
 
-  '@tauri-apps/cli@2.9.6':
-    optionalDependencies:
-      '@tauri-apps/cli-darwin-arm64': 2.9.6
-      '@tauri-apps/cli-darwin-x64': 2.9.6
-      '@tauri-apps/cli-linux-arm-gnueabihf': 2.9.6
-      '@tauri-apps/cli-linux-arm64-gnu': 2.9.6
-      '@tauri-apps/cli-linux-arm64-musl': 2.9.6
-      '@tauri-apps/cli-linux-riscv64-gnu': 2.9.6
-      '@tauri-apps/cli-linux-x64-gnu': 2.9.6
-      '@tauri-apps/cli-linux-x64-musl': 2.9.6
-      '@tauri-apps/cli-win32-arm64-msvc': 2.9.6
-      '@tauri-apps/cli-win32-ia32-msvc': 2.9.6
-      '@tauri-apps/cli-win32-x64-msvc': 2.9.6
+  devalue@5.6.2: {}
 
-  '@tauri-apps/plugin-dialog@2.6.0':
+  devlop@1.1.0:
     dependencies:
-      '@tauri-apps/api': 2.9.1
+      dequal: 2.0.3
 
-  '@tauri-apps/plugin-fs@2.4.5':
+  dom-helpers@3.4.0:
     dependencies:
-      '@tauri-apps/api': 2.9.1
+      '@babel/runtime': 7.28.6
 
-  '@tauri-apps/plugin-shell@2.3.4':
+  dunder-proto@1.0.1:
     dependencies:
-      '@tauri-apps/api': 2.9.1
+      call-bind-apply-helpers: 1.0.2
+      es-errors: 1.3.0
+      gopd: 1.2.0
 
-  '@tsconfig/svelte@5.0.6': {}
+  easy-table@1.1.0:
+    optionalDependencies:
+      wcwidth: 1.0.1
 
-  '@tybys/wasm-util@0.10.1':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
+  ee-first@1.1.1: {}
 
-  '@types/d3-hierarchy@1.1.11': {}
+  electron-to-chromium@1.5.267: {}
 
-  '@types/debug@4.1.12':
+  emojilib@2.4.0: {}
+
+  encodeurl@2.0.0: {}
+
+  enhanced-resolve@5.18.4:
     dependencies:
-      '@types/ms': 2.1.0
+      graceful-fs: 4.2.11
+      tapable: 2.3.0
 
-  '@types/estree-jsx@1.0.5':
+  es-define-property@1.0.1: {}
+
+  es-errors@1.3.0: {}
+
+  es-module-lexer@1.7.0: {}
+
+  es-object-atoms@1.1.1:
     dependencies:
-      '@types/estree': 1.0.8
+      es-errors: 1.3.0
 
-  '@types/estree@1.0.8': {}
+  es-set-tostringtag@2.1.0:
+    dependencies:
+      es-errors: 1.3.0
+      get-intrinsic: 1.3.0
+      has-tostringtag: 1.0.2
+      hasown: 2.0.2
 
-  '@types/hast@3.0.4':
+  esast-util-from-estree@2.0.0:
     dependencies:
-      '@types/unist': 3.0.3
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      unist-util-position-from-estree: 2.0.0
 
-  '@types/mdast@4.0.4':
+  esast-util-from-js@2.0.1:
     dependencies:
-      '@types/unist': 3.0.3
+      '@types/estree-jsx': 1.0.5
+      acorn: 8.15.0
+      esast-util-from-estree: 2.0.0
+      vfile-message: 4.0.3
 
-  '@types/mdx@2.0.13': {}
+  esbuild@0.27.2:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.2
+      '@esbuild/android-arm': 0.27.2
+      '@esbuild/android-arm64': 0.27.2
+      '@esbuild/android-x64': 0.27.2
+      '@esbuild/darwin-arm64': 0.27.2
+      '@esbuild/darwin-x64': 0.27.2
+      '@esbuild/freebsd-arm64': 0.27.2
+      '@esbuild/freebsd-x64': 0.27.2
+      '@esbuild/linux-arm': 0.27.2
+      '@esbuild/linux-arm64': 0.27.2
+      '@esbuild/linux-ia32': 0.27.2
+      '@esbuild/linux-loong64': 0.27.2
+      '@esbuild/linux-mips64el': 0.27.2
+      '@esbuild/linux-ppc64': 0.27.2
+      '@esbuild/linux-riscv64': 0.27.2
+      '@esbuild/linux-s390x': 0.27.2
+      '@esbuild/linux-x64': 0.27.2
+      '@esbuild/netbsd-arm64': 0.27.2
+      '@esbuild/netbsd-x64': 0.27.2
+      '@esbuild/openbsd-arm64': 0.27.2
+      '@esbuild/openbsd-x64': 0.27.2
+      '@esbuild/openharmony-arm64': 0.27.2
+      '@esbuild/sunos-x64': 0.27.2
+      '@esbuild/win32-arm64': 0.27.2
+      '@esbuild/win32-ia32': 0.27.2
+      '@esbuild/win32-x64': 0.27.2
 
-  '@types/ms@2.1.0': {}
+  escalade@3.2.0: {}
+
+  escape-html@1.0.3: {}
+
+  escape-string-regexp@5.0.0: {}
 
-  '@types/node@24.10.9':
-    dependencies:
-      undici-types: 7.16.0
+  esm-env@1.2.2: {}
 
-  '@types/node@25.0.9':
+  esrap@2.2.1:
     dependencies:
-      undici-types: 7.16.0
-
-  '@types/prismjs@1.26.5': {}
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@types/react-dom@19.2.3(@types/react@19.2.8)':
+  estree-util-attach-comments@3.0.0:
     dependencies:
-      '@types/react': 19.2.8
+      '@types/estree': 1.0.8
 
-  '@types/react@19.2.8':
+  estree-util-build-jsx@3.0.1:
     dependencies:
-      csstype: 3.2.3
+      '@types/estree-jsx': 1.0.5
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      estree-walker: 3.0.3
 
-  '@types/unist@2.0.11': {}
+  estree-util-is-identifier-name@3.0.0: {}
 
-  '@types/unist@3.0.3': {}
+  estree-util-scope@1.0.0:
+    dependencies:
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
 
-  '@ungap/structured-clone@1.3.0': {}
+  estree-util-to-js@2.0.0:
+    dependencies:
+      '@types/estree-jsx': 1.0.5
+      astring: 1.9.0
+      source-map: 0.7.6
 
-  accepts@1.3.8:
+  estree-util-value-to-estree@3.5.0:
     dependencies:
-      mime-types: 2.1.35
-      negotiator: 0.6.3
+      '@types/estree': 1.0.8
 
-  acorn-jsx@5.3.2(acorn@8.15.0):
+  estree-util-visit@2.0.0:
     dependencies:
-      acorn: 8.15.0
+      '@types/estree-jsx': 1.0.5
+      '@types/unist': 3.0.3
 
-  acorn@8.15.0: {}
+  estree-walker@3.0.3:
+    dependencies:
+      '@types/estree': 1.0.8
 
-  arg@5.0.2: {}
+  etag@1.8.1: {}
 
-  argparse@2.0.1: {}
+  exit-hook@2.2.1: {}
 
-  aria-hidden@1.2.6:
+  express@4.22.1:
     dependencies:
-      tslib: 2.8.1
-
-  aria-query@5.3.2: {}
+      accepts: 1.3.8
+      array-flatten: 1.1.1
+      body-parser: 1.20.4
+      content-disposition: 0.5.4
+      content-type: 1.0.5
+      cookie: 0.7.2
+      cookie-signature: 1.0.7
+      debug: 2.6.9
+      depd: 2.0.0
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      etag: 1.8.1
+      finalhandler: 1.3.2
+      fresh: 0.5.2
+      http-errors: 2.0.1
+      merge-descriptors: 1.0.3
+      methods: 1.1.2
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      path-to-regexp: 0.1.12
+      proxy-addr: 2.0.7
+      qs: 6.14.1
+      range-parser: 1.2.1
+      safe-buffer: 5.2.1
+      send: 0.19.2
+      serve-static: 1.16.3
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      type-is: 1.6.18
+      utils-merge: 1.0.1
+      vary: 1.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  array-flatten@1.1.1: {}
+  exsolve@1.0.8: {}
 
-  astring@1.9.0: {}
+  extend@3.0.2: {}
 
-  asynckit@0.4.0: {}
+  fdir@6.5.0(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
 
-  autoprefixer@10.4.23(postcss@8.5.6):
+  finalhandler@1.3.2:
     dependencies:
-      browserslist: 4.28.1
-      caniuse-lite: 1.0.30001764
-      fraction.js: 5.3.4
-      picocolors: 1.1.1
-      postcss: 8.5.6
-      postcss-value-parser: 4.2.0
+      debug: 2.6.9
+      encodeurl: 2.0.0
+      escape-html: 1.0.3
+      on-finished: 2.4.1
+      parseurl: 1.3.3
+      statuses: 2.0.2
+      unpipe: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
 
-  axios-proxy-builder@0.1.2:
-    dependencies:
-      tunnel: 0.0.6
+  follow-redirects@1.15.11: {}
 
-  axios@1.13.2:
+  form-data@4.0.5:
     dependencies:
-      follow-redirects: 1.15.11
-      form-data: 4.0.5
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
+      asynckit: 0.4.0
+      combined-stream: 1.0.8
+      es-set-tostringtag: 2.1.0
+      hasown: 2.0.2
+      mime-types: 2.1.35
 
-  axobject-query@4.1.0: {}
+  forwarded@0.2.0: {}
 
-  babel-dead-code-elimination@1.0.12:
+  fraction.js@5.3.4: {}
+
+  framer-motion@12.27.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
     dependencies:
-      '@babel/core': 7.28.6
-      '@babel/parser': 7.28.6
-      '@babel/traverse': 7.28.6
-      '@babel/types': 7.28.6
-    transitivePeerDependencies:
-      - supports-color
+      motion-dom: 12.27.1
+      motion-utils: 12.24.10
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
 
-  bail@2.0.2: {}
+  fresh@0.5.2: {}
 
-  baseline-browser-mapping@2.9.15: {}
+  fsevents@2.3.3:
+    optional: true
 
-  basic-auth@2.0.1:
+  fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5):
     dependencies:
-      safe-buffer: 5.1.2
+      '@formatjs/intl-localematcher': 0.7.5
+      '@orama/orama': 3.1.18
+      '@shikijs/rehype': 3.21.0
+      '@shikijs/transformers': 3.21.0
+      estree-util-value-to-estree: 3.5.0
+      github-slugger: 2.0.0
+      hast-util-to-estree: 3.1.3
+      hast-util-to-jsx-runtime: 2.3.6
+      image-size: 2.0.2
+      negotiator: 1.0.0
+      npm-to-yarn: 3.0.1
+      path-to-regexp: 8.3.0
+      remark: 15.0.1
+      remark-gfm: 4.0.1
+      remark-rehype: 11.1.2
+      scroll-into-view-if-needed: 3.1.0
+      shiki: 3.21.0
+      tinyglobby: 0.2.15
+      unist-util-visit: 5.0.0
+    optionalDependencies:
+      '@types/react': 19.2.8
+      lucide-react: 0.562.0(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      zod: 4.3.5
+    transitivePeerDependencies:
+      - supports-color
 
-  body-parser@1.20.4:
+  fumadocs-mdx@14.2.6(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react@19.2.3)(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)):
     dependencies:
-      bytes: 3.1.2
-      content-type: 1.0.5
-      debug: 2.6.9
-      depd: 2.0.0
-      destroy: 1.2.0
-      http-errors: 2.0.1
-      iconv-lite: 0.4.24
-      on-finished: 2.4.1
-      qs: 6.14.1
-      raw-body: 2.5.3
-      type-is: 1.6.18
-      unpipe: 1.0.0
+      '@mdx-js/mdx': 3.1.1
+      '@standard-schema/spec': 1.1.0
+      chokidar: 5.0.0
+      esbuild: 0.27.2
+      estree-util-value-to-estree: 3.5.0
+      fumadocs-core: 16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5)
+      js-yaml: 4.1.1
+      mdast-util-to-markdown: 2.1.2
+      picocolors: 1.1.1
+      picomatch: 4.0.3
+      remark-mdx: 3.1.1
+      tinyexec: 1.0.2
+      tinyglobby: 0.2.15
+      unified: 11.0.5
+      unist-util-remove-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
+      zod: 4.3.5
+    optionalDependencies:
+      '@types/react': 19.2.8
+      react: 19.2.3
+      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  browserslist@4.28.1:
+  fumadocs-ui@16.4.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
     dependencies:
-      baseline-browser-mapping: 2.9.15
-      caniuse-lite: 1.0.30001764
-      electron-to-chromium: 1.5.267
-      node-releases: 2.0.27
-      update-browserslist-db: 1.2.3(browserslist@4.28.1)
-
-  buffer-from@1.1.2: {}
+      '@fumadocs/ui': 16.4.7(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
+      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.8)(react@19.2.3)
+      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      class-variance-authority: 0.7.1
+      fumadocs-core: 16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5)
+      lucide-react: 0.562.0(react@19.2.3)
+      next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+      react-medium-image-zoom: 5.4.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
+      scroll-into-view-if-needed: 3.1.0
+    optionalDependencies:
+      '@types/react': 19.2.8
+      tailwindcss: 4.1.18
+    transitivePeerDependencies:
+      - '@types/react-dom'
 
-  bytes@3.1.2: {}
+  function-bind@1.1.2: {}
 
-  cac@6.7.14: {}
+  gensync@1.0.0-beta.2: {}
 
-  call-bind-apply-helpers@1.0.2:
+  get-intrinsic@1.3.0:
     dependencies:
+      call-bind-apply-helpers: 1.0.2
+      es-define-property: 1.0.1
       es-errors: 1.3.0
+      es-object-atoms: 1.1.1
       function-bind: 1.1.2
+      get-proto: 1.0.1
+      gopd: 1.2.0
+      has-symbols: 1.1.0
+      hasown: 2.0.2
+      math-intrinsics: 1.1.0
 
-  call-bound@1.0.4:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      get-intrinsic: 1.3.0
-
-  caniuse-lite@1.0.30001764: {}
-
-  ccount@2.0.1: {}
-
-  chain-function@1.0.1: {}
-
-  chalk@5.6.2: {}
-
-  char-regex@1.0.2: {}
-
-  character-entities-html4@2.1.0: {}
-
-  character-entities-legacy@3.0.0: {}
-
-  character-entities@2.0.2: {}
+  get-nonce@1.0.1: {}
 
-  character-reference-invalid@2.0.1: {}
+  get-port@5.1.1: {}
 
-  chokidar@4.0.3:
+  get-proto@1.0.1:
     dependencies:
-      readdirp: 4.1.2
+      dunder-proto: 1.0.1
+      es-object-atoms: 1.1.1
 
-  chokidar@5.0.0:
+  get-tsconfig@4.13.0:
     dependencies:
-      readdirp: 5.0.0
+      resolve-pkg-maps: 1.0.0
 
-  class-variance-authority@0.7.1:
+  github-slugger@2.0.0: {}
+
+  glob@13.0.0:
     dependencies:
-      clsx: 2.1.1
+      minimatch: 10.1.1
+      minipass: 7.1.2
+      path-scurry: 2.0.1
 
-  classnames@2.5.1: {}
+  globals@16.5.0: {}
 
-  clone@1.0.4:
-    optional: true
+  globrex@0.1.2: {}
 
-  clone@2.1.2: {}
+  goober@2.1.18(csstype@3.2.3):
+    dependencies:
+      csstype: 3.2.3
 
-  clsx@2.1.1: {}
+  gopd@1.2.0: {}
 
-  collapse-white-space@2.1.0: {}
+  graceful-fs@4.2.11: {}
 
-  combined-stream@1.0.8:
-    dependencies:
-      delayed-stream: 1.0.0
+  has-symbols@1.1.0: {}
 
-  comma-separated-tokens@2.0.3: {}
+  has-tostringtag@1.0.2:
+    dependencies:
+      has-symbols: 1.1.0
 
-  compressible@2.0.18:
+  hasown@2.0.2:
     dependencies:
-      mime-db: 1.52.0
+      function-bind: 1.1.2
 
-  compression@1.8.1:
+  hast-util-to-estree@3.1.3:
     dependencies:
-      bytes: 3.1.2
-      compressible: 2.0.18
-      debug: 2.6.9
-      negotiator: 0.6.4
-      on-headers: 1.1.0
-      safe-buffer: 5.2.1
-      vary: 1.1.2
+      '@types/estree': 1.0.8
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-attach-comments: 3.0.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      zwitch: 2.0.4
     transitivePeerDependencies:
       - supports-color
 
-  compute-scroll-into-view@3.1.1: {}
-
-  confbox@0.2.2: {}
-
-  consola@3.4.2: {}
-
-  console.table@0.10.0:
+  hast-util-to-html@9.0.5:
     dependencies:
-      easy-table: 1.1.0
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      comma-separated-tokens: 2.0.3
+      hast-util-whitespace: 3.0.0
+      html-void-elements: 3.0.0
+      mdast-util-to-hast: 13.2.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      stringify-entities: 4.0.4
+      zwitch: 2.0.4
 
-  content-disposition@0.5.4:
+  hast-util-to-jsx-runtime@2.3.6:
     dependencies:
-      safe-buffer: 5.2.1
-
-  content-type@1.0.5: {}
-
-  convert-source-map@2.0.0: {}
-
-  cookie-signature@1.0.7: {}
-
-  cookie@0.7.2: {}
-
-  cookie@1.1.1: {}
+      '@types/estree': 1.0.8
+      '@types/hast': 3.0.4
+      '@types/unist': 3.0.3
+      comma-separated-tokens: 2.0.3
+      devlop: 1.1.0
+      estree-util-is-identifier-name: 3.0.0
+      hast-util-whitespace: 3.0.0
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      property-information: 7.1.0
+      space-separated-tokens: 2.0.2
+      style-to-js: 1.1.21
+      unist-util-position: 5.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
 
-  cssesc@3.0.0: {}
+  hast-util-to-string@3.0.1:
+    dependencies:
+      '@types/hast': 3.0.4
 
-  csstype@3.2.3: {}
+  hast-util-whitespace@3.0.0:
+    dependencies:
+      '@types/hast': 3.0.4
 
-  d3-color@3.1.0: {}
+  html-void-elements@3.0.0: {}
 
-  d3-dispatch@3.0.1: {}
+  http-errors@2.0.1:
+    dependencies:
+      depd: 2.0.0
+      inherits: 2.0.4
+      setprototypeof: 1.2.0
+      statuses: 2.0.2
+      toidentifier: 1.0.1
 
-  d3-drag@3.0.0:
+  iconv-lite@0.4.24:
     dependencies:
-      d3-dispatch: 3.0.1
-      d3-selection: 3.0.0
+      safer-buffer: 2.1.2
 
-  d3-ease@3.0.1: {}
+  image-size@2.0.2: {}
 
-  d3-hierarchy@1.1.9: {}
+  inherits@2.0.4: {}
 
-  d3-interpolate@3.0.1:
-    dependencies:
-      d3-color: 3.1.0
+  inline-style-parser@0.2.7: {}
 
-  d3-path@1.0.9: {}
+  ipaddr.js@1.9.1: {}
 
-  d3-selection@3.0.0: {}
+  is-alphabetical@2.0.1: {}
 
-  d3-shape@1.3.7:
+  is-alphanumerical@2.0.1:
     dependencies:
-      d3-path: 1.0.9
-
-  d3-timer@3.0.1: {}
+      is-alphabetical: 2.0.1
+      is-decimal: 2.0.1
 
-  d3-transition@3.0.1(d3-selection@3.0.0):
-    dependencies:
-      d3-color: 3.1.0
-      d3-dispatch: 3.0.1
-      d3-ease: 3.0.1
-      d3-interpolate: 3.0.1
-      d3-selection: 3.0.0
-      d3-timer: 3.0.1
+  is-decimal@2.0.1: {}
 
-  d3-zoom@3.0.0:
-    dependencies:
-      d3-dispatch: 3.0.1
-      d3-drag: 3.0.0
-      d3-interpolate: 3.0.1
-      d3-selection: 3.0.0
-      d3-transition: 3.0.1(d3-selection@3.0.0)
+  is-hexadecimal@2.0.1: {}
 
-  debug@2.6.9:
-    dependencies:
-      ms: 2.0.0
+  is-plain-obj@4.1.0: {}
 
-  debug@4.4.3:
+  is-reference@3.0.3:
     dependencies:
-      ms: 2.1.3
+      '@types/estree': 1.0.8
 
-  decode-named-character-reference@1.3.0:
-    dependencies:
-      character-entities: 2.0.2
+  isbot@5.1.33: {}
 
-  dedent@1.7.1: {}
+  jiti@2.6.1: {}
 
-  deepmerge@4.3.1: {}
+  js-tokens@4.0.0: {}
 
-  defaults@1.0.4:
+  js-yaml@4.1.1:
     dependencies:
-      clone: 1.0.4
-    optional: true
-
-  delayed-stream@1.0.0: {}
+      argparse: 2.0.1
 
-  depd@2.0.0: {}
+  jsesc@3.0.2: {}
 
-  dequal@2.0.3: {}
+  json5@2.2.3: {}
 
-  destroy@1.2.0: {}
+  launch-editor@2.12.0:
+    dependencies:
+      picocolors: 1.1.1
+      shell-quote: 1.8.3
 
-  detect-libc@2.1.2: {}
+  lightningcss-android-arm64@1.30.2:
+    optional: true
 
-  detect-node-es@1.1.0: {}
+  lightningcss-darwin-arm64@1.30.2:
+    optional: true
 
-  devalue@5.6.2: {}
+  lightningcss-darwin-x64@1.30.2:
+    optional: true
 
-  devlop@1.1.0:
-    dependencies:
-      dequal: 2.0.3
+  lightningcss-freebsd-x64@1.30.2:
+    optional: true
 
-  dom-helpers@3.4.0:
-    dependencies:
-      '@babel/runtime': 7.28.6
+  lightningcss-linux-arm-gnueabihf@1.30.2:
+    optional: true
 
-  dunder-proto@1.0.1:
-    dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-errors: 1.3.0
-      gopd: 1.2.0
+  lightningcss-linux-arm64-gnu@1.30.2:
+    optional: true
 
-  easy-table@1.1.0:
-    optionalDependencies:
-      wcwidth: 1.0.1
+  lightningcss-linux-arm64-musl@1.30.2:
+    optional: true
 
-  ee-first@1.1.1: {}
+  lightningcss-linux-x64-gnu@1.30.2:
+    optional: true
 
-  electron-to-chromium@1.5.267: {}
+  lightningcss-linux-x64-musl@1.30.2:
+    optional: true
 
-  emojilib@2.4.0: {}
+  lightningcss-win32-arm64-msvc@1.30.2:
+    optional: true
 
-  encodeurl@2.0.0: {}
+  lightningcss-win32-x64-msvc@1.30.2:
+    optional: true
 
-  enhanced-resolve@5.18.4:
+  lightningcss@1.30.2:
     dependencies:
-      graceful-fs: 4.2.11
-      tapable: 2.3.0
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.30.2
+      lightningcss-darwin-arm64: 1.30.2
+      lightningcss-darwin-x64: 1.30.2
+      lightningcss-freebsd-x64: 1.30.2
+      lightningcss-linux-arm-gnueabihf: 1.30.2
+      lightningcss-linux-arm64-gnu: 1.30.2
+      lightningcss-linux-arm64-musl: 1.30.2
+      lightningcss-linux-x64-gnu: 1.30.2
+      lightningcss-linux-x64-musl: 1.30.2
+      lightningcss-win32-arm64-msvc: 1.30.2
+      lightningcss-win32-x64-msvc: 1.30.2
 
-  es-define-property@1.0.1: {}
+  locate-character@3.0.0: {}
 
-  es-errors@1.3.0: {}
+  lodash@4.17.21: {}
 
-  es-module-lexer@1.7.0: {}
+  longest-streak@3.1.0: {}
 
-  es-object-atoms@1.1.1:
+  loose-envify@1.4.0:
     dependencies:
-      es-errors: 1.3.0
+      js-tokens: 4.0.0
 
-  es-set-tostringtag@2.1.0:
-    dependencies:
-      es-errors: 1.3.0
-      get-intrinsic: 1.3.0
-      has-tostringtag: 1.0.2
-      hasown: 2.0.2
+  lru-cache@11.2.4: {}
 
-  esast-util-from-estree@2.0.0:
+  lru-cache@5.1.1:
     dependencies:
-      '@types/estree-jsx': 1.0.5
-      devlop: 1.1.0
-      estree-util-visit: 2.0.0
-      unist-util-position-from-estree: 2.0.0
+      yallist: 3.1.1
 
-  esast-util-from-js@2.0.1:
+  lucide-react@0.562.0(react@19.2.3):
     dependencies:
-      '@types/estree-jsx': 1.0.5
-      acorn: 8.15.0
-      esast-util-from-estree: 2.0.0
-      vfile-message: 4.0.3
+      react: 19.2.3
 
-  esbuild@0.27.2:
-    optionalDependencies:
-      '@esbuild/aix-ppc64': 0.27.2
-      '@esbuild/android-arm': 0.27.2
-      '@esbuild/android-arm64': 0.27.2
-      '@esbuild/android-x64': 0.27.2
-      '@esbuild/darwin-arm64': 0.27.2
-      '@esbuild/darwin-x64': 0.27.2
-      '@esbuild/freebsd-arm64': 0.27.2
-      '@esbuild/freebsd-x64': 0.27.2
-      '@esbuild/linux-arm': 0.27.2
-      '@esbuild/linux-arm64': 0.27.2
-      '@esbuild/linux-ia32': 0.27.2
-      '@esbuild/linux-loong64': 0.27.2
-      '@esbuild/linux-mips64el': 0.27.2
-      '@esbuild/linux-ppc64': 0.27.2
-      '@esbuild/linux-riscv64': 0.27.2
-      '@esbuild/linux-s390x': 0.27.2
-      '@esbuild/linux-x64': 0.27.2
-      '@esbuild/netbsd-arm64': 0.27.2
-      '@esbuild/netbsd-x64': 0.27.2
-      '@esbuild/openbsd-arm64': 0.27.2
-      '@esbuild/openbsd-x64': 0.27.2
-      '@esbuild/openharmony-arm64': 0.27.2
-      '@esbuild/sunos-x64': 0.27.2
-      '@esbuild/win32-arm64': 0.27.2
-      '@esbuild/win32-ia32': 0.27.2
-      '@esbuild/win32-x64': 0.27.2
+  lucide-svelte@0.562.0(svelte@5.46.4):
+    dependencies:
+      svelte: 5.46.4
 
-  escalade@3.2.0: {}
+  magic-string@0.30.21:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.5
 
-  escape-html@1.0.3: {}
+  markdown-extensions@2.0.0: {}
 
-  escape-string-regexp@5.0.0: {}
+  markdown-table@3.0.4: {}
 
-  esm-env@1.2.2: {}
+  marked@17.0.1: {}
 
-  esrap@2.2.1:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.5.5
+  math-intrinsics@1.1.0: {}
 
-  estree-util-attach-comments@3.0.0:
+  mdast-util-find-and-replace@3.0.2:
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/mdast': 4.0.4
+      escape-string-regexp: 5.0.0
+      unist-util-is: 6.0.1
+      unist-util-visit-parents: 6.0.2
 
-  estree-util-build-jsx@3.0.1:
+  mdast-util-from-markdown@2.0.2:
     dependencies:
-      '@types/estree-jsx': 1.0.5
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      decode-named-character-reference: 1.3.0
       devlop: 1.1.0
-      estree-util-is-identifier-name: 3.0.0
-      estree-walker: 3.0.3
-
-  estree-util-is-identifier-name@3.0.0: {}
+      mdast-util-to-string: 4.0.0
+      micromark: 4.0.2
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-decode-string: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-stringify-position: 4.0.0
+    transitivePeerDependencies:
+      - supports-color
 
-  estree-util-scope@1.0.0:
+  mdast-util-gfm-autolink-literal@2.0.1:
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/mdast': 4.0.4
+      ccount: 2.0.1
       devlop: 1.1.0
+      mdast-util-find-and-replace: 3.0.2
+      micromark-util-character: 2.1.1
 
-  estree-util-to-js@2.0.0:
-    dependencies:
-      '@types/estree-jsx': 1.0.5
-      astring: 1.9.0
-      source-map: 0.7.6
-
-  estree-util-value-to-estree@3.5.0:
+  mdast-util-gfm-footnote@2.1.0:
     dependencies:
-      '@types/estree': 1.0.8
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      micromark-util-normalize-identifier: 2.0.1
+    transitivePeerDependencies:
+      - supports-color
 
-  estree-util-visit@2.0.0:
+  mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
-      '@types/estree-jsx': 1.0.5
-      '@types/unist': 3.0.3
+      '@types/mdast': 4.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  estree-walker@3.0.3:
+  mdast-util-gfm-table@2.0.0:
     dependencies:
-      '@types/estree': 1.0.8
-
-  etag@1.8.1: {}
-
-  exit-hook@2.2.1: {}
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      markdown-table: 3.0.4
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  express@4.22.1:
+  mdast-util-gfm-task-list-item@2.0.0:
     dependencies:
-      accepts: 1.3.8
-      array-flatten: 1.1.1
-      body-parser: 1.20.4
-      content-disposition: 0.5.4
-      content-type: 1.0.5
-      cookie: 0.7.2
-      cookie-signature: 1.0.7
-      debug: 2.6.9
-      depd: 2.0.0
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      etag: 1.8.1
-      finalhandler: 1.3.2
-      fresh: 0.5.2
-      http-errors: 2.0.1
-      merge-descriptors: 1.0.3
-      methods: 1.1.2
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      path-to-regexp: 0.1.12
-      proxy-addr: 2.0.7
-      qs: 6.14.1
-      range-parser: 1.2.1
-      safe-buffer: 5.2.1
-      send: 0.19.2
-      serve-static: 1.16.3
-      setprototypeof: 1.2.0
-      statuses: 2.0.2
-      type-is: 1.6.18
-      utils-merge: 1.0.1
-      vary: 1.1.2
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  exsolve@1.0.8: {}
-
-  extend@3.0.2: {}
-
-  fdir@6.5.0(picomatch@4.0.3):
-    optionalDependencies:
-      picomatch: 4.0.3
-
-  finalhandler@1.3.2:
+  mdast-util-gfm@3.1.0:
     dependencies:
-      debug: 2.6.9
-      encodeurl: 2.0.0
-      escape-html: 1.0.3
-      on-finished: 2.4.1
-      parseurl: 1.3.3
-      statuses: 2.0.2
-      unpipe: 1.0.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-gfm-autolink-literal: 2.0.1
+      mdast-util-gfm-footnote: 2.1.0
+      mdast-util-gfm-strikethrough: 2.0.0
+      mdast-util-gfm-table: 2.0.0
+      mdast-util-gfm-task-list-item: 2.0.0
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  follow-redirects@1.15.11: {}
-
-  form-data@4.0.5:
+  mdast-util-mdx-expression@2.0.1:
     dependencies:
-      asynckit: 0.4.0
-      combined-stream: 1.0.8
-      es-set-tostringtag: 2.1.0
-      hasown: 2.0.2
-      mime-types: 2.1.35
-
-  forwarded@0.2.0: {}
-
-  fraction.js@5.3.4: {}
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+    transitivePeerDependencies:
+      - supports-color
 
-  framer-motion@12.27.1(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+  mdast-util-mdx-jsx@3.2.0:
     dependencies:
-      motion-dom: 12.27.1
-      motion-utils: 12.24.10
-      tslib: 2.8.1
-    optionalDependencies:
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-
-  fresh@0.5.2: {}
-
-  fsevents@2.3.3:
-    optional: true
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      ccount: 2.0.1
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-to-markdown: 2.1.2
+      parse-entities: 4.0.2
+      stringify-entities: 4.0.4
+      unist-util-stringify-position: 4.0.0
+      vfile-message: 4.0.3
+    transitivePeerDependencies:
+      - supports-color
 
-  fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5):
+  mdast-util-mdx@3.0.0:
     dependencies:
-      '@formatjs/intl-localematcher': 0.7.5
-      '@orama/orama': 3.1.18
-      '@shikijs/rehype': 3.21.0
-      '@shikijs/transformers': 3.21.0
-      estree-util-value-to-estree: 3.5.0
-      github-slugger: 2.0.0
-      hast-util-to-estree: 3.1.3
-      hast-util-to-jsx-runtime: 2.3.6
-      image-size: 2.0.2
-      negotiator: 1.0.0
-      npm-to-yarn: 3.0.1
-      path-to-regexp: 8.3.0
-      remark: 15.0.1
-      remark-gfm: 4.0.1
-      remark-rehype: 11.1.2
-      scroll-into-view-if-needed: 3.1.0
-      shiki: 3.21.0
-      tinyglobby: 0.2.15
-      unist-util-visit: 5.0.0
-    optionalDependencies:
-      '@types/react': 19.2.8
-      lucide-react: 0.562.0(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-router: 7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      zod: 4.3.5
+      mdast-util-from-markdown: 2.0.2
+      mdast-util-mdx-expression: 2.0.1
+      mdast-util-mdx-jsx: 3.2.0
+      mdast-util-mdxjs-esm: 2.0.1
+      mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-mdx@14.2.6(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react@19.2.3)(rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)):
+  mdast-util-mdxjs-esm@2.0.1:
     dependencies:
-      '@mdx-js/mdx': 3.1.1
-      '@standard-schema/spec': 1.1.0
-      chokidar: 5.0.0
-      esbuild: 0.27.2
-      estree-util-value-to-estree: 3.5.0
-      fumadocs-core: 16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5)
-      js-yaml: 4.1.1
+      '@types/estree-jsx': 1.0.5
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      devlop: 1.1.0
+      mdast-util-from-markdown: 2.0.2
       mdast-util-to-markdown: 2.1.2
-      picocolors: 1.1.1
-      picomatch: 4.0.3
-      remark-mdx: 3.1.1
-      tinyexec: 1.0.2
-      tinyglobby: 0.2.15
-      unified: 11.0.5
-      unist-util-remove-position: 5.0.0
-      unist-util-visit: 5.0.0
-      vfile: 6.0.3
-      zod: 4.3.5
-    optionalDependencies:
-      '@types/react': 19.2.8
-      react: 19.2.3
-      vite: rolldown-vite@7.2.5(@types/node@25.0.9)(jiti@2.6.1)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  fumadocs-ui@16.4.7(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18):
+  mdast-util-phrasing@4.1.0:
     dependencies:
-      '@fumadocs/ui': 16.4.7(@types/react@19.2.8)(fumadocs-core@16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5))(react-dom@19.2.3(react@19.2.3))(react@19.2.3)(tailwindcss@4.1.18)
-      '@radix-ui/react-accordion': 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-dialog': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.8)(react@19.2.3)
-      '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-popover': 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      '@radix-ui/react-slot': 1.2.4(@types/react@19.2.8)(react@19.2.3)
-      '@radix-ui/react-tabs': 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.8))(@types/react@19.2.8)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      class-variance-authority: 0.7.1
-      fumadocs-core: 16.4.7(@types/react@19.2.8)(lucide-react@0.562.0(react@19.2.3))(react-dom@19.2.3(react@19.2.3))(react-router@7.12.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)(zod@4.3.5)
-      lucide-react: 0.562.0(react@19.2.3)
-      next-themes: 0.4.6(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      react: 19.2.3
-      react-dom: 19.2.3(react@19.2.3)
-      react-medium-image-zoom: 5.4.0(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
-      scroll-into-view-if-needed: 3.1.0
-    optionalDependencies:
-      '@types/react': 19.2.8
-      tailwindcss: 4.1.18
-    transitivePeerDependencies:
-      - '@types/react-dom'
+      '@types/mdast': 4.0.4
+      unist-util-is: 6.0.1
 
-  function-bind@1.1.2: {}
+  mdast-util-to-hast@13.2.1:
+    dependencies:
+      '@types/hast': 3.0.4
+      '@types/mdast': 4.0.4
+      '@ungap/structured-clone': 1.3.0
+      devlop: 1.1.0
+      micromark-util-sanitize-uri: 2.0.1
+      trim-lines: 3.0.1
+      unist-util-position: 5.0.0
+      unist-util-visit: 5.0.0
+      vfile: 6.0.3
 
-  gensync@1.0.0-beta.2: {}
+  mdast-util-to-markdown@2.1.2:
+    dependencies:
+      '@types/mdast': 4.0.4
+      '@types/unist': 3.0.3
+      longest-streak: 3.1.0
+      mdast-util-phrasing: 4.1.0
+      mdast-util-to-string: 4.0.0
+      micromark-util-classify-character: 2.0.1
+      micromark-util-decode-string: 2.0.1
+      unist-util-visit: 5.0.0
+      zwitch: 2.0.4
 
-  get-intrinsic@1.3.0:
+  mdast-util-to-string@4.0.0:
     dependencies:
-      call-bind-apply-helpers: 1.0.2
-      es-define-property: 1.0.1
-      es-errors: 1.3.0
-      es-object-atoms: 1.1.1
-      function-bind: 1.1.2
-      get-proto: 1.0.1
-      gopd: 1.2.0
-      has-symbols: 1.1.0
-      hasown: 2.0.2
-      math-intrinsics: 1.1.0
+      '@types/mdast': 4.0.4
 
-  get-nonce@1.0.1: {}
+  media-typer@0.3.0: {}
 
-  get-port@5.1.1: {}
+  merge-descriptors@1.0.3: {}
 
-  get-proto@1.0.1:
-    dependencies:
-      dunder-proto: 1.0.1
-      es-object-atoms: 1.1.1
+  methods@1.1.2: {}
 
-  get-tsconfig@4.13.0:
+  micromark-core-commonmark@2.0.3:
     dependencies:
-      resolve-pkg-maps: 1.0.0
-
-  github-slugger@2.0.0: {}
+      decode-named-character-reference: 1.3.0
+      devlop: 1.1.0
+      micromark-factory-destination: 2.0.1
+      micromark-factory-label: 2.0.1
+      micromark-factory-space: 2.0.1
+      micromark-factory-title: 2.0.1
+      micromark-factory-whitespace: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-html-tag-name: 2.0.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-subtokenize: 2.1.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  glob@13.0.0:
+  micromark-extension-gfm-autolink-literal@2.1.0:
     dependencies:
-      minimatch: 10.1.1
-      minipass: 7.1.2
-      path-scurry: 2.0.1
-
-  globrex@0.1.2: {}
+      micromark-util-character: 2.1.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  goober@2.1.18(csstype@3.2.3):
+  micromark-extension-gfm-footnote@2.1.0:
     dependencies:
-      csstype: 3.2.3
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-normalize-identifier: 2.0.1
+      micromark-util-sanitize-uri: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  gopd@1.2.0: {}
+  micromark-extension-gfm-strikethrough@2.1.0:
+    dependencies:
+      devlop: 1.1.0
+      micromark-util-chunked: 2.0.1
+      micromark-util-classify-character: 2.0.1
+      micromark-util-resolve-all: 2.0.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  graceful-fs@4.2.11: {}
+  micromark-extension-gfm-table@2.1.1:
+    dependencies:
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  has-symbols@1.1.0: {}
+  micromark-extension-gfm-tagfilter@2.0.0:
+    dependencies:
+      micromark-util-types: 2.0.2
 
-  has-tostringtag@1.0.2:
+  micromark-extension-gfm-task-list-item@2.1.0:
     dependencies:
-      has-symbols: 1.1.0
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  hasown@2.0.2:
+  micromark-extension-gfm@3.0.0:
     dependencies:
-      function-bind: 1.1.2
+      micromark-extension-gfm-autolink-literal: 2.1.0
+      micromark-extension-gfm-footnote: 2.1.0
+      micromark-extension-gfm-strikethrough: 2.1.0
+      micromark-extension-gfm-table: 2.1.1
+      micromark-extension-gfm-tagfilter: 2.0.0
+      micromark-extension-gfm-task-list-item: 2.1.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
 
-  hast-util-to-estree@3.1.3:
+  micromark-extension-mdx-expression@3.0.1:
     dependencies:
       '@types/estree': 1.0.8
-      '@types/estree-jsx': 1.0.5
-      '@types/hast': 3.0.4
-      comma-separated-tokens: 2.0.3
       devlop: 1.1.0
-      estree-util-attach-comments: 3.0.0
-      estree-util-is-identifier-name: 3.0.0
-      hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      style-to-js: 1.1.21
-      unist-util-position: 5.0.0
-      zwitch: 2.0.4
-    transitivePeerDependencies:
-      - supports-color
-
-  hast-util-to-html@9.0.5:
-    dependencies:
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      ccount: 2.0.1
-      comma-separated-tokens: 2.0.3
-      hast-util-whitespace: 3.0.0
-      html-void-elements: 3.0.0
-      mdast-util-to-hast: 13.2.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      stringify-entities: 4.0.4
-      zwitch: 2.0.4
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  hast-util-to-jsx-runtime@2.3.6:
+  micromark-extension-mdx-jsx@3.0.2:
     dependencies:
       '@types/estree': 1.0.8
-      '@types/hast': 3.0.4
-      '@types/unist': 3.0.3
-      comma-separated-tokens: 2.0.3
       devlop: 1.1.0
       estree-util-is-identifier-name: 3.0.0
-      hast-util-whitespace: 3.0.0
-      mdast-util-mdx-expression: 2.0.1
-      mdast-util-mdx-jsx: 3.2.0
-      mdast-util-mdxjs-esm: 2.0.1
-      property-information: 7.1.0
-      space-separated-tokens: 2.0.2
-      style-to-js: 1.1.21
-      unist-util-position: 5.0.0
+      micromark-factory-mdx-expression: 2.0.3
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
       vfile-message: 4.0.3
-    transitivePeerDependencies:
-      - supports-color
 
-  hast-util-to-string@3.0.1:
+  micromark-extension-mdx-md@2.0.0:
     dependencies:
-      '@types/hast': 3.0.4
+      micromark-util-types: 2.0.2
 
-  hast-util-whitespace@3.0.0:
+  micromark-extension-mdxjs-esm@3.0.0:
     dependencies:
-      '@types/hast': 3.0.4
-
-  html-void-elements@3.0.0: {}
+      '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-core-commonmark: 2.0.3
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
 
-  http-errors@2.0.1:
+  micromark-extension-mdxjs@3.0.0:
     dependencies:
-      depd: 2.0.0
-      inherits: 2.0.4
-      setprototypeof: 1.2.0
-      statuses: 2.0.2
-      toidentifier: 1.0.1
+      acorn: 8.15.0
+      acorn-jsx: 5.3.2(acorn@8.15.0)
+      micromark-extension-mdx-expression: 3.0.1
+      micromark-extension-mdx-jsx: 3.0.2
+      micromark-extension-mdx-md: 2.0.0
+      micromark-extension-mdxjs-esm: 3.0.0
+      micromark-util-combine-extensions: 2.0.1
+      micromark-util-types: 2.0.2
 
-  iconv-lite@0.4.24:
+  micromark-factory-destination@2.0.1:
     dependencies:
-      safer-buffer: 2.1.2
-
-  image-size@2.0.2: {}
-
-  inherits@2.0.4: {}
-
-  inline-style-parser@0.2.7: {}
-
-  ipaddr.js@1.9.1: {}
-
-  is-alphabetical@2.0.1: {}
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  is-alphanumerical@2.0.1:
+  micromark-factory-label@2.0.1:
     dependencies:
-      is-alphabetical: 2.0.1
-      is-decimal: 2.0.1
-
-  is-decimal@2.0.1: {}
-
-  is-hexadecimal@2.0.1: {}
-
-  is-plain-obj@4.1.0: {}
+      devlop: 1.1.0
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  is-reference@3.0.3:
+  micromark-factory-mdx-expression@2.0.3:
     dependencies:
       '@types/estree': 1.0.8
+      devlop: 1.1.0
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-events-to-acorn: 2.0.3
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      unist-util-position-from-estree: 2.0.0
+      vfile-message: 4.0.3
 
-  isbot@5.1.33: {}
-
-  jiti@2.6.1: {}
-
-  js-tokens@4.0.0: {}
-
-  js-yaml@4.1.1:
+  micromark-factory-space@2.0.1:
     dependencies:
-      argparse: 2.0.1
-
-  jsesc@3.0.2: {}
-
-  json5@2.2.3: {}
+      micromark-util-character: 2.1.1
+      micromark-util-types: 2.0.2
 
-  launch-editor@2.12.0:
+  micromark-factory-title@2.0.1:
     dependencies:
-      picocolors: 1.1.1
-      shell-quote: 1.8.3
-
-  lightningcss-android-arm64@1.30.2:
-    optional: true
-
-  lightningcss-darwin-arm64@1.30.2:
-    optional: true
-
-  lightningcss-darwin-x64@1.30.2:
-    optional: true
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  lightningcss-freebsd-x64@1.30.2:
-    optional: true
+  micromark-factory-whitespace@2.0.1:
+    dependencies:
+      micromark-factory-space: 2.0.1
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  lightningcss-linux-arm-gnueabihf@1.30.2:
-    optional: true
+  micromark-util-character@2.1.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  lightningcss-linux-arm64-gnu@1.30.2:
-    optional: true
+  micromark-util-chunked@2.0.1:
+    dependencies:
+      micromark-util-symbol: 2.0.1
 
-  lightningcss-linux-arm64-musl@1.30.2:
-    optional: true
+  micromark-util-classify-character@2.0.1:
+    dependencies:
+      micromark-util-character: 2.1.1
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
 
-  lightningcss-linux-x64-gnu@1.30.2:
-    optional: true
+  micromark-util-combine-extensions@2.0.1:
+    dependencies:
+      micromark-util-chunked: 2.0.1
+      micromark-util-types: 2.0.2
 
-  lightningcss-linux-x64-musl@1.30.2:
-    optional: true
+  micromark-util-decode-numeric-character-reference@2.0.2:
+    dependencies:
+      micromark-util-symbol: 2.0.1
 
-  lightningcss-win32-arm64-msvc@1.30.2:
-    optional: true
+  micromark-util-decode-string@2.0.1:
+    dependencies:
+      decode-named-character-reference: 1.3.0
+      micromark-util-character: 2.1.1
+      micromark-util-decode-numeric-character-reference: 2.0.2
+      micromark-util-symbol: 2.0.1
 
-  lightningcss-win32-x64-msvc@1.30.2:
-    optional: true
+  micromark-util-encode@2.0.1: {}
 
-  lightningcss@1.30.2:
+  micromark-util-events-to-acorn@2.0.3:
     dependencies:
-      detect-libc: 2.1.2
-    optionalDependencies:
-      lightningcss-android-arm64: 1.30.2
-      lightningcss-darwin-arm64: 1.30.2
-      lightningcss-darwin-x64: 1.30.2
-      lightningcss-freebsd-x64: 1.30.2
-      lightningcss-linux-arm-gnueabihf: 1.30.2
-      lightningcss-linux-arm64-gnu: 1.30.2
-      lightningcss-linux-arm64-musl: 1.30.2
-      lightningcss-linux-x64-gnu: 1.30.2
-      lightningcss-linux-x64-musl: 1.30.2
-      lightningcss-win32-arm64-msvc: 1.30.2
-      lightningcss-win32-x64-msvc: 1.30.2
+      '@types/estree': 1.0.8
+      '@types/unist': 3.0.3
+      devlop: 1.1.0
+      estree-util-visit: 2.0.0
+      micromark-util-symbol: 2.0.1
+      micromark-util-types: 2.0.2
+      vfile-message: 4.0.3
 
-  locate-character@3.0.0: {}
+  micromark-util-html-tag-name@2.0.1: {}
 
   lodash@4.17.21: {}
 
@@ -6176,6 +7892,8 @@ snapshots:
 
   react-refresh@0.14.2: {}
 
+  react-refresh@0.18.0: {}
+
   react-remove-scroll-bar@2.3.8(@types/react@19.2.8)(react@19.2.3):
     dependencies:
       react: 19.2.3
@@ -6523,6 +8241,11 @@ snapshots:
       seroval: 1.3.2
       seroval-plugins: 1.3.3(seroval@1.3.2)
 
+  sonner@2.0.7(react-dom@19.2.3(react@19.2.3))(react@19.2.3):
+    dependencies:
+      react: 19.2.3
+      react-dom: 19.2.3(react@19.2.3)
+
   source-map-js@1.2.1: {}
 
   source-map-support@0.5.21:
@@ -6619,6 +8342,8 @@ snapshots:
 
   tunnel@0.0.6: {}
 
+  tw-animate-css@1.4.0: {}
+
   type-is@1.6.18:
     dependencies:
       media-typer: 0.3.0
@@ -6770,4 +8495,9 @@ snapshots:
 
   zod@4.3.5: {}
 
+  zustand@5.0.10(@types/react@19.2.8)(react@19.2.3):
+    optionalDependencies:
+      '@types/react': 19.2.8
+      react: 19.2.3
+
   zwitch@2.0.4: {}
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 6fde40f..cf92627 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -9,6 +9,7 @@ repository = "https://github.com/HydroRoll-Team/DropOut"
 publish = false
 
 [dependencies]
+dropout-macros = { version = "0.1.0", path = "../crates/macros" }
 serde = { version = "1.0", features = ["derive"] }
 toml = "0.5"
 log = "0.4"
@@ -33,6 +34,7 @@ tauri-plugin-fs = "2.4.5"
 bytes = "1.11.0"
 chrono = "0.4"
 regex = "1.12.2"
+ts-rs = { version = "11.1.0", features = ["serde-compat"] }
 
 [build-dependencies]
 tauri-build = { version = "2.0", features = [] }
diff --git a/src-tauri/src/core/account_storage.rs b/src-tauri/src/core/account_storage.rs
index 8998206..a18b5fc 100644
--- a/src-tauri/src/core/account_storage.rs
+++ b/src-tauri/src/core/account_storage.rs
@@ -2,23 +2,36 @@ use crate::core::auth::{Account, MicrosoftAccount, OfflineAccount};
 use serde::{Deserialize, Serialize};
 use std::fs;
 use std::path::PathBuf;
+use ts_rs::TS;
 
 /// Stored account data for persistence
-#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/account_storage.ts"
+)]
 pub struct AccountStore {
     pub accounts: Vec<StoredAccount>,
     pub active_account_id: Option<String>,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
 #[serde(tag = "type")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/account_storage.ts"
+)]
 pub enum StoredAccount {
     Offline(OfflineAccount),
     Microsoft(StoredMicrosoftAccount),
 }
 
 /// Microsoft account with refresh token for persistence
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/account_storage.ts"
+)]
 pub struct StoredMicrosoftAccount {
     pub username: String,
     pub uuid: String,
@@ -64,6 +77,11 @@ impl StoredAccount {
     }
 }
 
+#[derive(Debug, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/account_storage.ts"
+)]
 pub struct AccountStorage {
     file_path: PathBuf,
 }
diff --git a/src-tauri/src/core/assistant.rs b/src-tauri/src/core/assistant.rs
index 9a8f7bf..6e656dc 100644
--- a/src-tauri/src/core/assistant.rs
+++ b/src-tauri/src/core/assistant.rs
@@ -4,8 +4,14 @@ use serde::{Deserialize, Serialize};
 use std::collections::VecDeque;
 use std::sync::{Arc, Mutex};
 use tauri::{Emitter, Window};
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/assistant.ts"
+)]
 pub struct Message {
     pub role: String,
     pub content: String,
@@ -51,7 +57,12 @@ pub struct OllamaTagsResponse {
 }
 
 // Simplified model info for frontend
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/assistant.ts"
+)]
 pub struct ModelInfo {
     pub id: String,
     pub name: String,
@@ -102,7 +113,12 @@ pub struct OpenAIModelsResponse {
 }
 
 // Streaming response structures
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/assistant.ts"
+)]
 pub struct GenerationStats {
     pub total_duration: u64,
     pub load_duration: u64,
@@ -112,7 +128,12 @@ pub struct GenerationStats {
     pub eval_duration: u64,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/assistant.ts"
+)]
 pub struct StreamChunk {
     pub content: String,
     pub done: bool,
diff --git a/src-tauri/src/core/auth.rs b/src-tauri/src/core/auth.rs
index d5e6c17..0e873e3 100644
--- a/src-tauri/src/core/auth.rs
+++ b/src-tauri/src/core/auth.rs
@@ -1,5 +1,6 @@
 use serde::{Deserialize, Serialize};
 use std::sync::Mutex;
+use ts_rs::TS;
 use uuid::Uuid;
 
 // Helper to create a client with a custom User-Agent
@@ -11,8 +12,14 @@ fn get_client() -> reqwest::Client {
         .unwrap_or_else(|_| reqwest::Client::new())
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
 #[serde(tag = "type")]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    tag = "type",
+    export_to = "../../packages/ui-new/src/types/bindings/auth.ts"
+)]
 pub enum Account {
     Offline(OfflineAccount),
     Microsoft(MicrosoftAccount),
@@ -41,13 +48,17 @@ impl Account {
     }
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../packages/ui-new/src/types/bindings/auth.ts")]
 pub struct OfflineAccount {
     pub username: String,
     pub uuid: String,
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../packages/ui-new/src/types/bindings/auth.ts")]
 pub struct MicrosoftAccount {
     pub username: String,
     pub uuid: String,
@@ -73,11 +84,12 @@ pub fn generate_offline_uuid(username: &str) -> String {
     Uuid::new_v3(&namespace, username.as_bytes()).to_string()
 }
 
-// const CLIENT_ID: &str = "fe165602-5410-4441-92f7-326e10a7cb82";
-const CLIENT_ID: &str = "c36a9fb6-4f2a-41ff-90bd-ae7cc92031eb"; // ATLauncher's Client ID
+const CLIENT_ID: &str = "fe165602-5410-4441-92f7-326e10a7cb82";
 const SCOPE: &str = "XboxLive.SignIn XboxLive.offline_access";
 
-#[derive(Debug, Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../packages/ui-new/src/types/bindings/auth.ts")]
 pub struct DeviceCodeResponse {
     pub user_code: String,
     pub device_code: String,
@@ -87,7 +99,9 @@ pub struct DeviceCodeResponse {
     pub message: Option<String>,
 }
 
-#[derive(Debug, Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../packages/ui-new/src/types/bindings/auth.ts")]
 pub struct TokenResponse {
     pub access_token: String,
     pub refresh_token: Option<String>,
@@ -209,7 +223,9 @@ pub struct MinecraftAuthResponse {
     pub expires_in: u64,
 }
 
-#[derive(Debug, Serialize, Deserialize)]
+#[derive(Debug, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(export, export_to = "../../packages/ui-new/src/types/bindings/auth.ts")]
 pub struct MinecraftProfile {
     pub id: String,
     pub name: String,
diff --git a/src-tauri/src/core/config.rs b/src-tauri/src/core/config.rs
index e4b9381..0d0e8ff 100644
--- a/src-tauri/src/core/config.rs
+++ b/src-tauri/src/core/config.rs
@@ -3,8 +3,14 @@ use std::fs;
 use std::path::PathBuf;
 use std::sync::Mutex;
 use tauri::{AppHandle, Manager};
+use ts_rs::TS;
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/config.ts"
+)]
 #[serde(default)]
 pub struct AssistantConfig {
     pub enabled: bool,
@@ -43,7 +49,12 @@ impl Default for AssistantConfig {
 }
 
 /// Feature-gated arguments configuration
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/config.ts"
+)]
 #[serde(default)]
 pub struct FeatureFlags {
     /// Demo user: enables demo-related arguments when rules require it
@@ -70,7 +81,12 @@ impl Default for FeatureFlags {
     }
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/config.ts"
+)]
 #[serde(default)]
 pub struct LauncherConfig {
     pub min_memory: u32, // in MB
diff --git a/src-tauri/src/core/downloader.rs b/src-tauri/src/core/downloader.rs
index 26f6ebd..d4fc782 100644
--- a/src-tauri/src/core/downloader.rs
+++ b/src-tauri/src/core/downloader.rs
@@ -7,8 +7,14 @@ use std::sync::Arc;
 use tauri::{AppHandle, Emitter, Manager, Window};
 use tokio::io::{AsyncSeekExt, AsyncWriteExt};
 use tokio::sync::Semaphore;
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct DownloadTask {
     pub url: String,
     pub path: PathBuf,
@@ -19,7 +25,12 @@ pub struct DownloadTask {
 }
 
 /// Metadata for resumable downloads stored in .part.meta file
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct DownloadMetadata {
     pub url: String,
     pub file_name: String,
@@ -31,7 +42,12 @@ pub struct DownloadMetadata {
 }
 
 /// A download segment for multi-segment parallel downloading
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct DownloadSegment {
     pub start: u64,
     pub end: u64,
@@ -40,7 +56,12 @@ pub struct DownloadSegment {
 }
 
 /// Progress event for Java download
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct JavaDownloadProgress {
     pub file_name: String,
     pub downloaded_bytes: u64,
@@ -52,7 +73,12 @@ pub struct JavaDownloadProgress {
 }
 
 /// Pending download task for queue persistence
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct PendingJavaDownload {
     pub major_version: u32,
     pub image_type: String,
@@ -65,7 +91,12 @@ pub struct PendingJavaDownload {
 }
 
 /// Download queue for persistence
-#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/downloader.ts"
+)]
 pub struct DownloadQueue {
     pub pending_downloads: Vec<PendingJavaDownload>,
 }
@@ -419,7 +450,12 @@ fn create_new_metadata(
     }
 }
 
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui/src/types/generated/downloader.ts"
+)]
 pub struct ProgressEvent {
     pub file: String,
     pub downloaded: u64,
diff --git a/src-tauri/src/core/fabric.rs b/src-tauri/src/core/fabric.rs
index 32790c7..7385850 100644
--- a/src-tauri/src/core/fabric.rs
+++ b/src-tauri/src/core/fabric.rs
@@ -8,11 +8,17 @@
 use serde::{Deserialize, Serialize};
 use std::error::Error;
 use std::path::PathBuf;
+use ts_rs::TS;
 
 const FABRIC_META_URL: &str = "https://meta.fabricmc.net/v2";
 
 /// Represents a Fabric loader version from the Meta API.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricLoaderVersion {
     pub separator: String,
     pub build: i32,
@@ -22,7 +28,12 @@ pub struct FabricLoaderVersion {
 }
 
 /// Represents a Fabric intermediary mapping version.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricIntermediaryVersion {
     pub maven: String,
     pub version: String,
@@ -30,7 +41,12 @@ pub struct FabricIntermediaryVersion {
 }
 
 /// Represents a combined loader + intermediary version entry.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricLoaderEntry {
     pub loader: FabricLoaderVersion,
     pub intermediary: FabricIntermediaryVersion,
@@ -39,7 +55,12 @@ pub struct FabricLoaderEntry {
 }
 
 /// Launcher metadata from Fabric Meta API.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricLauncherMeta {
     pub version: i32,
     pub libraries: FabricLibraries,
@@ -48,7 +69,12 @@ pub struct FabricLauncherMeta {
 }
 
 /// Libraries required by Fabric loader.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricLibraries {
     pub client: Vec<FabricLibrary>,
     pub common: Vec<FabricLibrary>,
@@ -56,7 +82,12 @@ pub struct FabricLibraries {
 }
 
 /// A single Fabric library dependency.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricLibrary {
     pub name: String,
     pub url: Option<String>,
@@ -64,7 +95,13 @@ pub struct FabricLibrary {
 
 /// Main class configuration for Fabric.
 /// Can be either a struct with client/server fields or a simple string.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts",
+    untagged
+)]
 #[serde(untagged)]
 pub enum FabricMainClass {
     Structured { client: String, server: String },
@@ -89,14 +126,24 @@ impl FabricMainClass {
 }
 
 /// Represents a Minecraft version supported by Fabric.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct FabricGameVersion {
     pub version: String,
     pub stable: bool,
 }
 
 /// Information about an installed Fabric version.
-#[derive(Debug, Serialize, Clone)]
+#[derive(Debug, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/fabric.ts"
+)]
 pub struct InstalledFabricVersion {
     pub id: String,
     pub minecraft_version: String,
diff --git a/src-tauri/src/core/forge.rs b/src-tauri/src/core/forge.rs
index 65bf413..1d4ae1d 100644
--- a/src-tauri/src/core/forge.rs
+++ b/src-tauri/src/core/forge.rs
@@ -12,6 +12,7 @@ use std::error::Error;
 #[cfg(target_os = "windows")]
 use std::os::windows::process::CommandExt;
 use std::path::PathBuf;
+use ts_rs::TS;
 
 const FORGE_PROMOTIONS_URL: &str =
     "https://files.minecraftforge.net/net/minecraftforge/forge/promotions_slim.json";
@@ -19,7 +20,12 @@ const FORGE_MAVEN_URL: &str = "https://maven.minecraftforge.net/";
 const FORGE_FILES_URL: &str = "https://files.minecraftforge.net/";
 
 /// Represents a Forge version entry.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/forge.ts"
+)]
 pub struct ForgeVersion {
     pub version: String,
     pub minecraft_version: String,
@@ -36,11 +42,17 @@ struct ForgePromotions {
 }
 
 /// Information about an installed Forge version.
-#[derive(Debug, Serialize, Clone)]
+#[derive(Debug, Serialize, Clone, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/forge.ts"
+)]
 pub struct InstalledForgeVersion {
     pub id: String,
     pub minecraft_version: String,
     pub forge_version: String,
+    #[ts(type = "string")]
     pub path: PathBuf,
 }
 
diff --git a/src-tauri/src/core/game_version.rs b/src-tauri/src/core/game_version.rs
index c62e232..7df631a 100644
--- a/src-tauri/src/core/game_version.rs
+++ b/src-tauri/src/core/game_version.rs
@@ -1,8 +1,13 @@
 use serde::{Deserialize, Serialize};
+use ts_rs::TS;
 
 /// Represents a Minecraft version JSON, supporting both vanilla and modded (Fabric/Forge) formats.
 /// Modded versions use `inheritsFrom` to reference a parent vanilla version.
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct GameVersion {
     pub id: String,
     /// Optional for mod loaders that inherit from vanilla
@@ -28,13 +33,21 @@ pub struct GameVersion {
     pub version_type: Option<String>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct Downloads {
     pub client: DownloadArtifact,
     pub server: Option<DownloadArtifact>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct DownloadArtifact {
     pub sha1: Option<String>,
     pub size: Option<u64>,
@@ -42,7 +55,11 @@ pub struct DownloadArtifact {
     pub path: Option<String>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct AssetIndex {
     pub id: String,
     pub sha1: String,
@@ -52,43 +69,72 @@ pub struct AssetIndex {
     pub total_size: Option<u64>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct Library {
     pub downloads: Option<LibraryDownloads>,
     pub name: String,
     pub rules: Option<Vec<Rule>>,
+    #[ts(type = "Record<string, unknown>")]
     pub natives: Option<serde_json::Value>,
     /// Maven repository URL for mod loader libraries
     pub url: Option<String>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct Rule {
     pub action: String, // "allow" or "disallow"
     pub os: Option<OsRule>,
+    #[ts(type = "Record<string, unknown>")]
     pub features: Option<serde_json::Value>, // Feature-based rules (e.g., is_demo_user, has_quick_plays_support)
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct OsRule {
     pub name: Option<String>,    // "linux", "osx", "windows"
     pub version: Option<String>, // Regex
     pub arch: Option<String>,    // "x86"
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct LibraryDownloads {
     pub artifact: Option<DownloadArtifact>,
+    #[ts(type = "Record<string, unknown>")]
     pub classifiers: Option<serde_json::Value>, // Complex, simplifying for now
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct Arguments {
+    #[ts(type = "Record<string, unknown>")]
     pub game: Option<serde_json::Value>,
+    #[ts(type = "Record<string, unknown>")]
     pub jvm: Option<serde_json::Value>,
 }
 
-#[derive(Debug, Deserialize, Serialize, Clone)]
+#[derive(Debug, Deserialize, Serialize, Clone, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/game_version.ts"
+)]
 pub struct JavaVersion {
     pub component: String,
     #[serde(rename = "majorVersion")]
diff --git a/src-tauri/src/core/instance.rs b/src-tauri/src/core/instance.rs
index 573273e..e842ec9 100644
--- a/src-tauri/src/core/instance.rs
+++ b/src-tauri/src/core/instance.rs
@@ -11,9 +11,15 @@ use std::fs;
 use std::path::{Path, PathBuf};
 use std::sync::Mutex;
 use tauri::{AppHandle, Manager};
+use ts_rs::TS;
 
 /// Represents a game instance/profile
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/instance.ts"
+)]
 pub struct Instance {
     pub id: String,                         // 唯一标识符（UUID）
     pub name: String,                       // 显示名称
@@ -28,17 +34,28 @@ pub struct Instance {
     pub jvm_args_override: Option<String>,  // JVM参数覆盖（可选）
     #[serde(default)]
     pub memory_override: Option<MemoryOverride>, // 内存设置覆盖（可选）
+    pub java_path_override: Option<String>, // 实例级Java路径覆盖（可选）
 }
 
 /// Memory settings override for an instance
-#[derive(Debug, Clone, Serialize, Deserialize)]
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/instance.ts"
+)]
 pub struct MemoryOverride {
     pub min: u32, // MB
     pub max: u32, // MB
 }
 
 /// Configuration for all instances
-#[derive(Debug, Clone, Serialize, Deserialize, Default)]
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/instance.ts"
+)]
 pub struct InstanceConfig {
     pub instances: Vec<Instance>,
     pub active_instance_id: Option<String>, // 当前活动的实例ID
@@ -111,6 +128,7 @@ impl InstanceState {
             mod_loader_version: None,
             jvm_args_override: None,
             memory_override: None,
+            java_path_override: None,
         };
 
         let mut config = self.instances.lock().unwrap();
@@ -267,6 +285,7 @@ impl InstanceState {
             last_played: None,
             jvm_args_override: source_instance.jvm_args_override.clone(),
             memory_override: source_instance.memory_override.clone(),
+            java_path_override: source_instance.java_path_override.clone(),
         };
 
         self.update_instance(new_instance.clone())?;
diff --git a/src-tauri/src/core/java.rs b/src-tauri/src/core/java.rs
deleted file mode 100644
index 2e3c8a7..0000000
--- a/src-tauri/src/core/java.rs
+++ /dev/null
@@ -1,1103 +0,0 @@
-use serde::{Deserialize, Serialize};
-#[cfg(target_os = "windows")]
-use std::os::windows::process::CommandExt;
-use std::path::PathBuf;
-use std::process::Command;
-use tauri::AppHandle;
-use tauri::Emitter;
-use tauri::Manager;
-
-use crate::core::downloader::{self, DownloadQueue, JavaDownloadProgress, PendingJavaDownload};
-use crate::utils::zip;
-
-const ADOPTIUM_API_BASE: &str = "https://api.adoptium.net/v3";
-const CACHE_DURATION_SECS: u64 = 24 * 60 * 60; // 24 hours
-
-/// Helper to strip UNC prefix on Windows (\\?\)
-fn strip_unc_prefix(path: PathBuf) -> PathBuf {
-    #[cfg(target_os = "windows")]
-    {
-        let s = path.to_string_lossy().to_string();
-        if s.starts_with(r"\\?\") {
-            return PathBuf::from(&s[4..]);
-        }
-    }
-    path
-}
-
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct JavaInstallation {
-    pub path: String,
-    pub version: String,
-    pub is_64bit: bool,
-}
-
-/// Java image type: JRE or JDK
-#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
-#[serde(rename_all = "lowercase")]
-pub enum ImageType {
-    Jre,
-    Jdk,
-}
-
-impl Default for ImageType {
-    fn default() -> Self {
-        Self::Jre
-    }
-}
-
-impl std::fmt::Display for ImageType {
-    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
-        match self {
-            Self::Jre => write!(f, "jre"),
-            Self::Jdk => write!(f, "jdk"),
-        }
-    }
-}
-
-/// Java release information for UI display
-#[derive(Debug, Clone, Serialize, Deserialize)]
-pub struct JavaReleaseInfo {
-    pub major_version: u32,
-    pub image_type: String,
-    pub version: String,
-    pub release_name: String,
-    pub release_date: Option<String>,
-    pub file_size: u64,
-    pub checksum: Option<String>,
-    pub download_url: String,
-    pub is_lts: bool,
-    pub is_available: bool,
-    pub architecture: String,
-}
-
-/// Java catalog containing all available versions
-#[derive(Debug, Clone, Serialize, Deserialize, Default)]
-pub struct JavaCatalog {
-    pub releases: Vec<JavaReleaseInfo>,
-    pub available_major_versions: Vec<u32>,
-    pub lts_versions: Vec<u32>,
-    pub cached_at: u64,
-}
-
-/// Adoptium `/v3/assets/latest/{version}/hotspot` API response structures
-#[derive(Debug, Clone, Deserialize)]
-pub struct AdoptiumAsset {
-    pub binary: AdoptiumBinary,
-    pub release_name: String,
-    pub version: AdoptiumVersionData,
-}
-
-#[derive(Debug, Clone, Deserialize)]
-#[allow(dead_code)]
-pub struct AdoptiumBinary {
-    pub os: String,
-    pub architecture: String,
-    pub image_type: String,
-    pub package: AdoptiumPackage,
-    #[serde(default)]
-    pub updated_at: Option<String>,
-}
-
-#[derive(Debug, Clone, Deserialize)]
-pub struct AdoptiumPackage {
-    pub name: String,
-    pub link: String,
-    pub size: u64,
-    pub checksum: Option<String>, // SHA256
-}
-
-#[derive(Debug, Clone, Deserialize)]
-#[allow(dead_code)]
-pub struct AdoptiumVersionData {
-    pub major: u32,
-    pub minor: u32,
-    pub security: u32,
-    pub semver: String,
-    pub openjdk_version: String,
-}
-
-/// Adoptium available releases response
-#[derive(Debug, Clone, Deserialize)]
-#[allow(dead_code)]
-pub struct AvailableReleases {
-    pub available_releases: Vec<u32>,
-    pub available_lts_releases: Vec<u32>,
-    pub most_recent_lts: Option<u32>,
-    pub most_recent_feature_release: Option<u32>,
-}
-
-/// Java download information from Adoptium
-#[derive(Debug, Clone, Serialize)]
-pub struct JavaDownloadInfo {
-    pub version: String,
-    pub release_name: String,
-    pub download_url: String,
-    pub file_name: String,
-    pub file_size: u64,
-    pub checksum: Option<String>,
-    pub image_type: String,
-}
-
-/// Get the Adoptium OS name for the current platform
-pub fn get_adoptium_os() -> &'static str {
-    #[cfg(target_os = "linux")]
-    {
-        // Check if Alpine Linux (musl libc)
-        if std::path::Path::new("/etc/alpine-release").exists() {
-            return "alpine-linux";
-        }
-        "linux"
-    }
-    #[cfg(target_os = "macos")]
-    {
-        "mac"
-    }
-    #[cfg(target_os = "windows")]
-    {
-        "windows"
-    }
-    #[cfg(not(any(target_os = "linux", target_os = "macos", target_os = "windows")))]
-    {
-        "linux" // fallback
-    }
-}
-
-/// Get the Adoptium Architecture name for the current architecture
-pub fn get_adoptium_arch() -> &'static str {
-    #[cfg(target_arch = "x86_64")]
-    {
-        "x64"
-    }
-    #[cfg(target_arch = "aarch64")]
-    {
-        "aarch64"
-    }
-    #[cfg(target_arch = "x86")]
-    {
-        "x86"
-    }
-    #[cfg(target_arch = "arm")]
-    {
-        "arm"
-    }
-    #[cfg(not(any(
-        target_arch = "x86_64",
-        target_arch = "aarch64",
-        target_arch = "x86",
-        target_arch = "arm"
-    )))]
-    {
-        "x64" // fallback
-    }
-}
-
-/// Get the default Java installation directory for DropOut
-pub fn get_java_install_dir(app_handle: &AppHandle) -> PathBuf {
-    app_handle.path().app_data_dir().unwrap().join("java")
-}
-
-/// Get the cache file path for Java catalog
-fn get_catalog_cache_path(app_handle: &AppHandle) -> PathBuf {
-    app_handle
-        .path()
-        .app_data_dir()
-        .unwrap()
-        .join("java_catalog_cache.json")
-}
-
-/// Load cached Java catalog if not expired
-pub fn load_cached_catalog(app_handle: &AppHandle) -> Option<JavaCatalog> {
-    let cache_path = get_catalog_cache_path(app_handle);
-    if !cache_path.exists() {
-        return None;
-    }
-
-    let content = std::fs::read_to_string(&cache_path).ok()?;
-    let catalog: JavaCatalog = serde_json::from_str(&content).ok()?;
-
-    let now = std::time::SystemTime::now()
-        .duration_since(std::time::UNIX_EPOCH)
-        .unwrap()
-        .as_secs();
-
-    if now - catalog.cached_at < CACHE_DURATION_SECS {
-        Some(catalog)
-    } else {
-        None
-    }
-}
-
-/// Save Java catalog to cache
-pub fn save_catalog_cache(app_handle: &AppHandle, catalog: &JavaCatalog) -> Result<(), String> {
-    let cache_path = get_catalog_cache_path(app_handle);
-    let content = serde_json::to_string_pretty(catalog).map_err(|e| e.to_string())?;
-    std::fs::write(&cache_path, content).map_err(|e| e.to_string())?;
-    Ok(())
-}
-
-/// Clear Java catalog cache
-#[allow(dead_code)]
-pub fn clear_catalog_cache(app_handle: &AppHandle) -> Result<(), String> {
-    let cache_path = get_catalog_cache_path(app_handle);
-    if cache_path.exists() {
-        std::fs::remove_file(&cache_path).map_err(|e| e.to_string())?;
-    }
-    Ok(())
-}
-
-/// Fetch complete Java catalog from Adoptium API with platform availability check
-pub async fn fetch_java_catalog(
-    app_handle: &AppHandle,
-    force_refresh: bool,
-) -> Result<JavaCatalog, String> {
-    // Check cache first unless force refresh
-    if !force_refresh {
-        if let Some(cached) = load_cached_catalog(app_handle) {
-            return Ok(cached);
-        }
-    }
-
-    let os = get_adoptium_os();
-    let arch = get_adoptium_arch();
-    let client = reqwest::Client::new();
-
-    // 1. Fetch available releases
-    let releases_url = format!("{}/info/available_releases", ADOPTIUM_API_BASE);
-    let available: AvailableReleases = client
-        .get(&releases_url)
-        .header("Accept", "application/json")
-        .send()
-        .await
-        .map_err(|e| format!("Failed to fetch available releases: {}", e))?
-        .json()
-        .await
-        .map_err(|e| format!("Failed to parse available releases: {}", e))?;
-
-    let mut releases = Vec::new();
-
-    // 2. Fetch details for each major version
-    for major_version in &available.available_releases {
-        for image_type in &["jre", "jdk"] {
-            let url = format!(
-                "{}/assets/latest/{}/hotspot?os={}&architecture={}&image_type={}",
-                ADOPTIUM_API_BASE, major_version, os, arch, image_type
-            );
-
-            match client
-                .get(&url)
-                .header("Accept", "application/json")
-                .send()
-                .await
-            {
-                Ok(response) => {
-                    if response.status().is_success() {
-                        if let Ok(assets) = response.json::<Vec<AdoptiumAsset>>().await {
-                            if let Some(asset) = assets.into_iter().next() {
-                                let release_date = asset.binary.updated_at.clone();
-                                releases.push(JavaReleaseInfo {
-                                    major_version: *major_version,
-                                    image_type: image_type.to_string(),
-                                    version: asset.version.semver.clone(),
-                                    release_name: asset.release_name.clone(),
-                                    release_date,
-                                    file_size: asset.binary.package.size,
-                                    checksum: asset.binary.package.checksum,
-                                    download_url: asset.binary.package.link,
-                                    is_lts: available
-                                        .available_lts_releases
-                                        .contains(major_version),
-                                    is_available: true,
-                                    architecture: asset.binary.architecture.clone(),
-                                });
-                            }
-                        }
-                    } else {
-                        // Platform not available for this version/type
-                        releases.push(JavaReleaseInfo {
-                            major_version: *major_version,
-                            image_type: image_type.to_string(),
-                            version: format!("{}.x", major_version),
-                            release_name: format!("jdk-{}", major_version),
-                            release_date: None,
-                            file_size: 0,
-                            checksum: None,
-                            download_url: String::new(),
-                            is_lts: available.available_lts_releases.contains(major_version),
-                            is_available: false,
-                            architecture: arch.to_string(),
-                        });
-                    }
-                }
-                Err(_) => {
-                    // Network error, mark as unavailable
-                    releases.push(JavaReleaseInfo {
-                        major_version: *major_version,
-                        image_type: image_type.to_string(),
-                        version: format!("{}.x", major_version),
-                        release_name: format!("jdk-{}", major_version),
-                        release_date: None,
-                        file_size: 0,
-                        checksum: None,
-                        download_url: String::new(),
-                        is_lts: available.available_lts_releases.contains(major_version),
-                        is_available: false,
-                        architecture: arch.to_string(),
-                    });
-                }
-            }
-        }
-    }
-
-    let now = std::time::SystemTime::now()
-        .duration_since(std::time::UNIX_EPOCH)
-        .unwrap()
-        .as_secs();
-
-    let catalog = JavaCatalog {
-        releases,
-        available_major_versions: available.available_releases,
-        lts_versions: available.available_lts_releases,
-        cached_at: now,
-    };
-
-    // Save to cache
-    let _ = save_catalog_cache(app_handle, &catalog);
-
-    Ok(catalog)
-}
-
-/// Get Adoptium API download info for a specific Java version and image type
-///
-/// # Arguments
-/// * `major_version` - Java major version (e.g., 8, 11, 17)
-/// * `image_type` - JRE or JDK
-///
-/// # Returns
-/// * `Ok(JavaDownloadInfo)` - Download information
-/// * `Err(String)` - Error message
-pub async fn fetch_java_release(
-    major_version: u32,
-    image_type: ImageType,
-) -> Result<JavaDownloadInfo, String> {
-    let os = get_adoptium_os();
-    let arch = get_adoptium_arch();
-
-    let url = format!(
-        "{}/assets/latest/{}/hotspot?os={}&architecture={}&image_type={}",
-        ADOPTIUM_API_BASE, major_version, os, arch, image_type
-    );
-
-    let client = reqwest::Client::new();
-    let response = client
-        .get(&url)
-        .header("Accept", "application/json")
-        .send()
-        .await
-        .map_err(|e| format!("Network request failed: {}", e))?;
-
-    if !response.status().is_success() {
-        return Err(format!(
-            "Adoptium API returned error: {} - The version/platform might be unavailable",
-            response.status()
-        ));
-    }
-
-    let assets: Vec<AdoptiumAsset> = response
-        .json()
-        .await
-        .map_err(|e| format!("Failed to parse API response: {}", e))?;
-
-    let asset = assets
-        .into_iter()
-        .next()
-        .ok_or_else(|| format!("Java {} {} download not found", major_version, image_type))?;
-
-    Ok(JavaDownloadInfo {
-        version: asset.version.semver.clone(),
-        release_name: asset.release_name,
-        download_url: asset.binary.package.link,
-        file_name: asset.binary.package.name,
-        file_size: asset.binary.package.size,
-        checksum: asset.binary.package.checksum,
-        image_type: asset.binary.image_type,
-    })
-}
-
-/// Fetch available Java versions from Adoptium API
-pub async fn fetch_available_versions() -> Result<Vec<u32>, String> {
-    let url = format!("{}/info/available_releases", ADOPTIUM_API_BASE);
-
-    let response = reqwest::get(url)
-        .await
-        .map_err(|e| format!("Network request failed: {}", e))?;
-
-    #[derive(Deserialize)]
-    struct AvailableReleases {
-        available_releases: Vec<u32>,
-    }
-
-    let releases: AvailableReleases = response
-        .json()
-        .await
-        .map_err(|e| format!("Failed to parse response: {}", e))?;
-
-    Ok(releases.available_releases)
-}
-
-/// Download and install Java with resume support and progress events
-///
-/// # Arguments
-/// * `app_handle` - Tauri app handle for accessing app directories
-/// * `major_version` - Java major version (e.g., 8, 11, 17)
-/// * `image_type` - JRE or JDK
-/// * `custom_path` - Optional custom installation path
-///
-/// # Returns
-/// * `Ok(JavaInstallation)` - Information about the successfully installed Java
-pub async fn download_and_install_java(
-    app_handle: &AppHandle,
-    major_version: u32,
-    image_type: ImageType,
-    custom_path: Option<PathBuf>,
-) -> Result<JavaInstallation, String> {
-    // 1. Fetch download information
-    let info = fetch_java_release(major_version, image_type).await?;
-    let file_name = info.file_name.clone();
-
-    // 2. Prepare installation directory
-    let install_base = custom_path.unwrap_or_else(|| get_java_install_dir(app_handle));
-    let version_dir = install_base.join(format!("temurin-{}-{}", major_version, image_type));
-
-    std::fs::create_dir_all(&install_base)
-        .map_err(|e| format!("Failed to create installation directory: {}", e))?;
-
-    // 3. Add to download queue for persistence
-    let mut queue = DownloadQueue::load(app_handle);
-    queue.add(PendingJavaDownload {
-        major_version,
-        image_type: image_type.to_string(),
-        download_url: info.download_url.clone(),
-        file_name: info.file_name.clone(),
-        file_size: info.file_size,
-        checksum: info.checksum.clone(),
-        install_path: install_base.to_string_lossy().to_string(),
-        created_at: std::time::SystemTime::now()
-            .duration_since(std::time::UNIX_EPOCH)
-            .unwrap()
-            .as_secs(),
-    });
-    queue.save(app_handle)?;
-
-    // 4. Download the archive with resume support
-    let archive_path = install_base.join(&info.file_name);
-
-    // Check if we need to download
-    let need_download = if archive_path.exists() {
-        if let Some(expected_checksum) = &info.checksum {
-            let data = std::fs::read(&archive_path)
-                .map_err(|e| format!("Failed to read downloaded file: {}", e))?;
-            !downloader::verify_checksum(&data, Some(expected_checksum), None)
-        } else {
-            false
-        }
-    } else {
-        true
-    };
-
-    if need_download {
-        // Use resumable download
-        downloader::download_with_resume(
-            app_handle,
-            &info.download_url,
-            &archive_path,
-            info.checksum.as_deref(),
-            info.file_size,
-        )
-        .await?;
-    }
-
-    // 5. Emit extracting status
-    let _ = app_handle.emit(
-        "java-download-progress",
-        JavaDownloadProgress {
-            file_name: file_name.clone(),
-            downloaded_bytes: info.file_size,
-            total_bytes: info.file_size,
-            speed_bytes_per_sec: 0,
-            eta_seconds: 0,
-            status: "Extracting".to_string(),
-            percentage: 100.0,
-        },
-    );
-
-    // 6. Extract
-    // If the target directory exists, remove it first
-    if version_dir.exists() {
-        std::fs::remove_dir_all(&version_dir)
-            .map_err(|e| format!("Failed to remove old version directory: {}", e))?;
-    }
-
-    std::fs::create_dir_all(&version_dir)
-        .map_err(|e| format!("Failed to create version directory: {}", e))?;
-
-    let top_level_dir = if info.file_name.ends_with(".tar.gz") || info.file_name.ends_with(".tgz") {
-        zip::extract_tar_gz(&archive_path, &version_dir)?
-    } else if info.file_name.ends_with(".zip") {
-        zip::extract_zip(&archive_path, &version_dir)?;
-        // Find the top-level directory inside the extracted folder
-        find_top_level_dir(&version_dir)?
-    } else {
-        return Err(format!("Unsupported archive format: {}", info.file_name));
-    };
-
-    // 7. Clean up downloaded archive
-    let _ = std::fs::remove_file(&archive_path);
-
-    // 8. Locate java executable
-    // macOS has a different structure: jdk-xxx/Contents/Home/bin/java
-    // Linux/Windows: jdk-xxx/bin/java
-    let java_home = version_dir.join(&top_level_dir);
-    let java_bin = if cfg!(target_os = "macos") {
-        java_home
-            .join("Contents")
-            .join("Home")
-            .join("bin")
-            .join("java")
-    } else if cfg!(windows) {
-        java_home.join("bin").join("java.exe")
-    } else {
-        java_home.join("bin").join("java")
-    };
-
-    if !java_bin.exists() {
-        return Err(format!(
-            "Installation completed but Java executable not found: {}",
-            java_bin.display()
-        ));
-    }
-
-    // Resolve symlinks and strip UNC prefix to ensure clean path
-    let java_bin = std::fs::canonicalize(&java_bin).map_err(|e| e.to_string())?;
-    let java_bin = strip_unc_prefix(java_bin);
-
-    // 9. Verify installation
-    let installation = check_java_installation(&java_bin)
-        .ok_or_else(|| "Failed to verify Java installation".to_string())?;
-
-    // 10. Remove from download queue
-    queue.remove(major_version, &image_type.to_string());
-    queue.save(app_handle)?;
-
-    // 11. Emit completed status
-    let _ = app_handle.emit(
-        "java-download-progress",
-        JavaDownloadProgress {
-            file_name,
-            downloaded_bytes: info.file_size,
-            total_bytes: info.file_size,
-            speed_bytes_per_sec: 0,
-            eta_seconds: 0,
-            status: "Completed".to_string(),
-            percentage: 100.0,
-        },
-    );
-
-    Ok(installation)
-}
-
-/// Find the top-level directory inside the extracted folder
-fn find_top_level_dir(extract_dir: &PathBuf) -> Result<String, String> {
-    let entries: Vec<_> = std::fs::read_dir(extract_dir)
-        .map_err(|e| format!("Failed to read directory: {}", e))?
-        .filter_map(|e| e.ok())
-        .filter(|e| e.path().is_dir())
-        .collect();
-
-    if entries.len() == 1 {
-        Ok(entries[0].file_name().to_string_lossy().to_string())
-    } else {
-        // No single top-level directory, return empty string
-        Ok(String::new())
-    }
-}
-
-/// Detect Java installations on the system
-pub fn detect_java_installations() -> Vec<JavaInstallation> {
-    let mut installations = Vec::new();
-    let candidates = get_java_candidates();
-
-    for candidate in candidates {
-        if let Some(java) = check_java_installation(&candidate) {
-            // Avoid duplicates
-            if !installations
-                .iter()
-                .any(|j: &JavaInstallation| j.path == java.path)
-            {
-                installations.push(java);
-            }
-        }
-    }
-
-    // Sort by version (newer first)
-    installations.sort_by(|a, b| {
-        let v_a = parse_java_version(&a.version);
-        let v_b = parse_java_version(&b.version);
-        v_b.cmp(&v_a)
-    });
-
-    installations
-}
-
-/// Get list of candidate Java paths to check
-fn get_java_candidates() -> Vec<PathBuf> {
-    let mut candidates = Vec::new();
-
-    // Check PATH first
-    let mut cmd = Command::new(if cfg!(windows) { "where" } else { "which" });
-    cmd.arg("java");
-    #[cfg(target_os = "windows")]
-    cmd.creation_flags(0x08000000);
-
-    if let Ok(output) = cmd.output() {
-        if output.status.success() {
-            let paths = String::from_utf8_lossy(&output.stdout);
-            for line in paths.lines() {
-                let path = PathBuf::from(line.trim());
-                if path.exists() {
-                    // Resolve symlinks (important for Windows javapath wrapper)
-                    let resolved = std::fs::canonicalize(&path).unwrap_or(path);
-                    // Strip UNC prefix if present to keep paths clean
-                    let final_path = strip_unc_prefix(resolved);
-                    candidates.push(final_path);
-                }
-            }
-        }
-    }
-
-    #[cfg(target_os = "linux")]
-    {
-        // Common Linux Java paths
-        let linux_paths = [
-            "/usr/lib/jvm",
-            "/usr/java",
-            "/opt/java",
-            "/opt/jdk",
-            "/opt/openjdk",
-        ];
-
-        for base in &linux_paths {
-            if let Ok(entries) = std::fs::read_dir(base) {
-                for entry in entries.flatten() {
-                    let java_path = entry.path().join("bin/java");
-                    if java_path.exists() {
-                        candidates.push(java_path);
-                    }
-                }
-            }
-        }
-
-        // Flatpak / Snap locations
-        let home = std::env::var("HOME").unwrap_or_default();
-        let snap_java = PathBuf::from(&home).join(".sdkman/candidates/java");
-        if snap_java.exists() {
-            if let Ok(entries) = std::fs::read_dir(&snap_java) {
-                for entry in entries.flatten() {
-                    let java_path = entry.path().join("bin/java");
-                    if java_path.exists() {
-                        candidates.push(java_path);
-                    }
-                }
-            }
-        }
-    }
-
-    #[cfg(target_os = "macos")]
-    {
-        // macOS Java paths
-        let mac_paths = [
-            "/Library/Java/JavaVirtualMachines",
-            "/System/Library/Java/JavaVirtualMachines",
-            "/usr/local/opt/openjdk/bin/java",
-            "/opt/homebrew/opt/openjdk/bin/java",
-        ];
-
-        for path in &mac_paths {
-            let p = PathBuf::from(path);
-            if p.is_dir() {
-                if let Ok(entries) = std::fs::read_dir(&p) {
-                    for entry in entries.flatten() {
-                        let java_path = entry.path().join("Contents/Home/bin/java");
-                        if java_path.exists() {
-                            candidates.push(java_path);
-                        }
-                    }
-                }
-            } else if p.exists() {
-                candidates.push(p);
-            }
-        }
-
-        // Homebrew ARM64
-        let homebrew_arm = PathBuf::from("/opt/homebrew/Cellar/openjdk");
-        if homebrew_arm.exists() {
-            if let Ok(entries) = std::fs::read_dir(&homebrew_arm) {
-                for entry in entries.flatten() {
-                    let java_path = entry
-                        .path()
-                        .join("libexec/openjdk.jdk/Contents/Home/bin/java");
-                    if java_path.exists() {
-                        candidates.push(java_path);
-                    }
-                }
-            }
-        }
-    }
-
-    #[cfg(target_os = "windows")]
-    {
-        // Windows Java paths
-        let program_files =
-            std::env::var("ProgramFiles").unwrap_or_else(|_| "C:\\Program Files".to_string());
-        let program_files_x86 = std::env::var("ProgramFiles(x86)")
-            .unwrap_or_else(|_| "C:\\Program Files (x86)".to_string());
-        let local_app_data = std::env::var("LOCALAPPDATA").unwrap_or_default();
-
-        let win_paths = [
-            format!("{}\\Java", program_files),
-            format!("{}\\Java", program_files_x86),
-            format!("{}\\Eclipse Adoptium", program_files),
-            format!("{}\\AdoptOpenJDK", program_files),
-            format!("{}\\Microsoft\\jdk", program_files),
-            format!("{}\\Zulu", program_files),
-            format!("{}\\Amazon Corretto", program_files),
-            format!("{}\\BellSoft\\LibericaJDK", program_files),
-            format!("{}\\Programs\\Eclipse Adoptium", local_app_data),
-        ];
-
-        for base in &win_paths {
-            let base_path = PathBuf::from(base);
-            if base_path.exists() {
-                if let Ok(entries) = std::fs::read_dir(&base_path) {
-                    for entry in entries.flatten() {
-                        let java_path = entry.path().join("bin\\java.exe");
-                        if java_path.exists() {
-                            candidates.push(java_path);
-                        }
-                    }
-                }
-            }
-        }
-
-        // Also check JAVA_HOME
-        if let Ok(java_home) = std::env::var("JAVA_HOME") {
-            let java_path = PathBuf::from(&java_home).join("bin\\java.exe");
-            if java_path.exists() {
-                candidates.push(java_path);
-            }
-        }
-    }
-
-    // JAVA_HOME environment variable (cross-platform)
-    if let Ok(java_home) = std::env::var("JAVA_HOME") {
-        let bin_name = if cfg!(windows) { "java.exe" } else { "java" };
-        let java_path = PathBuf::from(&java_home).join("bin").join(bin_name);
-        if java_path.exists() {
-            candidates.push(java_path);
-        }
-    }
-
-    candidates
-}
-
-/// Check a specific Java installation and get its version info
-fn check_java_installation(path: &PathBuf) -> Option<JavaInstallation> {
-    let mut cmd = Command::new(path);
-    cmd.arg("-version");
-    #[cfg(target_os = "windows")]
-    cmd.creation_flags(0x08000000);
-
-    let output = cmd.output().ok()?;
-
-    // Java outputs version info to stderr
-    let version_output = String::from_utf8_lossy(&output.stderr);
-
-    // Parse version string (e.g., "openjdk version \"17.0.1\"" or "java version \"1.8.0_301\"")
-    let version = parse_version_string(&version_output)?;
-    let is_64bit = version_output.contains("64-Bit");
-
-    Some(JavaInstallation {
-        path: path.to_string_lossy().to_string(),
-        version,
-        is_64bit,
-    })
-}
-
-/// Parse version string from java -version output
-fn parse_version_string(output: &str) -> Option<String> {
-    for line in output.lines() {
-        if line.contains("version") {
-            // Find the quoted version string
-            if let Some(start) = line.find('"') {
-                if let Some(end) = line[start + 1..].find('"') {
-                    return Some(line[start + 1..start + 1 + end].to_string());
-                }
-            }
-        }
-    }
-    None
-}
-
-/// Parse version for comparison (returns major version number)
-fn parse_java_version(version: &str) -> u32 {
-    // Handle various formats:
-    // - Old format: 1.8.0_xxx (Java 8 with update)
-    // - New format: 17.0.1, 11.0.5+10 (Java 11+)
-    // - Format with build: 21.0.3+13-Ubuntu-0ubuntu0.24.04.1
-    // - Format with underscores: 1.8.0_411
-
-    // First, strip build metadata (everything after '+')
-    let version_only = version.split('+').next().unwrap_or(version);
-
-    // Remove trailing junk (like "-Ubuntu-0ubuntu0.24.04.1")
-    let version_only = version_only.split('-').next().unwrap_or(version_only);
-
-    // Replace underscores with dots (1.8.0_411 -> 1.8.0.411)
-    let normalized = version_only.replace('_', ".");
-
-    // Split by dots
-    let parts: Vec<&str> = normalized.split('.').collect();
-
-    if let Some(first) = parts.first() {
-        if *first == "1" {
-            // Old format: 1.8.0 -> major is 8
-            parts.get(1).and_then(|s| s.parse().ok()).unwrap_or(0)
-        } else {
-            // New format: 17.0.1 -> major is 17
-            first.parse().unwrap_or(0)
-        }
-    } else {
-        0
-    }
-}
-
-/// Get the best Java for a specific Minecraft version
-pub fn get_recommended_java(required_major_version: Option<u64>) -> Option<JavaInstallation> {
-    let installations = detect_java_installations();
-
-    if let Some(required) = required_major_version {
-        // Find exact match or higher
-        installations.into_iter().find(|java| {
-            let major = parse_java_version(&java.version);
-            major >= required as u32
-        })
-    } else {
-        // Return newest
-        installations.into_iter().next()
-    }
-}
-
-/// Get compatible Java for a specific Minecraft version with upper bound
-/// For older Minecraft versions (1.13.x and below), we need Java 8 specifically
-/// as newer Java versions have compatibility issues with old Forge versions
-pub fn get_compatible_java(
-    app_handle: &AppHandle,
-    required_major_version: Option<u64>,
-    max_major_version: Option<u32>,
-) -> Option<JavaInstallation> {
-    let installations = detect_all_java_installations(app_handle);
-
-    if let Some(max_version) = max_major_version {
-        // Find Java version within the acceptable range
-        installations.into_iter().find(|java| {
-            let major = parse_java_version(&java.version);
-            let meets_min = if let Some(required) = required_major_version {
-                major >= required as u32
-            } else {
-                true
-            };
-            meets_min && major <= max_version
-        })
-    } else if let Some(required) = required_major_version {
-        // Find exact match or higher (no upper bound)
-        installations.into_iter().find(|java| {
-            let major = parse_java_version(&java.version);
-            major >= required as u32
-        })
-    } else {
-        // Return newest
-        installations.into_iter().next()
-    }
-}
-
-/// Check if a Java installation is compatible with the required version range
-pub fn is_java_compatible(
-    java_path: &str,
-    required_major_version: Option<u64>,
-    max_major_version: Option<u32>,
-) -> bool {
-    let java_path_buf = PathBuf::from(java_path);
-    if let Some(java) = check_java_installation(&java_path_buf) {
-        let major = parse_java_version(&java.version);
-        let meets_min = if let Some(required) = required_major_version {
-            major >= required as u32
-        } else {
-            true
-        };
-        let meets_max = if let Some(max_version) = max_major_version {
-            major <= max_version
-        } else {
-            true
-        };
-        meets_min && meets_max
-    } else {
-        false
-    }
-}
-
-/// Detect all installed Java versions (including system installations and DropOut downloads)
-pub fn detect_all_java_installations(app_handle: &AppHandle) -> Vec<JavaInstallation> {
-    let mut installations = detect_java_installations();
-
-    // Add DropOut downloaded Java versions
-    let dropout_java_dir = get_java_install_dir(app_handle);
-    if dropout_java_dir.exists() {
-        if let Ok(entries) = std::fs::read_dir(&dropout_java_dir) {
-            for entry in entries.flatten() {
-                let path = entry.path();
-                if path.is_dir() {
-                    // Find the java executable in this directory
-                    let java_bin = find_java_executable(&path);
-                    if let Some(java_path) = java_bin {
-                        if let Some(java) = check_java_installation(&java_path) {
-                            if !installations.iter().any(|j| j.path == java.path) {
-                                installations.push(java);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // Sort by version
-    installations.sort_by(|a, b| {
-        let v_a = parse_java_version(&a.version);
-        let v_b = parse_java_version(&b.version);
-        v_b.cmp(&v_a)
-    });
-
-    installations
-}
-
-/// Find the java executable in a directory using a limited-depth search
-fn find_java_executable(dir: &PathBuf) -> Option<PathBuf> {
-    let bin_name = if cfg!(windows) { "java.exe" } else { "java" };
-
-    // Directly look in the bin directory
-    let direct_bin = dir.join("bin").join(bin_name);
-    if direct_bin.exists() {
-        let resolved = std::fs::canonicalize(&direct_bin).unwrap_or(direct_bin);
-        return Some(strip_unc_prefix(resolved));
-    }
-
-    // macOS: Contents/Home/bin/java
-    #[cfg(target_os = "macos")]
-    {
-        let macos_bin = dir.join("Contents").join("Home").join("bin").join(bin_name);
-        if macos_bin.exists() {
-            return Some(macos_bin);
-        }
-    }
-
-    // Look in subdirectories (handle nested directories after Adoptium extraction)
-    if let Ok(entries) = std::fs::read_dir(dir) {
-        for entry in entries.flatten() {
-            let path = entry.path();
-            if path.is_dir() {
-                // Try direct bin path
-                let nested_bin = path.join("bin").join(bin_name);
-                if nested_bin.exists() {
-                    let resolved = std::fs::canonicalize(&nested_bin).unwrap_or(nested_bin);
-                    return Some(strip_unc_prefix(resolved));
-                }
-
-                // macOS: nested/Contents/Home/bin/java
-                #[cfg(target_os = "macos")]
-                {
-                    let macos_nested = path
-                        .join("Contents")
-                        .join("Home")
-                        .join("bin")
-                        .join(bin_name);
-                    if macos_nested.exists() {
-                        return Some(macos_nested);
-                    }
-                }
-            }
-        }
-    }
-
-    None
-}
-
-/// Resume pending Java downloads from queue
-pub async fn resume_pending_downloads(
-    app_handle: &AppHandle,
-) -> Result<Vec<JavaInstallation>, String> {
-    let queue = DownloadQueue::load(app_handle);
-    let mut installed = Vec::new();
-
-    for pending in queue.pending_downloads.iter() {
-        let image_type = if pending.image_type == "jdk" {
-            ImageType::Jdk
-        } else {
-            ImageType::Jre
-        };
-
-        // Try to resume the download
-        match download_and_install_java(
-            app_handle,
-            pending.major_version,
-            image_type,
-            Some(PathBuf::from(&pending.install_path)),
-        )
-        .await
-        {
-            Ok(installation) => {
-                installed.push(installation);
-            }
-            Err(e) => {
-                eprintln!(
-                    "Failed to resume Java {} {} download: {}",
-                    pending.major_version, pending.image_type, e
-                );
-            }
-        }
-    }
-
-    Ok(installed)
-}
-
-/// Cancel current Java download
-pub fn cancel_current_download() {
-    downloader::cancel_java_download();
-}
-
-/// Get pending downloads from queue
-pub fn get_pending_downloads(app_handle: &AppHandle) -> Vec<PendingJavaDownload> {
-    let queue = DownloadQueue::load(app_handle);
-    queue.pending_downloads
-}
-
-/// Clear a specific pending download
-#[allow(dead_code)]
-pub fn clear_pending_download(
-    app_handle: &AppHandle,
-    major_version: u32,
-    image_type: &str,
-) -> Result<(), String> {
-    let mut queue = DownloadQueue::load(app_handle);
-    queue.remove(major_version, image_type);
-    queue.save(app_handle)
-}
diff --git a/src-tauri/src/core/java/detection.rs b/src-tauri/src/core/java/detection.rs
new file mode 100644
index 0000000..08dcebb
--- /dev/null
+++ b/src-tauri/src/core/java/detection.rs
@@ -0,0 +1,311 @@
+use std::io::Read;
+use std::path::Path;
+use std::path::PathBuf;
+use std::process::{Command, Stdio};
+use std::time::Duration;
+
+#[cfg(target_os = "windows")]
+use std::os::windows::process::CommandExt;
+
+use crate::core::java::strip_unc_prefix;
+
+const WHICH_TIMEOUT: Duration = Duration::from_secs(2);
+
+/// Scans a directory for Java installations, filtering out symlinks
+///
+/// # Arguments
+/// * `base_dir` - Base directory to scan (e.g., mise or SDKMAN java dir)
+/// * `should_skip` - Predicate to determine if an entry should be skipped
+///
+/// # Returns
+/// First valid Java installation found, or `None`
+fn scan_java_dir<F>(base_dir: &Path, should_skip: F) -> Option<PathBuf>
+where
+    F: Fn(&std::fs::DirEntry) -> bool,
+{
+    std::fs::read_dir(base_dir)
+        .ok()?
+        .flatten()
+        .filter(|entry| {
+            let path = entry.path();
+            // Only consider real directories, not symlinks
+            path.is_dir() && !path.is_symlink() && !should_skip(entry)
+        })
+        .find_map(|entry| {
+            let java_path = entry.path().join("bin/java");
+            if java_path.exists() && java_path.is_file() {
+                Some(java_path)
+            } else {
+                None
+            }
+        })
+}
+
+/// Finds Java installation from SDKMAN! if available
+///
+/// Scans the SDKMAN! candidates directory and returns the first valid Java installation found.
+/// Skips the 'current' symlink to avoid duplicates.
+///
+/// Path: `~/.sdkman/candidates/java/`
+///
+/// # Returns
+/// `Some(PathBuf)` pointing to `bin/java` if found, `None` otherwise
+pub fn find_sdkman_java() -> Option<PathBuf> {
+    let home = std::env::var("HOME").ok()?;
+    let sdkman_base = PathBuf::from(&home).join(".sdkman/candidates/java/");
+
+    if !sdkman_base.exists() {
+        return None;
+    }
+
+    scan_java_dir(&sdkman_base, |entry| entry.file_name() == "current")
+}
+
+/// Finds Java installation from mise if available
+///
+/// Scans the mise Java installation directory and returns the first valid installation found.
+/// Skips version alias symlinks (e.g., `21`, `21.0`, `latest`, `lts`) to avoid duplicates.
+///
+/// Path: `~/.local/share/mise/installs/java/`
+///
+/// # Returns
+/// `Some(PathBuf)` pointing to `bin/java` if found, `None` otherwise
+pub fn find_mise_java() -> Option<PathBuf> {
+    let home = std::env::var("HOME").ok()?;
+    let mise_base = PathBuf::from(&home).join(".local/share/mise/installs/java/");
+
+    if !mise_base.exists() {
+        return None;
+    }
+
+    scan_java_dir(&mise_base, |_| false) // mise: no additional filtering needed
+}
+
+/// Runs `which` (Unix) or `where` (Windows) command to find Java in PATH with timeout
+///
+/// This function spawns a subprocess to locate the `java` executable in the system PATH.
+/// It enforces a 2-second timeout to prevent hanging if the command takes too long.
+///
+/// # Returns
+/// `Some(String)` containing the output (paths separated by newlines) if successful,
+/// `None` if the command fails, times out, or returns non-zero exit code
+///
+/// # Platform-specific behavior
+/// - Unix/Linux/macOS: Uses `which java`
+/// - Windows: Uses `where java` and hides the console window
+///
+/// # Timeout Behavior
+/// If the command does not complete within 2 seconds, the process is killed
+/// and `None` is returned. This prevents the launcher from hanging on systems
+/// where `which`/`where` may be slow or unresponsive.
+fn run_which_command_with_timeout() -> Option<String> {
+    let mut cmd = Command::new(if cfg!(windows) { "where" } else { "which" });
+    cmd.arg("java");
+    // Hide console window on Windows
+    #[cfg(target_os = "windows")]
+    cmd.creation_flags(0x08000000);
+    cmd.stdout(Stdio::piped());
+
+    let mut child = cmd.spawn().ok()?;
+    let start = std::time::Instant::now();
+
+    loop {
+        // Check if timeout has been exceeded
+        if start.elapsed() > WHICH_TIMEOUT {
+            let _ = child.kill();
+            let _ = child.wait();
+            return None;
+        }
+
+        match child.try_wait() {
+            Ok(Some(status)) => {
+                if status.success() {
+                    let mut output = String::new();
+                    if let Some(mut stdout) = child.stdout.take() {
+                        let _ = stdout.read_to_string(&mut output);
+                    }
+                    return Some(output);
+                } else {
+                    let _ = child.wait();
+                    return None;
+                }
+            }
+            Ok(None) => {
+                // Command still running, sleep briefly before checking again
+                std::thread::sleep(Duration::from_millis(50));
+            }
+            Err(_) => {
+                let _ = child.kill();
+                let _ = child.wait();
+                return None;
+            }
+        }
+    }
+}
+
+/// Detects all available Java installations on the system
+///
+/// This function searches for Java installations in multiple locations:
+/// - **All platforms**: `JAVA_HOME` environment variable, `java` in PATH
+/// - **Linux**: `/usr/lib/jvm`, `/usr/java`, `/opt/java`, `/opt/jdk`, `/opt/openjdk`, SDKMAN!
+/// - **macOS**: `/Library/Java/JavaVirtualMachines`, `/System/Library/Java/JavaVirtualMachines`,
+///   Homebrew paths (`/usr/local/opt/openjdk`, `/opt/homebrew/opt/openjdk`), SDKMAN!
+/// - **Windows**: `Program Files`, `Program Files (x86)`, `LOCALAPPDATA` for various JDK distributions
+///
+/// # Returns
+/// A vector of `PathBuf` pointing to Java executables found on the system.
+/// Note: Paths may include symlinks and duplicates; callers should canonicalize and deduplicate as needed.
+///
+/// # Examples
+/// ```ignore
+/// let candidates = get_java_candidates();
+/// for java_path in candidates {
+///     println!("Found Java at: {}", java_path.display());
+/// }
+/// ```
+pub fn get_java_candidates() -> Vec<PathBuf> {
+    let mut candidates = Vec::new();
+
+    // Try to find Java in PATH using 'which' or 'where' command with timeout
+    // CAUTION: linux 'which' may return symlinks, so we need to canonicalize later
+    if let Some(paths_str) = run_which_command_with_timeout() {
+        for line in paths_str.lines() {
+            let path = PathBuf::from(line.trim());
+            if path.exists() {
+                let resolved = std::fs::canonicalize(&path).unwrap_or(path);
+                let final_path = strip_unc_prefix(resolved);
+                candidates.push(final_path);
+            }
+        }
+    }
+
+    #[cfg(target_os = "linux")]
+    {
+        let linux_paths = [
+            "/usr/lib/jvm",
+            "/usr/java",
+            "/opt/java",
+            "/opt/jdk",
+            "/opt/openjdk",
+        ];
+
+        for base in &linux_paths {
+            if let Ok(entries) = std::fs::read_dir(base) {
+                for entry in entries.flatten() {
+                    let java_path = entry.path().join("bin/java");
+                    if java_path.exists() {
+                        candidates.push(java_path);
+                    }
+                }
+            }
+        }
+
+        // Check common SDKMAN! java candidates
+        if let Some(sdkman_java) = find_sdkman_java() {
+            candidates.push(sdkman_java);
+        }
+
+        // Check common mise java candidates
+        if let Some(mise_java) = find_mise_java() {
+            candidates.push(mise_java);
+        }
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        let mac_paths = [
+            "/Library/Java/JavaVirtualMachines",
+            "/System/Library/Java/JavaVirtualMachines",
+            "/usr/local/opt/openjdk/bin/java",
+            "/opt/homebrew/opt/openjdk/bin/java",
+        ];
+
+        for path in &mac_paths {
+            let p = PathBuf::from(path);
+            if p.is_dir() {
+                if let Ok(entries) = std::fs::read_dir(&p) {
+                    for entry in entries.flatten() {
+                        let java_path = entry.path().join("Contents/Home/bin/java");
+                        if java_path.exists() {
+                            candidates.push(java_path);
+                        }
+                    }
+                }
+            } else if p.exists() {
+                candidates.push(p);
+            }
+        }
+
+        // Check common Homebrew java candidates for aarch64 macs
+        let homebrew_arm = PathBuf::from("/opt/homebrew/Cellar/openjdk");
+        if homebrew_arm.exists() {
+            if let Ok(entries) = std::fs::read_dir(&homebrew_arm) {
+                for entry in entries.flatten() {
+                    let java_path = entry
+                        .path()
+                        .join("libexec/openjdk.jdk/Contents/Home/bin/java");
+                    if java_path.exists() {
+                        candidates.push(java_path);
+                    }
+                }
+            }
+        }
+
+        // Check common SDKMAN! java candidates
+        if let Some(sdkman_java) = find_sdkman_java() {
+            candidates.push(sdkman_java);
+        }
+
+        // Check common mise java candidates
+        if let Some(mise_java) = find_mise_java() {
+            candidates.push(mise_java);
+        }
+    }
+
+    #[cfg(target_os = "windows")]
+    {
+        let program_files =
+            std::env::var("ProgramFiles").unwrap_or_else(|_| "C:\\Program Files".to_string());
+        let program_files_x86 = std::env::var("ProgramFiles(x86)")
+            .unwrap_or_else(|_| "C:\\Program Files (x86)".to_string());
+        let local_app_data = std::env::var("LOCALAPPDATA").unwrap_or_default();
+
+        // Common installation paths for various JDK distributions
+        let mut win_paths = vec![];
+        for base in &[&program_files, &program_files_x86, &local_app_data] {
+            win_paths.push(format!("{}\\Java", base));
+            win_paths.push(format!("{}\\Eclipse Adoptium", base));
+            win_paths.push(format!("{}\\AdoptOpenJDK", base));
+            win_paths.push(format!("{}\\Microsoft\\jdk", base));
+            win_paths.push(format!("{}\\Zulu", base));
+            win_paths.push(format!("{}\\Amazon Corretto", base));
+            win_paths.push(format!("{}\\BellSoft\\LibericaJDK", base));
+            win_paths.push(format!("{}\\Programs\\Eclipse Adoptium", base));
+        }
+
+        for base in &win_paths {
+            let base_path = PathBuf::from(base);
+            if base_path.exists() {
+                if let Ok(entries) = std::fs::read_dir(&base_path) {
+                    for entry in entries.flatten() {
+                        let java_path = entry.path().join("bin\\java.exe");
+                        if java_path.exists() {
+                            candidates.push(java_path);
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    // Check JAVA_HOME environment variable
+    if let Ok(java_home) = std::env::var("JAVA_HOME") {
+        let bin_name = if cfg!(windows) { "java.exe" } else { "java" };
+        let java_path = PathBuf::from(&java_home).join("bin").join(bin_name);
+        if java_path.exists() {
+            candidates.push(java_path);
+        }
+    }
+
+    candidates
+}
diff --git a/src-tauri/src/core/java/error.rs b/src-tauri/src/core/java/error.rs
new file mode 100644
index 0000000..bf78d3b
--- /dev/null
+++ b/src-tauri/src/core/java/error.rs
@@ -0,0 +1,95 @@
+use std::fmt;
+
+/// Unified error type for Java component operations
+///
+/// This enum represents all possible errors that can occur in the Java component,
+/// providing a consistent error handling interface across all modules.
+#[derive(Debug, Clone)]
+pub enum JavaError {
+    // Java installation not found at the specified path
+    NotFound,
+    // Invalid Java version format or unable to parse version
+    InvalidVersion(String),
+    // Java installation verification failed (e.g., -version command failed)
+    VerificationFailed(String),
+    // Network error during API calls or downloads
+    NetworkError(String),
+    // File I/O error (reading, writing, or accessing files)
+    IoError(String),
+    // Timeout occurred during operation
+    Timeout(String),
+    // Serialization/deserialization error
+    SerializationError(String),
+    // Invalid configuration or parameters
+    InvalidConfig(String),
+    // Download or installation failed
+    DownloadFailed(String),
+    // Extraction or decompression failed
+    ExtractionFailed(String),
+    // Checksum verification failed
+    ChecksumMismatch(String),
+    // Other unspecified errors
+    Other(String),
+}
+
+impl fmt::Display for JavaError {
+    fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+        match self {
+            JavaError::NotFound => write!(f, "Java installation not found"),
+            JavaError::InvalidVersion(msg) => write!(f, "Invalid Java version: {}", msg),
+            JavaError::VerificationFailed(msg) => write!(f, "Java verification failed: {}", msg),
+            JavaError::NetworkError(msg) => write!(f, "Network error: {}", msg),
+            JavaError::IoError(msg) => write!(f, "I/O error: {}", msg),
+            JavaError::Timeout(msg) => write!(f, "Operation timeout: {}", msg),
+            JavaError::SerializationError(msg) => write!(f, "Serialization error: {}", msg),
+            JavaError::InvalidConfig(msg) => write!(f, "Invalid configuration: {}", msg),
+            JavaError::DownloadFailed(msg) => write!(f, "Download failed: {}", msg),
+            JavaError::ExtractionFailed(msg) => write!(f, "Extraction failed: {}", msg),
+            JavaError::ChecksumMismatch(msg) => write!(f, "Checksum mismatch: {}", msg),
+            JavaError::Other(msg) => write!(f, "{}", msg),
+        }
+    }
+}
+
+impl std::error::Error for JavaError {}
+
+/// Convert JavaError to String for Tauri command results
+impl From<JavaError> for String {
+    fn from(err: JavaError) -> Self {
+        err.to_string()
+    }
+}
+
+/// Convert std::io::Error to JavaError
+impl From<std::io::Error> for JavaError {
+    fn from(err: std::io::Error) -> Self {
+        JavaError::IoError(err.to_string())
+    }
+}
+
+/// Convert serde_json::Error to JavaError
+impl From<serde_json::Error> for JavaError {
+    fn from(err: serde_json::Error) -> Self {
+        JavaError::SerializationError(err.to_string())
+    }
+}
+
+/// Convert reqwest::Error to JavaError
+impl From<reqwest::Error> for JavaError {
+    fn from(err: reqwest::Error) -> Self {
+        if err.is_timeout() {
+            JavaError::Timeout(err.to_string())
+        } else if err.is_connect() || err.is_request() {
+            JavaError::NetworkError(err.to_string())
+        } else {
+            JavaError::NetworkError(err.to_string())
+        }
+    }
+}
+
+/// Convert String to JavaError
+impl From<String> for JavaError {
+    fn from(err: String) -> Self {
+        JavaError::Other(err)
+    }
+}
diff --git a/src-tauri/src/core/java/mod.rs b/src-tauri/src/core/java/mod.rs
new file mode 100644
index 0000000..2215872
--- /dev/null
+++ b/src-tauri/src/core/java/mod.rs
@@ -0,0 +1,547 @@
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use tauri::{AppHandle, Emitter, Manager};
+
+pub mod detection;
+pub mod error;
+pub mod persistence;
+pub mod priority;
+pub mod provider;
+pub mod providers;
+pub mod validation;
+
+pub use error::JavaError;
+use ts_rs::TS;
+
+/// Remove the UNC prefix (\\?\) from Windows paths
+pub fn strip_unc_prefix(path: PathBuf) -> PathBuf {
+    #[cfg(target_os = "windows")]
+    {
+        let s = path.to_string_lossy().to_string();
+        if s.starts_with(r"\\?\\") {
+            return PathBuf::from(&s[4..]);
+        }
+    }
+    path
+}
+
+use crate::core::downloader::{DownloadQueue, JavaDownloadProgress, PendingJavaDownload};
+use crate::utils::zip;
+use provider::JavaProvider;
+use providers::AdoptiumProvider;
+
+const CACHE_DURATION_SECS: u64 = 24 * 60 * 60;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/index.ts"
+)]
+pub struct JavaInstallation {
+    pub path: String,
+    pub version: String,
+    pub arch: String,
+    pub vendor: String,
+    pub source: String,
+    pub is_64bit: bool,
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum ImageType {
+    Jre,
+    Jdk,
+}
+
+impl Default for ImageType {
+    fn default() -> Self {
+        Self::Jre
+    }
+}
+
+impl std::fmt::Display for ImageType {
+    fn fmt(&self, f: &mut std::fmt::Formatter<'_>) -> std::fmt::Result {
+        match self {
+            Self::Jre => write!(f, "jre"),
+            Self::Jdk => write!(f, "jdk"),
+        }
+    }
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/index.ts"
+)]
+pub struct JavaReleaseInfo {
+    pub major_version: u32,
+    pub image_type: String,
+    pub version: String,
+    pub release_name: String,
+    pub release_date: Option<String>,
+    pub file_size: u64,
+    pub checksum: Option<String>,
+    pub download_url: String,
+    pub is_lts: bool,
+    pub is_available: bool,
+    pub architecture: String,
+}
+
+#[derive(Debug, Clone, Serialize, Deserialize, Default, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/index.ts"
+)]
+pub struct JavaCatalog {
+    pub releases: Vec<JavaReleaseInfo>,
+    pub available_major_versions: Vec<u32>,
+    pub lts_versions: Vec<u32>,
+    pub cached_at: u64,
+}
+
+#[derive(Debug, Clone, Serialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/index.ts"
+)]
+pub struct JavaDownloadInfo {
+    pub version: String,          // e.g., "17.0.2+8"
+    pub release_name: String,     // e.g., "jdk-17.0.2+8"
+    pub download_url: String,     // Direct download URL
+    pub file_name: String,        // e.g., "OpenJDK17U-jre_x64_linux_hotspot_17.0.2_8.tar.gz"
+    pub file_size: u64,           // in bytes
+    pub checksum: Option<String>, // SHA256 checksum
+    pub image_type: String,       // "jre" or "jdk"
+}
+
+pub fn get_java_install_dir(app_handle: &AppHandle) -> PathBuf {
+    app_handle.path().app_data_dir().unwrap().join("java")
+}
+
+fn get_catalog_cache_path(app_handle: &AppHandle) -> PathBuf {
+    app_handle
+        .path()
+        .app_data_dir()
+        .unwrap()
+        .join("java_catalog_cache.json")
+}
+
+pub fn load_cached_catalog(app_handle: &AppHandle) -> Option<JavaCatalog> {
+    let cache_path = get_catalog_cache_path(app_handle);
+    if !cache_path.exists() {
+        return None;
+    }
+
+    // Read cache file
+    let content = std::fs::read_to_string(&cache_path).ok()?;
+    let catalog: JavaCatalog = serde_json::from_str(&content).ok()?;
+
+    // Get current time in seconds since UNIX_EPOCH
+    let now = std::time::SystemTime::now()
+        .duration_since(std::time::UNIX_EPOCH)
+        .unwrap()
+        .as_secs();
+
+    // Check if cache is still valid
+    if now - catalog.cached_at < CACHE_DURATION_SECS {
+        Some(catalog)
+    } else {
+        None
+    }
+}
+
+pub fn save_catalog_cache(app_handle: &AppHandle, catalog: &JavaCatalog) -> Result<(), String> {
+    let cache_path = get_catalog_cache_path(app_handle);
+    let content = serde_json::to_string_pretty(catalog).map_err(|e| e.to_string())?;
+    std::fs::write(&cache_path, content).map_err(|e| e.to_string())?;
+    Ok(())
+}
+
+#[allow(dead_code)]
+pub fn clear_catalog_cache(app_handle: &AppHandle) -> Result<(), String> {
+    let cache_path = get_catalog_cache_path(app_handle);
+    if cache_path.exists() {
+        std::fs::remove_file(&cache_path).map_err(|e| e.to_string())?;
+    }
+    Ok(())
+}
+
+pub async fn fetch_java_catalog(
+    app_handle: &AppHandle,
+    force_refresh: bool,
+) -> Result<JavaCatalog, String> {
+    let provider = AdoptiumProvider::new();
+    provider
+        .fetch_catalog(app_handle, force_refresh)
+        .await
+        .map_err(|e| e.to_string())
+}
+
+pub async fn fetch_java_release(
+    major_version: u32,
+    image_type: ImageType,
+) -> Result<JavaDownloadInfo, String> {
+    let provider = AdoptiumProvider::new();
+    provider
+        .fetch_release(major_version, image_type)
+        .await
+        .map_err(|e| e.to_string())
+}
+
+pub async fn fetch_available_versions() -> Result<Vec<u32>, String> {
+    let provider = AdoptiumProvider::new();
+    provider
+        .available_versions()
+        .await
+        .map_err(|e| e.to_string())
+}
+
+pub async fn download_and_install_java(
+    app_handle: &AppHandle,
+    major_version: u32,
+    image_type: ImageType,
+    custom_path: Option<PathBuf>,
+) -> Result<JavaInstallation, String> {
+    let provider = AdoptiumProvider::new();
+    let info = provider.fetch_release(major_version, image_type).await?;
+    let file_name = info.file_name.clone();
+
+    let install_base = custom_path.unwrap_or_else(|| get_java_install_dir(app_handle));
+    let version_dir = install_base.join(format!(
+        "{}-{}-{}",
+        provider.install_prefix(),
+        major_version,
+        image_type
+    ));
+
+    std::fs::create_dir_all(&install_base)
+        .map_err(|e| format!("Failed to create installation directory: {}", e))?;
+
+    let mut queue = DownloadQueue::load(app_handle);
+    queue.add(PendingJavaDownload {
+        major_version,
+        image_type: image_type.to_string(),
+        download_url: info.download_url.clone(),
+        file_name: info.file_name.clone(),
+        file_size: info.file_size,
+        checksum: info.checksum.clone(),
+        install_path: install_base.to_string_lossy().to_string(),
+        created_at: std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap()
+            .as_secs(),
+    });
+    queue.save(app_handle)?;
+
+    let archive_path = install_base.join(&info.file_name);
+
+    let need_download = if archive_path.exists() {
+        if let Some(expected_checksum) = &info.checksum {
+            let data = std::fs::read(&archive_path)
+                .map_err(|e| format!("Failed to read downloaded file: {}", e))?;
+            !crate::core::downloader::verify_checksum(&data, Some(expected_checksum), None)
+        } else {
+            false
+        }
+    } else {
+        true
+    };
+
+    if need_download {
+        crate::core::downloader::download_with_resume(
+            app_handle,
+            &info.download_url,
+            &archive_path,
+            info.checksum.as_deref(),
+            info.file_size,
+        )
+        .await?;
+    }
+
+    let _ = app_handle.emit(
+        "java-download-progress",
+        JavaDownloadProgress {
+            file_name: file_name.clone(),
+            downloaded_bytes: info.file_size,
+            total_bytes: info.file_size,
+            speed_bytes_per_sec: 0,
+            eta_seconds: 0,
+            status: "Extracting".to_string(),
+            percentage: 100.0,
+        },
+    );
+
+    if version_dir.exists() {
+        std::fs::remove_dir_all(&version_dir)
+            .map_err(|e| format!("Failed to remove old version directory: {}", e))?;
+    }
+
+    std::fs::create_dir_all(&version_dir)
+        .map_err(|e| format!("Failed to create version directory: {}", e))?;
+
+    let top_level_dir = if info.file_name.ends_with(".tar.gz") || info.file_name.ends_with(".tgz") {
+        zip::extract_tar_gz(&archive_path, &version_dir)?
+    } else if info.file_name.ends_with(".zip") {
+        zip::extract_zip(&archive_path, &version_dir)?;
+        find_top_level_dir(&version_dir)?
+    } else {
+        return Err(format!("Unsupported archive format: {}", info.file_name));
+    };
+
+    let _ = std::fs::remove_file(&archive_path);
+
+    let java_home = version_dir.join(&top_level_dir);
+    let java_bin = if cfg!(target_os = "macos") {
+        java_home
+            .join("Contents")
+            .join("Home")
+            .join("bin")
+            .join("java")
+    } else if cfg!(windows) {
+        java_home.join("bin").join("java.exe")
+    } else {
+        java_home.join("bin").join("java")
+    };
+
+    if !java_bin.exists() {
+        return Err(format!(
+            "Installation completed but Java executable not found: {}",
+            java_bin.display()
+        ));
+    }
+
+    let java_bin = std::fs::canonicalize(&java_bin).map_err(|e| e.to_string())?;
+    let java_bin = strip_unc_prefix(java_bin);
+
+    let installation = validation::check_java_installation(&java_bin)
+        .await
+        .ok_or_else(|| "Failed to verify Java installation".to_string())?;
+
+    queue.remove(major_version, &image_type.to_string());
+    queue.save(app_handle)?;
+
+    let _ = app_handle.emit(
+        "java-download-progress",
+        JavaDownloadProgress {
+            file_name,
+            downloaded_bytes: info.file_size,
+            total_bytes: info.file_size,
+            speed_bytes_per_sec: 0,
+            eta_seconds: 0,
+            status: "Completed".to_string(),
+            percentage: 100.0,
+        },
+    );
+
+    Ok(installation)
+}
+
+fn find_top_level_dir(extract_dir: &PathBuf) -> Result<String, String> {
+    let entries: Vec<_> = std::fs::read_dir(extract_dir)
+        .map_err(|e| format!("Failed to read directory: {}", e))?
+        .filter_map(|e| e.ok())
+        .filter(|e| e.path().is_dir())
+        .collect();
+
+    if entries.len() == 1 {
+        Ok(entries[0].file_name().to_string_lossy().to_string())
+    } else {
+        Ok(String::new())
+    }
+}
+
+pub async fn detect_java_installations() -> Vec<JavaInstallation> {
+    let mut installations = Vec::new();
+    let candidates = detection::get_java_candidates();
+
+    for candidate in candidates {
+        if let Some(java) = validation::check_java_installation(&candidate).await {
+            if !installations
+                .iter()
+                .any(|j: &JavaInstallation| j.path == java.path)
+            {
+                installations.push(java);
+            }
+        }
+    }
+
+    installations.sort_by(|a, b| {
+        let v_a = validation::parse_java_version(&a.version);
+        let v_b = validation::parse_java_version(&b.version);
+        v_b.cmp(&v_a)
+    });
+
+    installations
+}
+
+pub async fn get_recommended_java(required_major_version: Option<u64>) -> Option<JavaInstallation> {
+    let installations = detect_java_installations().await;
+
+    if let Some(required) = required_major_version {
+        installations.into_iter().find(|java| {
+            let major = validation::parse_java_version(&java.version);
+            major >= required as u32
+        })
+    } else {
+        installations.into_iter().next()
+    }
+}
+
+pub async fn get_compatible_java(
+    app_handle: &AppHandle,
+    required_major_version: Option<u64>,
+    max_major_version: Option<u32>,
+) -> Option<JavaInstallation> {
+    let installations = detect_all_java_installations(app_handle).await;
+
+    installations.into_iter().find(|java| {
+        let major = validation::parse_java_version(&java.version);
+        validation::is_version_compatible(major, required_major_version, max_major_version)
+    })
+}
+
+pub async fn is_java_compatible(
+    java_path: &str,
+    required_major_version: Option<u64>,
+    max_major_version: Option<u32>,
+) -> bool {
+    let java_path_buf = PathBuf::from(java_path);
+    if let Some(java) = validation::check_java_installation(&java_path_buf).await {
+        let major = validation::parse_java_version(&java.version);
+        validation::is_version_compatible(major, required_major_version, max_major_version)
+    } else {
+        false
+    }
+}
+
+pub async fn detect_all_java_installations(app_handle: &AppHandle) -> Vec<JavaInstallation> {
+    let mut installations = detect_java_installations().await;
+
+    let dropout_java_dir = get_java_install_dir(app_handle);
+    if dropout_java_dir.exists() {
+        if let Ok(entries) = std::fs::read_dir(&dropout_java_dir) {
+            for entry in entries.flatten() {
+                let path = entry.path();
+                if path.is_dir() {
+                    let java_bin = find_java_executable(&path);
+                    if let Some(java_path) = java_bin {
+                        if let Some(java) = validation::check_java_installation(&java_path).await {
+                            if !installations.iter().any(|j| j.path == java.path) {
+                                installations.push(java);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    installations.sort_by(|a, b| {
+        let v_a = validation::parse_java_version(&a.version);
+        let v_b = validation::parse_java_version(&b.version);
+        v_b.cmp(&v_a)
+    });
+
+    installations
+}
+
+fn find_java_executable(dir: &PathBuf) -> Option<PathBuf> {
+    let bin_name = if cfg!(windows) { "java.exe" } else { "java" };
+
+    let direct_bin = dir.join("bin").join(bin_name);
+    if direct_bin.exists() {
+        let resolved = std::fs::canonicalize(&direct_bin).unwrap_or(direct_bin);
+        return Some(strip_unc_prefix(resolved));
+    }
+
+    #[cfg(target_os = "macos")]
+    {
+        let macos_bin = dir.join("Contents").join("Home").join("bin").join(bin_name);
+        if macos_bin.exists() {
+            return Some(macos_bin);
+        }
+    }
+
+    if let Ok(entries) = std::fs::read_dir(dir) {
+        for entry in entries.flatten() {
+            let path = entry.path();
+            if path.is_dir() {
+                let nested_bin = path.join("bin").join(bin_name);
+                if nested_bin.exists() {
+                    let resolved = std::fs::canonicalize(&nested_bin).unwrap_or(nested_bin);
+                    return Some(strip_unc_prefix(resolved));
+                }
+
+                #[cfg(target_os = "macos")]
+                {
+                    let macos_nested = path
+                        .join("Contents")
+                        .join("Home")
+                        .join("bin")
+                        .join(bin_name);
+                    if macos_nested.exists() {
+                        return Some(macos_nested);
+                    }
+                }
+            }
+        }
+    }
+
+    None
+}
+
+pub async fn resume_pending_downloads(
+    app_handle: &AppHandle,
+) -> Result<Vec<JavaInstallation>, String> {
+    let queue = DownloadQueue::load(app_handle);
+    let mut installed = Vec::new();
+
+    for pending in queue.pending_downloads.iter() {
+        let image_type = if pending.image_type == "jdk" {
+            ImageType::Jdk
+        } else {
+            ImageType::Jre
+        };
+
+        match download_and_install_java(
+            app_handle,
+            pending.major_version,
+            image_type,
+            Some(PathBuf::from(&pending.install_path)),
+        )
+        .await
+        {
+            Ok(installation) => {
+                installed.push(installation);
+            }
+            Err(e) => {
+                eprintln!(
+                    "Failed to resume Java {} {} download: {}",
+                    pending.major_version, pending.image_type, e
+                );
+            }
+        }
+    }
+
+    Ok(installed)
+}
+
+pub fn cancel_current_download() {
+    crate::core::downloader::cancel_java_download();
+}
+
+pub fn get_pending_downloads(app_handle: &AppHandle) -> Vec<PendingJavaDownload> {
+    let queue = DownloadQueue::load(app_handle);
+    queue.pending_downloads
+}
+
+#[allow(dead_code)]
+pub fn clear_pending_download(
+    app_handle: &AppHandle,
+    major_version: u32,
+    image_type: &str,
+) -> Result<(), String> {
+    let mut queue = DownloadQueue::load(app_handle);
+    queue.remove(major_version, image_type);
+    queue.save(app_handle)
+}
diff --git a/src-tauri/src/core/java/persistence.rs b/src-tauri/src/core/java/persistence.rs
new file mode 100644
index 0000000..6720696
--- /dev/null
+++ b/src-tauri/src/core/java/persistence.rs
@@ -0,0 +1,118 @@
+use crate::core::java::error::JavaError;
+use serde::{Deserialize, Serialize};
+use std::path::PathBuf;
+use tauri::{AppHandle, Manager};
+use ts_rs::TS;
+
+#[derive(Debug, Clone, Serialize, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/persistence.ts"
+)]
+pub struct JavaConfig {
+    pub user_defined_paths: Vec<String>,
+    pub preferred_java_path: Option<String>,
+    pub last_detection_time: u64,
+}
+
+impl Default for JavaConfig {
+    fn default() -> Self {
+        Self {
+            user_defined_paths: Vec::new(),
+            preferred_java_path: None,
+            last_detection_time: 0,
+        }
+    }
+}
+
+fn get_java_config_path(app_handle: &AppHandle) -> PathBuf {
+    app_handle
+        .path()
+        .app_data_dir()
+        .unwrap()
+        .join("java_config.json")
+}
+
+pub fn load_java_config(app_handle: &AppHandle) -> JavaConfig {
+    let config_path = get_java_config_path(app_handle);
+    if !config_path.exists() {
+        return JavaConfig::default();
+    }
+
+    match std::fs::read_to_string(&config_path) {
+        Ok(content) => match serde_json::from_str(&content) {
+            Ok(config) => config,
+            Err(err) => {
+                // Log the error but don't panic - return default config
+                log::warn!(
+                    "Failed to parse Java config at {}: {}. Using default configuration.",
+                    config_path.display(),
+                    err
+                );
+                JavaConfig::default()
+            }
+        },
+        Err(err) => {
+            log::warn!(
+                "Failed to read Java config at {}: {}. Using default configuration.",
+                config_path.display(),
+                err
+            );
+            JavaConfig::default()
+        }
+    }
+}
+
+pub fn save_java_config(app_handle: &AppHandle, config: &JavaConfig) -> Result<(), JavaError> {
+    let config_path = get_java_config_path(app_handle);
+    let content = serde_json::to_string_pretty(config)?;
+
+    std::fs::create_dir_all(config_path.parent().ok_or_else(|| {
+        JavaError::InvalidConfig("Java config path has no parent directory".to_string())
+    })?)?;
+
+    std::fs::write(&config_path, content)?;
+    Ok(())
+}
+
+#[allow(dead_code)]
+pub fn add_user_defined_path(app_handle: &AppHandle, path: String) -> Result<(), JavaError> {
+    let mut config = load_java_config(app_handle);
+    if !config.user_defined_paths.contains(&path) {
+        config.user_defined_paths.push(path);
+    }
+    save_java_config(app_handle, &config)
+}
+
+#[allow(dead_code)]
+pub fn remove_user_defined_path(app_handle: &AppHandle, path: &str) -> Result<(), JavaError> {
+    let mut config = load_java_config(app_handle);
+    config.user_defined_paths.retain(|p| p != path);
+    save_java_config(app_handle, &config)
+}
+
+#[allow(dead_code)]
+pub fn set_preferred_java_path(
+    app_handle: &AppHandle,
+    path: Option<String>,
+) -> Result<(), JavaError> {
+    let mut config = load_java_config(app_handle);
+    config.preferred_java_path = path;
+    save_java_config(app_handle, &config)
+}
+
+#[allow(dead_code)]
+pub fn get_preferred_java_path(app_handle: &AppHandle) -> Option<String> {
+    let config = load_java_config(app_handle);
+    config.preferred_java_path
+}
+
+#[allow(dead_code)]
+pub fn update_last_detection_time(app_handle: &AppHandle) -> Result<(), JavaError> {
+    let mut config = load_java_config(app_handle);
+    config.last_detection_time = std::time::SystemTime::now()
+        .duration_since(std::time::UNIX_EPOCH)
+        .map_err(|e| JavaError::Other(format!("System time error: {}", e)))?
+        .as_secs();
+    save_java_config(app_handle, &config)
+}
diff --git a/src-tauri/src/core/java/priority.rs b/src-tauri/src/core/java/priority.rs
new file mode 100644
index 0000000..b2e9fb4
--- /dev/null
+++ b/src-tauri/src/core/java/priority.rs
@@ -0,0 +1,59 @@
+use tauri::AppHandle;
+
+use crate::core::java::persistence;
+use crate::core::java::validation;
+use crate::core::java::JavaInstallation;
+
+pub async fn resolve_java_for_launch(
+    app_handle: &AppHandle,
+    instance_java_override: Option<&str>,
+    global_java_path: Option<&str>,
+    required_major_version: Option<u64>,
+    max_major_version: Option<u32>,
+) -> Option<JavaInstallation> {
+    if let Some(override_path) = instance_java_override {
+        if !override_path.is_empty() {
+            let path_buf = std::path::PathBuf::from(override_path);
+            if let Some(java) = validation::check_java_installation(&path_buf).await {
+                if is_version_compatible(&java, required_major_version, max_major_version) {
+                    return Some(java);
+                }
+            }
+        }
+    }
+
+    if let Some(global_path) = global_java_path {
+        if !global_path.is_empty() {
+            let path_buf = std::path::PathBuf::from(global_path);
+            if let Some(java) = validation::check_java_installation(&path_buf).await {
+                if is_version_compatible(&java, required_major_version, max_major_version) {
+                    return Some(java);
+                }
+            }
+        }
+    }
+
+    let preferred = persistence::get_preferred_java_path(app_handle);
+    if let Some(pref_path) = preferred {
+        let path_buf = std::path::PathBuf::from(&pref_path);
+        if let Some(java) = validation::check_java_installation(&path_buf).await {
+            if is_version_compatible(&java, required_major_version, max_major_version) {
+                return Some(java);
+            }
+        }
+    }
+
+    let installations = super::detect_all_java_installations(app_handle).await;
+    installations
+        .into_iter()
+        .find(|java| is_version_compatible(java, required_major_version, max_major_version))
+}
+
+fn is_version_compatible(
+    java: &JavaInstallation,
+    required_major_version: Option<u64>,
+    max_major_version: Option<u32>,
+) -> bool {
+    let major = validation::parse_java_version(&java.version);
+    validation::is_version_compatible(major, required_major_version, max_major_version)
+}
diff --git a/src-tauri/src/core/java/provider.rs b/src-tauri/src/core/java/provider.rs
new file mode 100644
index 0000000..8aa0a0d
--- /dev/null
+++ b/src-tauri/src/core/java/provider.rs
@@ -0,0 +1,58 @@
+use crate::core::java::{ImageType, JavaCatalog, JavaDownloadInfo, JavaError};
+use tauri::AppHandle;
+
+/// Trait for Java distribution providers (e.g., Adoptium, Corretto)
+///
+/// Implementations handle fetching Java catalogs and release information
+/// from different distribution providers.
+pub trait JavaProvider: Send + Sync {
+    /// Fetch the Java catalog (all available versions for this provider)
+    ///
+    /// # Arguments
+    /// * `app_handle` - The Tauri app handle for cache access
+    /// * `force_refresh` - If true, bypass cache and fetch fresh data
+    ///
+    /// # Returns
+    /// * `Ok(JavaCatalog)` with available versions
+    /// * `Err(JavaError)` if fetch or parsing fails
+    async fn fetch_catalog(
+        &self,
+        app_handle: &AppHandle,
+        force_refresh: bool,
+    ) -> Result<JavaCatalog, JavaError>;
+
+    /// Fetch a specific Java release
+    ///
+    /// # Arguments
+    /// * `major_version` - The major version number (e.g., 17, 21)
+    /// * `image_type` - Whether to fetch JRE or JDK
+    ///
+    /// # Returns
+    /// * `Ok(JavaDownloadInfo)` with download details
+    /// * `Err(JavaError)` if fetch or parsing fails
+    async fn fetch_release(
+        &self,
+        major_version: u32,
+        image_type: ImageType,
+    ) -> Result<JavaDownloadInfo, JavaError>;
+
+    /// Get list of available major versions
+    ///
+    /// # Returns
+    /// * `Ok(Vec<u32>)` with available major versions
+    /// * `Err(JavaError)` if fetch fails
+    async fn available_versions(&self) -> Result<Vec<u32>, JavaError>;
+
+    /// Get provider name (e.g., "adoptium", "corretto")
+    #[allow(dead_code)]
+    fn provider_name(&self) -> &'static str;
+
+    /// Get OS name for this provider's API
+    fn os_name(&self) -> &'static str;
+
+    /// Get architecture name for this provider's API
+    fn arch_name(&self) -> &'static str;
+
+    /// Get installation directory prefix (e.g., "temurin", "corretto")
+    fn install_prefix(&self) -> &'static str;
+}
diff --git a/src-tauri/src/core/java/providers/adoptium.rs b/src-tauri/src/core/java/providers/adoptium.rs
new file mode 100644
index 0000000..20fb2d5
--- /dev/null
+++ b/src-tauri/src/core/java/providers/adoptium.rs
@@ -0,0 +1,355 @@
+use crate::core::java::error::JavaError;
+use crate::core::java::provider::JavaProvider;
+use crate::core::java::save_catalog_cache;
+use crate::core::java::{ImageType, JavaCatalog, JavaDownloadInfo, JavaReleaseInfo};
+use serde::Deserialize;
+use tauri::AppHandle;
+use ts_rs::TS;
+
+const ADOPTIUM_API_BASE: &str = "https://api.adoptium.net/v3";
+
+#[derive(Debug, Clone, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/providers/adoptium.ts"
+)]
+pub struct AdoptiumAsset {
+    pub binary: AdoptiumBinary,
+    pub release_name: String,
+    pub version: AdoptiumVersionData,
+}
+
+#[derive(Debug, Clone, Deserialize, TS)]
+#[allow(dead_code)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/providers/adoptium.ts"
+)]
+pub struct AdoptiumBinary {
+    pub os: String,
+    pub architecture: String,
+    pub image_type: String,
+    pub package: AdoptiumPackage,
+    #[serde(default)]
+    pub updated_at: Option<String>,
+}
+
+#[derive(Debug, Clone, Deserialize, TS)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/providers/adoptium.ts"
+)]
+pub struct AdoptiumPackage {
+    pub name: String,
+    pub link: String,
+    pub size: u64,
+    pub checksum: Option<String>,
+}
+
+#[derive(Debug, Clone, Deserialize, TS)]
+#[allow(dead_code)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/providers/adoptium.ts"
+)]
+pub struct AdoptiumVersionData {
+    pub major: u32,
+    pub minor: u32,
+    pub security: u32,
+    pub semver: String,
+    pub openjdk_version: String,
+}
+
+#[derive(Debug, Clone, Deserialize, TS)]
+#[allow(dead_code)]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/java/providers/adoptium.ts"
+)]
+pub struct AvailableReleases {
+    pub available_releases: Vec<u32>,
+    pub available_lts_releases: Vec<u32>,
+    pub most_recent_lts: Option<u32>,
+    pub most_recent_feature_release: Option<u32>,
+}
+
+pub struct AdoptiumProvider;
+
+impl AdoptiumProvider {
+    pub fn new() -> Self {
+        Self
+    }
+}
+
+impl Default for AdoptiumProvider {
+    fn default() -> Self {
+        Self::new()
+    }
+}
+
+impl JavaProvider for AdoptiumProvider {
+    async fn fetch_catalog(
+        &self,
+        app_handle: &AppHandle,
+        force_refresh: bool,
+    ) -> Result<JavaCatalog, JavaError> {
+        if !force_refresh {
+            if let Some(cached) = crate::core::java::load_cached_catalog(app_handle) {
+                return Ok(cached);
+            }
+        }
+
+        let os = self.os_name();
+        let arch = self.arch_name();
+        let client = reqwest::Client::new();
+
+        let releases_url = format!("{}/info/available_releases", ADOPTIUM_API_BASE);
+        let available: AvailableReleases = client
+            .get(&releases_url)
+            .header("Accept", "application/json")
+            .send()
+            .await
+            .map_err(|e| {
+                JavaError::NetworkError(format!("Failed to fetch available releases: {}", e))
+            })?
+            .json::<AvailableReleases>()
+            .await
+            .map_err(|e| {
+                JavaError::SerializationError(format!("Failed to parse available releases: {}", e))
+            })?;
+
+        // Parallelize HTTP requests for better performance
+        let mut fetch_tasks = Vec::new();
+
+        for major_version in &available.available_releases {
+            for image_type in &["jre", "jdk"] {
+                let major_version = *major_version;
+                let image_type = image_type.to_string();
+                let url = format!(
+                    "{}/assets/latest/{}/hotspot?os={}&architecture={}&image_type={}",
+                    ADOPTIUM_API_BASE, major_version, os, arch, image_type
+                );
+                let client = client.clone();
+                let is_lts = available.available_lts_releases.contains(&major_version);
+                let arch = arch.to_string();
+
+                let task = tokio::spawn(async move {
+                    match client
+                        .get(&url)
+                        .header("Accept", "application/json")
+                        .send()
+                        .await
+                    {
+                        Ok(response) => {
+                            if response.status().is_success() {
+                                if let Ok(assets) = response.json::<Vec<AdoptiumAsset>>().await {
+                                    if let Some(asset) = assets.into_iter().next() {
+                                        let release_date = asset.binary.updated_at.clone();
+                                        return Some(JavaReleaseInfo {
+                                            major_version,
+                                            image_type,
+                                            version: asset.version.semver.clone(),
+                                            release_name: asset.release_name.clone(),
+                                            release_date,
+                                            file_size: asset.binary.package.size,
+                                            checksum: asset.binary.package.checksum,
+                                            download_url: asset.binary.package.link,
+                                            is_lts,
+                                            is_available: true,
+                                            architecture: asset.binary.architecture.clone(),
+                                        });
+                                    }
+                                }
+                            }
+                            // Fallback for unsuccessful response
+                            Some(JavaReleaseInfo {
+                                major_version,
+                                image_type,
+                                version: format!("{}.x", major_version),
+                                release_name: format!("jdk-{}", major_version),
+                                release_date: None,
+                                file_size: 0,
+                                checksum: None,
+                                download_url: String::new(),
+                                is_lts,
+                                is_available: false,
+                                architecture: arch,
+                            })
+                        }
+                        Err(_) => Some(JavaReleaseInfo {
+                            major_version,
+                            image_type,
+                            version: format!("{}.x", major_version),
+                            release_name: format!("jdk-{}", major_version),
+                            release_date: None,
+                            file_size: 0,
+                            checksum: None,
+                            download_url: String::new(),
+                            is_lts,
+                            is_available: false,
+                            architecture: arch,
+                        }),
+                    }
+                });
+                fetch_tasks.push(task);
+            }
+        }
+
+        // Collect all results concurrently
+        let mut releases = Vec::new();
+        for task in fetch_tasks {
+            match task.await {
+                Ok(Some(release)) => {
+                    releases.push(release);
+                }
+                Ok(None) => {
+                    // Task completed but returned None, should not happen in current implementation
+                }
+                Err(e) => {
+                    return Err(JavaError::NetworkError(format!(
+                        "Failed to join Adoptium catalog fetch task: {}",
+                        e
+                    )));
+                }
+            }
+        }
+
+        let now = std::time::SystemTime::now()
+            .duration_since(std::time::UNIX_EPOCH)
+            .unwrap()
+            .as_secs();
+
+        let catalog = JavaCatalog {
+            releases,
+            available_major_versions: available.available_releases,
+            lts_versions: available.available_lts_releases,
+            cached_at: now,
+        };
+
+        let _ = save_catalog_cache(app_handle, &catalog);
+
+        Ok(catalog)
+    }
+
+    async fn fetch_release(
+        &self,
+        major_version: u32,
+        image_type: ImageType,
+    ) -> Result<JavaDownloadInfo, JavaError> {
+        let os = self.os_name();
+        let arch = self.arch_name();
+
+        let url = format!(
+            "{}/assets/latest/{}/hotspot?os={}&architecture={}&image_type={}",
+            ADOPTIUM_API_BASE, major_version, os, arch, image_type
+        );
+
+        let client = reqwest::Client::new();
+        let response = client
+            .get(&url)
+            .header("Accept", "application/json")
+            .send()
+            .await
+            .map_err(|e| JavaError::NetworkError(format!("Network request failed: {}", e)))?;
+
+        if !response.status().is_success() {
+            return Err(JavaError::NetworkError(format!(
+                "Adoptium API returned error: {} - The version/platform might be unavailable",
+                response.status()
+            )));
+        }
+
+        let assets: Vec<AdoptiumAsset> =
+            response.json::<Vec<AdoptiumAsset>>().await.map_err(|e| {
+                JavaError::SerializationError(format!("Failed to parse API response: {}", e))
+            })?;
+
+        let asset = assets
+            .into_iter()
+            .next()
+            .ok_or_else(|| JavaError::NotFound)?;
+
+        Ok(JavaDownloadInfo {
+            version: asset.version.semver.clone(),
+            release_name: asset.release_name,
+            download_url: asset.binary.package.link,
+            file_name: asset.binary.package.name,
+            file_size: asset.binary.package.size,
+            checksum: asset.binary.package.checksum,
+            image_type: asset.binary.image_type,
+        })
+    }
+
+    async fn available_versions(&self) -> Result<Vec<u32>, JavaError> {
+        let url = format!("{}/info/available_releases", ADOPTIUM_API_BASE);
+
+        let response = reqwest::get(url)
+            .await
+            .map_err(|e| JavaError::NetworkError(format!("Network request failed: {}", e)))?;
+
+        let releases: AvailableReleases =
+            response.json::<AvailableReleases>().await.map_err(|e| {
+                JavaError::SerializationError(format!("Failed to parse response: {}", e))
+            })?;
+
+        Ok(releases.available_releases)
+    }
+
+    fn provider_name(&self) -> &'static str {
+        "adoptium"
+    }
+
+    fn os_name(&self) -> &'static str {
+        #[cfg(target_os = "linux")]
+        {
+            if std::path::Path::new("/etc/alpine-release").exists() {
+                return "alpine-linux";
+            }
+            "linux"
+        }
+        #[cfg(target_os = "macos")]
+        {
+            "mac"
+        }
+        #[cfg(target_os = "windows")]
+        {
+            "windows"
+        }
+        #[cfg(not(any(target_os = "linux", target_os = "macos", target_os = "windows")))]
+        {
+            "linux"
+        }
+    }
+
+    fn arch_name(&self) -> &'static str {
+        #[cfg(target_arch = "x86_64")]
+        {
+            "x64"
+        }
+        #[cfg(target_arch = "aarch64")]
+        {
+            "aarch64"
+        }
+        #[cfg(target_arch = "x86")]
+        {
+            "x86"
+        }
+        #[cfg(target_arch = "arm")]
+        {
+            "arm"
+        }
+        #[cfg(not(any(
+            target_arch = "x86_64",
+            target_arch = "aarch64",
+            target_arch = "x86",
+            target_arch = "arm"
+        )))]
+        {
+            "x64"
+        }
+    }
+
+    fn install_prefix(&self) -> &'static str {
+        "temurin"
+    }
+}
diff --git a/src-tauri/src/core/java/providers/mod.rs b/src-tauri/src/core/java/providers/mod.rs
new file mode 100644
index 0000000..16eb5c7
--- /dev/null
+++ b/src-tauri/src/core/java/providers/mod.rs
@@ -0,0 +1,3 @@
+pub mod adoptium;
+
+pub use adoptium::AdoptiumProvider;
diff --git a/src-tauri/src/core/java/validation.rs b/src-tauri/src/core/java/validation.rs
new file mode 100644
index 0000000..b56ad59
--- /dev/null
+++ b/src-tauri/src/core/java/validation.rs
@@ -0,0 +1,146 @@
+use std::collections::HashMap;
+use std::path::PathBuf;
+use std::process::Command;
+
+#[cfg(target_os = "windows")]
+use std::os::windows::process::CommandExt;
+
+use crate::core::java::JavaInstallation;
+
+pub async fn check_java_installation(path: &PathBuf) -> Option<JavaInstallation> {
+    let path = path.clone();
+    tokio::task::spawn_blocking(move || check_java_installation_blocking(&path))
+        .await
+        .ok()?
+}
+
+fn check_java_installation_blocking(path: &PathBuf) -> Option<JavaInstallation> {
+    let mut cmd = Command::new(path);
+    cmd.arg("-version");
+
+    // Hide console window
+    #[cfg(target_os = "windows")]
+    cmd.creation_flags(0x08000000);
+
+    let output = cmd.output().ok()?;
+
+    let version_output = String::from_utf8_lossy(&output.stderr);
+
+    let version = parse_version_string(&version_output)?;
+    let arch = extract_architecture(&version_output);
+    let vendor = extract_vendor(&version_output);
+    let is_64bit = version_output.to_lowercase().contains("64-bit") || arch == "aarch64";
+
+    Some(JavaInstallation {
+        path: path.to_string_lossy().to_string(),
+        version,
+        arch,
+        vendor,
+        source: "system".to_string(),
+        is_64bit,
+    })
+}
+
+pub fn parse_version_string(output: &str) -> Option<String> {
+    for line in output.lines() {
+        if line.contains("version") {
+            if let Some(start) = line.find('"') {
+                if let Some(end) = line[start + 1..].find('"') {
+                    return Some(line[start + 1..start + 1 + end].to_string());
+                }
+            }
+        }
+    }
+    None
+}
+
+pub fn parse_java_version(version: &str) -> u32 {
+    let parts: Vec<&str> = version.split('.').collect();
+    if let Some(first) = parts.first() {
+        // Handle both legacy (1.x) and modern (x) versioning
+        if *first == "1" {
+            // Legacy versioning
+            parts.get(1).and_then(|s| s.parse().ok()).unwrap_or(0)
+        } else {
+            // Modern versioning
+            first.parse().unwrap_or(0)
+        }
+    } else {
+        0
+    }
+}
+
+pub fn extract_architecture(version_output: &str) -> String {
+    if version_output.contains("64-Bit") {
+        "x64".to_string()
+    } else if version_output.contains("32-Bit") {
+        "x86".to_string()
+    } else if version_output.contains("aarch64") || version_output.contains("ARM64") {
+        "aarch64".to_string()
+    } else {
+        "x64".to_string()
+    }
+}
+
+pub fn extract_vendor(version_output: &str) -> String {
+    let lower = version_output.to_lowercase();
+
+    let vendor_name: HashMap<&str, &str> = [
+        // Eclipse/Adoptium
+        ("temurin", "Temurin (Eclipse)"),
+        ("adoptium", "Eclipse Adoptium"),
+        // Amazon
+        ("corretto", "Corretto (Amazon)"),
+        ("amzn", "Corretto (Amazon)"),
+        // Alibaba
+        ("dragonwell", "Dragonwell (Alibaba)"),
+        ("albba", "Dragonwell (Alibaba)"),
+        // GraalVM
+        ("graalvm", "GraalVM"),
+        // Oracle
+        ("oracle", "Java SE Development Kit (Oracle)"),
+        // Tencent
+        ("kona", "Kona (Tencent)"),
+        // BellSoft
+        ("liberica", "Liberica (Bellsoft)"),
+        ("mandrel", "Mandrel (Red Hat)"),
+        // Microsoft
+        ("microsoft", "OpenJDK (Microsoft)"),
+        // SAP
+        ("sapmachine", "SapMachine (SAP)"),
+        // IBM
+        ("semeru", "Semeru (IBM)"),
+        ("sem", "Semeru (IBM)"),
+        // Azul
+        ("zulu", "Zulu (Azul Systems)"),
+        // Trava
+        ("trava", "Trava (Trava)"),
+        // Huawei
+        ("bisheng", "BiSheng (Huawei)"),
+        // Generic OpenJDK
+        ("openjdk", "OpenJDK"),
+    ]
+    .iter()
+    .cloned()
+    .collect();
+
+    for (key, name) in vendor_name {
+        if lower.contains(key) {
+            return name.to_string();
+        }
+    }
+
+    "Unknown".to_string()
+}
+
+pub fn is_version_compatible(
+    major: u32,
+    required_major_version: Option<u64>,
+    max_major_version: Option<u32>,
+) -> bool {
+    let meets_min = required_major_version
+        .map(|r| major >= r as u32)
+        .unwrap_or(true);
+    let meets_max = max_major_version.map(|m| major <= m).unwrap_or(true);
+    meets_min && meets_max
+}
diff --git a/src-tauri/src/core/manifest.rs b/src-tauri/src/core/manifest.rs
index e792071..9e4cb4e 100644
--- a/src-tauri/src/core/manifest.rs
+++ b/src-tauri/src/core/manifest.rs
@@ -3,20 +3,36 @@ use std::error::Error;
 use std::path::PathBuf;
 
 use crate::core::game_version::GameVersion;
-
-#[derive(Debug, Deserialize, Serialize)]
+use ts_rs::TS;
+
+#[derive(Debug, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/manifest.ts"
+)]
 pub struct VersionManifest {
     pub latest: Latest,
     pub versions: Vec<Version>,
 }
 
-#[derive(Debug, Deserialize, Serialize)]
+#[derive(Debug, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/manifest.ts"
+)]
 pub struct Latest {
     pub release: String,
     pub snapshot: String,
 }
 
-#[derive(Debug, Deserialize, Serialize)]
+#[derive(Debug, Deserialize, Serialize, TS)]
+#[serde(rename_all = "camelCase")]
+#[ts(
+    export,
+    export_to = "../../packages/ui-new/src/types/bindings/manifest.ts"
+)]
 pub struct Version {
     pub id: String,
     #[serde(rename = "type")]
diff --git a/src-tauri/src/main.rs b/src-tauri/src/main.rs
index 0f1d7a1..b74c746 100644
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -198,92 +198,54 @@ async fn start_game(
         None
     };
 
-    // Check if configured Java is compatible
+    // Resolve Java using priority-based resolution
+    // Priority: instance override > global config > user preference > auto-detect
+    // TODO: refactor into a separate function
     let app_handle = window.app_handle();
-    let mut java_path_to_use = config.java_path.clone();
-    if !java_path_to_use.is_empty() && java_path_to_use != "java" {
-        let is_compatible =
-            core::java::is_java_compatible(&java_path_to_use, required_java_major, max_java_major);
-
-        if !is_compatible {
-            emit_log!(
-                window,
-                format!(
-                    "Configured Java version may not be compatible. Looking for compatible Java..."
-                )
-            );
-
-            // Try to find a compatible Java version
-            if let Some(compatible_java) =
-                core::java::get_compatible_java(app_handle, required_java_major, max_java_major)
-            {
-                emit_log!(
-                    window,
-                    format!(
-                        "Found compatible Java {} at: {}",
-                        compatible_java.version, compatible_java.path
-                    )
-                );
-                java_path_to_use = compatible_java.path;
-            } else {
-                let version_constraint = if let Some(max) = max_java_major {
-                    if let Some(min) = required_java_major {
-                        if min == max as u64 {
-                            format!("Java {}", min)
-                        } else {
-                            format!("Java {} to {}", min, max)
-                        }
-                    } else {
-                        format!("Java {} (or lower)", max)
-                    }
-                } else if let Some(min) = required_java_major {
-                    format!("Java {} or higher", min)
-                } else {
-                    "any Java version".to_string()
-                };
+    let instance = instance_state
+        .get_instance(&instance_id)
+        .ok_or_else(|| format!("Instance {} not found", instance_id))?;
 
-                return Err(format!(
-                    "No compatible Java installation found. This version requires {}. Please install a compatible Java version in settings.",
-                    version_constraint
-                ));
-            }
-        }
-    } else {
-        // No Java configured, try to find a compatible one
-        if let Some(compatible_java) =
-            core::java::get_compatible_java(app_handle, required_java_major, max_java_major)
-        {
-            emit_log!(
-                window,
-                format!(
-                    "Using Java {} at: {}",
-                    compatible_java.version, compatible_java.path
-                )
-            );
-            java_path_to_use = compatible_java.path;
-        } else {
-            let version_constraint = if let Some(max) = max_java_major {
-                if let Some(min) = required_java_major {
-                    if min == max as u64 {
-                        format!("Java {}", min)
-                    } else {
-                        format!("Java {} to {}", min, max)
-                    }
+    let java_installation = core::java::priority::resolve_java_for_launch(
+        app_handle,
+        instance.java_path_override.as_deref(),
+        Some(&config.java_path),
+        required_java_major,
+        max_java_major,
+    )
+    .await
+    .ok_or_else(|| {
+        let version_constraint = if let Some(max) = max_java_major {
+            if let Some(min) = required_java_major {
+                if min == max as u64 {
+                    format!("Java {}", min)
                 } else {
-                    format!("Java {} (or lower)", max)
+                    format!("Java {} to {}", min, max)
                 }
-            } else if let Some(min) = required_java_major {
-                format!("Java {} or higher", min)
             } else {
-                "any Java version".to_string()
-            };
+                format!("Java {} (or lower)", max)
+            }
+        } else if let Some(min) = required_java_major {
+            format!("Java {} or higher", min)
+        } else {
+            "any Java version".to_string()
+        };
 
-            return Err(format!(
-                "No compatible Java installation found. This version requires {}. Please install a compatible Java version in settings.",
-                version_constraint
-            ));
-        }
-    }
+        format!(
+            "No compatible Java installation found. This version requires {}. Please install a compatible Java version in settings.",
+            version_constraint
+        )
+    })?;
+
+    emit_log!(
+        window,
+        format!(
+            "Using Java {} at: {}",
+            java_installation.version, java_installation.path
+        )
+    );
+
+    let java_path_to_use = java_installation.path;
 
     // 2. Prepare download tasks
     emit_log!(window, "Preparing download tasks...".to_string());
@@ -1555,10 +1517,18 @@ async fn refresh_account(
 
 /// Detect Java installations on the system
 #[tauri::command]
+async fn detect_all_java_installations(
+    app_handle: tauri::AppHandle,
+) -> Result<Vec<core::java::JavaInstallation>, String> {
+    Ok(core::java::detect_all_java_installations(&app_handle).await)
+}
+
+/// Alias for detect_all_java_installations (for backward compatibility)
+#[tauri::command]
 async fn detect_java(
     app_handle: tauri::AppHandle,
 ) -> Result<Vec<core::java::JavaInstallation>, String> {
-    Ok(core::java::detect_all_java_installations(&app_handle))
+    Ok(core::java::detect_all_java_installations(&app_handle).await)
 }
 
 /// Get recommended Java for a specific Minecraft version
@@ -1566,7 +1536,7 @@ async fn detect_java(
 async fn get_recommended_java(
     required_major_version: Option<u64>,
 ) -> Result<Option<core::java::JavaInstallation>, String> {
-    Ok(core::java::get_recommended_java(required_major_version))
+    Ok(core::java::get_recommended_java(required_major_version).await)
 }
 
 /// Get Adoptium Java download info
@@ -1579,7 +1549,9 @@ async fn fetch_adoptium_java(
         "jdk" => core::java::ImageType::Jdk,
         _ => core::java::ImageType::Jre,
     };
-    core::java::fetch_java_release(major_version, img_type).await
+    core::java::fetch_java_release(major_version, img_type)
+        .await
+        .map_err(|e| e.to_string())
 }
 
 /// Download and install Adoptium Java
@@ -1595,13 +1567,17 @@ async fn download_adoptium_java(
         _ => core::java::ImageType::Jre,
     };
     let path = custom_path.map(std::path::PathBuf::from);
-    core::java::download_and_install_java(&app_handle, major_version, img_type, path).await
+    core::java::download_and_install_java(&app_handle, major_version, img_type, path)
+        .await
+        .map_err(|e| e.to_string())
 }
 
 /// Get available Adoptium Java versions
 #[tauri::command]
 async fn fetch_available_java_versions() -> Result<Vec<u32>, String> {
-    core::java::fetch_available_versions().await
+    core::java::fetch_available_versions()
+        .await
+        .map_err(|e| e.to_string())
 }
 
 /// Fetch Java catalog with platform availability (uses cache)
@@ -1609,7 +1585,9 @@ async fn fetch_available_java_versions() -> Result<Vec<u32>, String> {
 async fn fetch_java_catalog(
     app_handle: tauri::AppHandle,
 ) -> Result<core::java::JavaCatalog, String> {
-    core::java::fetch_java_catalog(&app_handle, false).await
+    core::java::fetch_java_catalog(&app_handle, false)
+        .await
+        .map_err(|e| e.to_string())
 }
 
 /// Refresh Java catalog (bypass cache)
@@ -1617,7 +1595,9 @@ async fn fetch_java_catalog(
 async fn refresh_java_catalog(
     app_handle: tauri::AppHandle,
 ) -> Result<core::java::JavaCatalog, String> {
-    core::java::fetch_java_catalog(&app_handle, true).await
+    core::java::fetch_java_catalog(&app_handle, true)
+        .await
+        .map_err(|e| e.to_string())
 }
 
 /// Cancel current Java download
@@ -2060,7 +2040,7 @@ async fn install_forge(
         config.java_path.clone()
     } else {
         // Try to find a suitable Java installation
-        let javas = core::java::detect_all_java_installations(app_handle);
+        let javas = core::java::detect_all_java_installations(app_handle).await;
         if let Some(java) = javas.first() {
             java.path.clone()
         } else {
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 1f7ebe9..a64d7e9 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -3,10 +3,10 @@
   "version": "0.2.0-alpha.1",
   "identifier": "com.dropout.launcher",
   "build": {
-    "beforeDevCommand": "pnpm --filter @dropout/ui dev",
-    "beforeBuildCommand": "pnpm --filter @dropout/ui build",
+    "beforeDevCommand": "pnpm --filter @dropout/ui-new dev",
+    "beforeBuildCommand": "pnpm --filter @dropout/ui-new build",
     "devUrl": "http://localhost:5173",
-    "frontendDist": "../packages/ui/dist"
+    "frontendDist": "../packages/ui-new/dist"
   },
   "app": {
     "windows": [