diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index dc214e2b..b99d3182 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -66,35 +66,35 @@ jobs:
           run_install: |
             - recursive: true
 
-      - name: Build preload plugins
+      - name: Build preload script
         run: |
-          cd plugins
+          cd packages/preload
           pnpm build
 
       - name: Build core (windows)
         if: runner.os == 'Windows'
-        run: msbuild.exe pengu.sln -t:build -p:Configuration=Release -p:Platform=x64
+        run: msbuild.exe pengu.slnx -t:build -p:Configuration=Release -p:Platform=x64
 
       - name: Build core (macos)
         if: runner.os == 'macOS'
         run: make release
 
-      - name: Build loader
+      - name: Build app-hub
         uses: tauri-apps/tauri-action@v0
         with:
-          projectPath: "loader"
+          projectPath: "packages/hub"
           args: ${{ matrix.tauri_args }}
 
-      - name: Move loader output (windows)
+      - name: Move app-hub output (windows)
         if: runner.os == 'Windows'
         run: |
-          cp "loader/src-tauri/target/release/Pengu Loader.exe" bin/
+          cp "packages/hub/src-tauri/target/release/Pengu Loader.exe" bin/
 
-      - name: Move loader output (macos)
+      - name: Move app-hub output (macos)
         if: runner.os == 'macOS'
         run: |
-          cp -r "loader/src-tauri/target/universal-apple-darwin/release/bundle/macos/Pengu Loader.app" bin/
-          cp "loader/src-tauri/target/universal-apple-darwin/release/bundle/dmg/"*.dmg bin/
+          cp -r "packages/hub/src-tauri/target/universal-apple-darwin/release/bundle/macos/Pengu Loader.app" bin/
+          cp "packages/hub/src-tauri/target/universal-apple-darwin/release/bundle/dmg/"*.dmg bin/
 
       - name: Upload build output
         uses: actions/upload-artifact@v4
diff --git a/.gitignore b/.gitignore
index c73dd52f..a864b74e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -230,9 +230,7 @@ PublishScripts/
 # NuGet Symbol Packages
 *.snupkg
 # The packages folder can be ignored because of Package Restore
-**/[Pp]ackages/*
 # except build/, which is used as an MSBuild target.
-!**/[Pp]ackages/build/
 # Uncomment if necessary however generally it will be regenerated when needed
 #!**/[Pp]ackages/repositories.config
 # NuGet v3's project.json files produces more ignorable files
@@ -456,6 +454,4 @@ Temporary Items
 ### Project defines ###
 
 bin/*
-packages/
-include/
 *.g.h
\ No newline at end of file
diff --git a/app/.gitkeep b/app/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/core/core.vcxproj b/core/core.vcxproj
index c023ba61..3d82a756 100644
--- a/core/core.vcxproj
+++ b/core/core.vcxproj
@@ -50,6 +50,7 @@
     <Keyword>Win32Proj</Keyword>
     <RootNamespace>core</RootNamespace>
     <WindowsTargetPlatformVersion>10.0</WindowsTargetPlatformVersion>
+    <ShowAllFiles>true</ShowAllFiles>
   </PropertyGroup>
   <Import Project="$(VCTargetsPath)\Microsoft.Cpp.Default.props" />
   <PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|x64'" Label="Configuration">
diff --git a/core/core.vcxproj.filters b/core/core.vcxproj.filters
deleted file mode 100644
index 7fdaef2b..00000000
--- a/core/core.vcxproj.filters
+++ /dev/null
@@ -1,104 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<Project ToolsVersion="4.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
-  <ItemGroup>
-    <Filter Include="src">
-      <UniqueIdentifier>{4FC737F1-C7A5-4376-A066-2A32D752A2FF}</UniqueIdentifier>
-      <Extensions>cpp;c;cc;cxx;def;odl;idl;hpj;bat;asm;asmx</Extensions>
-    </Filter>
-    <Filter Include="res">
-      <UniqueIdentifier>{f7fb3482-8bb9-4289-8727-31c4e42d8158}</UniqueIdentifier>
-    </Filter>
-    <Filter Include="src\browser">
-      <UniqueIdentifier>{dfeda954-1c41-4771-8da2-c733492503fa}</UniqueIdentifier>
-    </Filter>
-    <Filter Include="src\renderer">
-      <UniqueIdentifier>{d97c7ba6-93de-4f95-81f6-e18b2c0ba005}</UniqueIdentifier>
-    </Filter>
-    <Filter Include="src\utils">
-      <UniqueIdentifier>{e0b1c27d-cfeb-41e1-87e3-5f64c8ddc7fd}</UniqueIdentifier>
-    </Filter>
-  </ItemGroup>
-  <ItemGroup>
-    <ClCompile Include="src\dllmain.cc">
-      <Filter>src</Filter>
-    </ClCompile>
-    <ClCompile Include="src\libcef.cc">
-      <Filter>src</Filter>
-    </ClCompile>
-    <ClCompile Include="src\browser\assets.cc">
-      <Filter>src\browser</Filter>
-    </ClCompile>
-    <ClCompile Include="src\browser\browser.cc">
-      <Filter>src\browser</Filter>
-    </ClCompile>
-    <ClCompile Include="src\browser\devtools.cc">
-      <Filter>src\browser</Filter>
-    </ClCompile>
-    <ClCompile Include="src\browser\riotclient.cc">
-      <Filter>src\browser</Filter>
-    </ClCompile>
-    <ClCompile Include="src\config.cc">
-      <Filter>src</Filter>
-    </ClCompile>
-    <ClCompile Include="src\renderer\renderer.cc">
-      <Filter>src\renderer</Filter>
-    </ClCompile>
-    <ClCompile Include="src\dllproxy.cc">
-      <Filter>src</Filter>
-    </ClCompile>
-    <ClCompile Include="src\browser\keyboard.cc">
-      <Filter>src\browser</Filter>
-    </ClCompile>
-    <ClCompile Include="src\renderer\v8_datastore.cc">
-      <Filter>src\renderer</Filter>
-    </ClCompile>
-    <ClCompile Include="src\renderer\v8_helper.cc">
-      <Filter>src\renderer</Filter>
-    </ClCompile>
-    <ClCompile Include="src\utils\cefstr.cc">
-      <Filter>src\utils</Filter>
-    </ClCompile>
-    <ClCompile Include="src\utils\dylib.cc">
-      <Filter>src\utils</Filter>
-    </ClCompile>
-    <ClCompile Include="src\utils\file.cc">
-      <Filter>src\utils</Filter>
-    </ClCompile>
-    <ClCompile Include="src\utils\shell.cc">
-      <Filter>src\utils</Filter>
-    </ClCompile>
-    <ClCompile Include="src\utils\window.cc">
-      <Filter>src\utils</Filter>
-    </ClCompile>
-  </ItemGroup>
-  <ItemGroup>
-    <None Include="res\module.def">
-      <Filter>res</Filter>
-    </None>
-    <None Include="src\utils\cocoa.mm">
-      <Filter>src\utils</Filter>
-    </None>
-  </ItemGroup>
-  <ItemGroup>
-    <ResourceCompile Include="res\resource.rc">
-      <Filter>res</Filter>
-    </ResourceCompile>
-  </ItemGroup>
-  <ItemGroup>
-    <ClInclude Include="src\hook.h">
-      <Filter>src</Filter>
-    </ClInclude>
-    <ClInclude Include="src\renderer\v8_wrapper.h">
-      <Filter>src\renderer</Filter>
-    </ClInclude>
-    <ClInclude Include="src\browser\browser.h">
-      <Filter>src\browser</Filter>
-    </ClInclude>
-    <ClInclude Include="src\platform.h">
-      <Filter>src</Filter>
-    </ClInclude>
-    <ClInclude Include="src\pengu.h">
-      <Filter>src</Filter>
-    </ClInclude>
-  </ItemGroup>
-</Project>
\ No newline at end of file
diff --git a/makefile b/core/makefile
similarity index 89%
rename from makefile
rename to core/makefile
index d4fb72a5..97da5f07 100644
--- a/makefile
+++ b/core/makefile
@@ -1,8 +1,8 @@
 VERSION := 1.2.0
 
 # Directories
-SRC_DIR := core/src
-BIN_DIR := bin
+SRC_DIR := ./src
+BIN_DIR := ../bin
 OBJ_DIR := $(BIN_DIR)/obj
 PLUGINS_DIR := $(BIN_DIR)/plugins
 
@@ -23,12 +23,12 @@ TARGET_LIB_PATH := $(TARGET_LIB_DIR)/libEGL.dylib
 # Compiler
 CC := clang
 CXX := clang++
-CXXFLAGS := -std=c++20 -fPIC -arch x86_64 -I./core/cef -I./core/src -fvisibility=hidden -Wno-address-of-temporary -Wno-nonportable-include-path
+CXXFLAGS := -std=c++20 -fPIC -arch x86_64 -I./cef -I./src -fvisibility=hidden -Wno-address-of-temporary -Wno-nonportable-include-path
 
 # Linker
 LDFLAGS := -shared -dynamiclib -arch x86_64 -current_version $(VERSION) -compatibility_version 1.0.0
-LDLIBS := -framework cocoa -Lcore/cef/lib/mac -weak-lcef.d -flat_namespace
-
+LDLIBS := -framework cocoa -L./cef/lib/mac -weak-lcef.d -flat_namespace
+	
 # Source files
 CPP_SRCS := $(wildcard $(SRC_DIR)/*.cc) $(wildcard $(SRC_DIR)/**/*.cc)
 OBJCXX_SRCS := $(wildcard $(SRC_DIR)/**/*.mm)
@@ -67,7 +67,7 @@ $(LIB_OUT_PATH): $(CPP_OBJS) $(OBJCXX_OBJS)
 #	@install_name_tool -change "libcef.d.dylib" "@loader_path/../Chromium Embedded Framework" $@
 
 $(INSERT_DYLIB_PATH):
-	$(CC) -O2 -o $@ core/insert_dylib.c
+	$(CC) -O2 -o $@ ./insert_dylib.c
 
 install: $(LIB_OUT_PATH) $(INSERT_DYLIB_PATH)
 	cp -n $(TARGET_LIB_PATH) $(TARGET_LIB_PATH).bak || true
diff --git a/core/src/renderer/renderer.cc b/core/src/renderer/renderer.cc
index 544079a7..6fd67d2c 100644
--- a/core/src/renderer/renderer.cc
+++ b/core/src/renderer/renderer.cc
@@ -193,23 +193,43 @@ static void LoadPlugins(V8Object *window)
     window->set(&u"Pengu"_s, pengu, V8_PROPERTY_ATTRIBUTE_READONLY);
 }
 
-static void ExecutePreloadScript(cef_frame_t *frame)
+// Execute the preload script synchronously in the main-frame V8 context.
+//
+// Uses cef_v8context_t::eval rather than cef_frame_t::execute_java_script —
+// the former runs synchronously inside OnContextCreated, the latter posts the
+// script as a renderer task that may be drained after HTML parsing has begun
+// and inline classic <script> tags have already executed. Running synchronously
+// here ensures Pengu's RCP wrap and global exposures are in place before any
+// of LCUX's own scripts can dispatch riotPlugin.announce:* events.
+//
+// Note: top-level statements inside the preload IIFE run synchronously, but
+// any dynamic import() calls inside still resolve asynchronously — that's the
+// remaining gap load-hooks.ts papers over for late-load/DOMContentLoaded
+// listener registrations.
+static void ExecutePreloadScript(cef_v8context_t *context)
 {
+    cef_v8value_t *retval = nullptr;
+    cef_v8exception_t *exception = nullptr;
+
 #ifdef _DEBUG
     void *buffer; size_t length;
-    path preload_path = config::loader_dir() / "../plugins/dist/preload.js";
+    path preload_path = config::loader_dir() / "../packages/preload/dist/preload.js";
 
     if (file::read_file(preload_path, &buffer, &length))
     {
         CefStr script((const char *)buffer, length);
-        frame->execute_java_script(frame, &script, &u"https://plugins/@/preload"_s, 1);
+        context->eval(context, &script,
+            &u"https://plugins/@/preload"_s, 1, &retval, &exception);
         free(buffer);
     }
 #else
-#   include "../../plugins/dist/preload.g.h"
+#   include "../../packages/preload/dist/preload.g.h"
     CefStr script{ (const char *)_preload_script, _preload_script_size };
-    frame->execute_java_script(frame, &script, nullptr, 1);
+    context->eval(context, &script, nullptr, 1, &retval, &exception);
 #endif
+
+    if (retval)    retval->base.release(&retval->base);
+    if (exception) exception->base.release(&exception->base);
 }
 
 static decltype(cef_render_process_handler_t::on_context_created) OnContextCreated;
@@ -235,7 +255,7 @@ static void CEF_CALLBACK Hooked_OnContextCreated(
         ExposeOsObject(reinterpret_cast<V8Object *>(window));
         ExposeNativeFunctions(reinterpret_cast<V8Object *>(window));
         LoadPlugins(reinterpret_cast<V8Object *>(window));
-        ExecutePreloadScript(frame);
+        ExecutePreloadScript(context);
     }
 
     OnContextCreated(self, browser, frame, context);
diff --git a/docs/design.md b/docs/design.md
new file mode 100644
index 00000000..df3e7f9d
--- /dev/null
+++ b/docs/design.md
@@ -0,0 +1,580 @@
+# Pengu Loader — Design
+
+This document describes the architecture of Pengu Loader as it stands on the `main` branch (v1.2.0, unreleased). It supersedes the earlier `HOW_IT_WORKS.md` (last updated for v0.6.0) and is written for contributors to Pengu itself; it also covers enough of the runtime surface to be useful to plugin authors.
+
+> **Version map.** Production today still ships **v1.1.6**, a Windows-only WPF/.NET Framework loader that uses IFEO injection and disables plugins by renaming `index.js` to `index.js_`. **v1.2.0** is the unreleased cross-platform rewrite documented here. The Tauri-based loader UI in [`packages/hub/`](../packages/hub/) is itself transitional — the planned final form is a from-scratch .NET 10 host (WebView2 on Windows, WKWebView on macOS) living in [`app/`](../app/), at which point `packages/hub/` will be reduced to the SolidJS frontend it serves.
+
+---
+
+## 1. Overview
+
+Pengu Loader is a plugin loader for the **League of Legends Client UX** (LCUX), a CEF (Chromium Embedded Framework) based desktop app. It loads JavaScript plugins from disk into the running LCUX renderer, exposes a small native API surface to those plugins, and adds quality-of-life hooks (DevTools, transparency, hotkeys, super-potato mode, etc.).
+
+The project is split into three components:
+
+| Component | Path | Language | Role |
+| --- | --- | --- | --- |
+| **Core** | [`core/`](../core/) | C++20 | Native module loaded into LCUX's CEF processes (browser + renderer). Owns every CEF, libcef, and OS-level hook. |
+| **Preload** | [`packages/preload/`](../packages/preload/) | TypeScript (Vite/IIFE) | A single bundled script embedded into the core. Runs inside the renderer's V8 context to bootstrap the plugin runtime, expose JS APIs, and load user plugins. |
+| **Loader** | [`packages/hub/`](../packages/hub/) (Tauri, transitional) → [`app/`](../app/) (.NET 10, planned) | Rust + SolidJS today | A standalone GUI app that installs/uninstalls the core, manages plugins, and watches for LCUX launches on macOS. **Not loaded into LCUX itself.** |
+
+The core is the only component that actually runs inside LCUX. The preload is *embedded* into the core at build time and executed as JavaScript in the main renderer's V8 context. The loader is just an installer/manager.
+
+```
+┌─────────────────────────────────────────────────────────────┐
+│ Riot Client Services (RCS)                                  │
+│   spawns LCUX with --app-port=<rand> --app-token=<rand>     │
+└────────────────┬────────────────────────────────────────────┘
+                 │
+                 ▼
+┌─────────────────────────────────────────────────────────────┐
+│ LeagueClientUx.exe          (CEF browser process)           │
+│   ╔═══════════════════════════════════════════════════════╗ │
+│   ║ core.{dll,dylib} loaded via IFEO / symlink / dylib    ║ │
+│   ║   • hooks libcef exports (cef_initialize, ...)        ║ │
+│   ║   • registers https://plugins/ and https://riotclient ║ │
+│   ║   • injects itself into renderer children             ║ │
+│   ║   • window manipulation + transparency                ║ │
+│   ║   • DevTools, hotkeys, IPC                            ║ │
+│   ╚═══════════════════════════════════════════════════════╝ │
+└────────────────┬────────────────────────────────────────────┘
+                 │  spawns
+                 ▼
+┌─────────────────────────────────────────────────────────────┐
+│ LeagueClientUxRender.exe --type=renderer                    │
+│   ╔═══════════════════════════════════════════════════════╗ │
+│   ║ same core module (injected via CreateProcessW hook)   ║ │
+│   ║   • hooks cef_execute_process → OnContextCreated      ║ │
+│   ║   • exposes window.Pengu, window.__native, window.os  ║ │
+│   ║   • runs embedded preload.js                          ║ │
+│   ║     → loads each plugin via                           ║ │
+│   ║       import('https://plugins/<entry>')               ║ │
+│   ╚═══════════════════════════════════════════════════════╝ │
+└─────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 2. Core module
+
+### 2.1 Process targeting
+
+The core is a single shared library (`core.dll` on Windows, `core.dylib` on macOS) that handles both CEF roles by inspecting the host executable name on load.
+
+In [`dllmain.cc`](../core/src/dllmain.cc):
+
+- If the host exe name contains `LeagueClientUx.exe` (Windows) or is `LeagueClientUx` (macOS), `HookBrowserProcess()` runs.
+- If the host is `LeagueClientUxRender.exe` (Windows) or `LeagueClientUx Helper (Renderer)` (macOS) **and** the command line includes `--type=renderer`, `HookRendererProcess()` runs.
+- Anything else (sandbox helpers, GPU helpers, crashpad) is left alone.
+
+On Windows the browser process additionally hooks `CreateProcessW` to detect renderer children being spawned. When a `LeagueClientUxRender.exe ... --type=renderer` is created, the hook:
+
+1. Adds `CREATE_SUSPENDED` to the creation flags.
+2. After the call returns, uses `VirtualAllocEx` + `WriteProcessMemory` + `CreateRemoteThread` with `LoadLibraryW` to inject the core DLL into the child.
+3. Resumes the thread.
+
+This is needed because IFEO only fires on the parent process — children don't inherit it. The renderer DLL has to be injected explicitly.
+
+On macOS the dylib injection happens once into `libEGL.dylib` inside the CEF framework (see [§2.3](#23-activation-paths) below); CEF then loads the same dylib into both browser and renderer processes naturally, so no `CreateProcessW`-equivalent is needed.
+
+### 2.2 CEF binding style — no libcef_wrapper
+
+Pengu uses CEF's **C API** (`cef_*_t` structs of function pointers) directly rather than the `libcef_wrapper` C++ wrapper. The reasons are documented in [`pengu.h:32-75`](../core/src/pengu.h#L32-L75):
+
+- Performance: avoids the wrapper's virtual-call layer.
+- Hooking: function pointers in C structs are easier to swap than vtable methods.
+- Distribution: no need to ship `libcef_wrapper.lib` and match its compiler/runtime.
+
+The `cef_bind_method` macro and `CefRefCount<T>` template in [`pengu.h`](../core/src/pengu.h) let C++ classes plug member functions straight into C-API function-pointer slots, with a `static_assert` to catch ABI drift when CEF headers change.
+
+### 2.3 Activation paths
+
+How does `core.dll/dylib` get loaded into LCUX in the first place? Three modes, exposed in the loader UI as `Universal`, `Targeted`, `OnDemand`:
+
+#### Windows — IFEO (Universal, default)
+
+[`packages/hub/src-tauri/src/windows/mod_ifeo.rs`](../packages/hub/src-tauri/src/windows/mod_ifeo.rs) writes a registry value:
+
+```
+HKLM\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Image File Execution Options\
+    LeagueClientUx.exe\
+        Debugger = rundll32 "C:\path\to\core.dll", #6000
+```
+
+When Windows launches `LeagueClientUx.exe`, the IFEO `Debugger` value redirects through `rundll32`, which loads `core.dll` and calls its ordinal-6000 export. That export ([`_BootstrapEntry` in `dllmain.cc`](../core/src/dllmain.cc#L120-L159)):
+
+1. Re-launches the original `LeagueClientUx.exe` with `CREATE_SUSPENDED | DEBUG_ONLY_THIS_PROCESS`.
+2. Strips the debugger flag via `NtRemoveProcessDebug` (so the process doesn't actually run under a debugger — `DEBUG_ONLY_THIS_PROCESS` is just used to prevent IFEO from re-firing).
+3. Injects `core.dll` into the new process via `CreateRemoteThread → LoadLibraryW`.
+4. Resumes the suspended thread.
+
+This is loosely the same idea as the original Mecha injector (per the v0.6.0 doc) but uses `rundll32` rather than Detours and immediately removes the debugger to avoid CEF performance penalties.
+
+Vanguard does **not** scan or block this path: LCUX and `LeagueClientUxRender.exe` are explicitly scope-excluded from Vanguard's anti-cheat boundary, and `core.dll` itself lives outside the LoL install directory.
+
+#### Windows — symlink + dllproxy (Targeted, fallback)
+
+Some environments don't allow IFEO (locked-down domain policies, AV interference, etc.). The fallback in [`mod_symlink.rs`](../packages/hub/src-tauri/src/windows/mod_symlink.rs) creates a symlink in the LoL install folder pointing at `core.dll`:
+
+```
+<LoL>\version.dll  ───►  C:\path\to\core.dll
+```
+
+`version.dll` is the chosen target because LCUX statically links against it (so it loads on startup), and it's not a name Vanguard cares about. The legacy alternatives `d3d9.dll` and `dwrite.dll` still work but are less preferred. (The v0.6.0 doc described d3d9 proxying; that approach is functionally subsumed by the more flexible `version.dll` shape.)
+
+Because `LoadLibrary("version.dll")` will resolve to our DLL instead of `C:\Windows\System32\version.dll`, [`dllproxy.cc`](../core/src/dllproxy.cc) re-exports every symbol the real `version.dll` provides (`GetFileVersionInfo*`, `VerQueryValue*`, etc.) and forwards them to the system DLL on first call. `d3d9.dll` and `dwrite.dll` exports are also forwarded for compatibility.
+
+Symlink mode requires admin or Windows Developer Mode for the initial install, but uninstall does not.
+
+#### macOS — insert_dylib (OnDemand, only model)
+
+There is no IFEO on macOS, and no equivalent of in-process DLL hijacking that survives Riot Client launching LCUX. The chosen approach: when the user opens LoL, the loader (running in the tray) injects the dylib by patching a CEF framework binary in place.
+
+[`packages/hub/src-tauri/src/macos/socket.rs`](../packages/hub/src-tauri/src/macos/socket.rs) runs a daemon thread that subscribes to Riot Client Services' WAMP WebSocket on `/product-session/v1/sessions/...`. When a session for `productId == "league_of_legends"` is created, the daemon calls [`core::install_module`](../packages/hub/src-tauri/src/macos/core.rs):
+
+1. Backs up `League of Legends.app/Contents/Frameworks/Chromium Embedded Framework.framework/Libraries/libEGL.dylib` to `libEGL.dylib.bak`.
+2. Uses `insert_dylib` (either the bundled `core/insert_dylib.c` Rust port, or an external binary if present in `bin/`) to add a `LC_LOAD_DYLIB` load command pointing at `core.dylib`.
+3. CEF loads `libEGL.dylib` into both the LCUX process and its renderer Helper, dragging `core.dylib` along with it.
+
+When LCUX closes (`Delete` event on the same WAMP topic), the daemon restores the backup. This is the model the loader UI calls **OnDemand**.
+
+OnDemand is a defined enum value on Windows too but is not wired up — IFEO is strictly more reliable there.
+
+### 2.4 CEF version pinning
+
+[`libcef.cc`](../core/src/libcef.cc) refuses to attach if the runtime libcef major version doesn't match the headers Pengu was compiled against:
+
+```cpp
+if (get_version == nullptr || get_version(0) != CEF_VERSION_MAJOR)
+{
+    if (is_browser)
+        dialog::alert("Pengu does not support your Client version.", "Pengu Loader");
+    return false;
+}
+```
+
+Pengu currently targets **CEF 108** (commit `bf18f34`, headers under [`core/cef/`](../core/cef/)). Riot bumps LCUX's CEF major version roughly every two years, and each bump requires a Pengu release with new headers and possibly updated patterns (see next section).
+
+### 2.5 Transparency hook (`CefContext::GetBackgroundColor`)
+
+CEF, unlike Electron's patched Chromium, hardcodes white as the compositor root paint colour when alpha is zero. Setting `cef_browser_settings_t.background_color = 0` at create time isn't honoured end-to-end — the renderer still paints opaque white behind transparent UI, defeating any `WS_EX_LAYERED` / `NSVisualEffectView` work the loader does on the host window.
+
+The fix in [`libcef.cc:11-25`](../core/src/libcef.cc#L11-L25) is a memory pattern scan inside libcef for the unexported `CefContext::GetBackgroundColor` function:
+
+```cpp
+#if OS_WIN
+const char *pattern = "41 83 F8 01 74 0B 41 83 F8 02 75 0A 45 31 C0";
+#elif OS_MAC
+const char *pattern = "55 48 89 E5 83 FA 01 74 ?? 83 FA 02 75 ??";
+#endif
+```
+
+Once located, the function is hooked to unconditionally return `0` (transparent). With the compositor returning transparent, the host window's vibrancy/Mica/acrylic effect actually shows through. See PenguLoader/PenguLoader#25 for the full investigation history.
+
+The patterns are stable for the lifetime of a CEF major version (~2 years). Updating Pengu for a new CEF major requires re-deriving them by hand against the new `libcef.dll`/`libcef.dylib`.
+
+### 2.6 Cache path
+
+[`browser.cc`](../core/src/browser/browser.cc) overrides `cef_settings_t.cache_path` and `root_cache_path` in the `cef_initialize` hook, and `cef_request_context_settings_t.cache_path` in the `CreateContext` hook, pointing them at:
+
+- Windows: `%LOCALAPPDATA%\Riot Games\League of Legends\Cache`
+- macOS: `/Users/Shared/Riot Games/League Client/Cache`
+
+**Why.** Up to and including 2024 / CEF 108, Riot didn't set any cache path on LCUX, so the client effectively ran in incognito mode — every session re-downloaded fonts, images, partner-iframe assets, etc. Pengu's override gives LCUX a real on-disk cache, making iframes and external resources noticeably faster.
+
+Riot eventually started providing their own cache path (under `<LoL>/Saved/webcache`). The v1.2.0 `main` branch always overrides; the `refactor-2` branch contains a deferral fix (only set if Riot left the field empty), which will be ported back. Vanguard does not interact with cache files.
+
+The `root_cache_path` set is required by CEF 108+, which warns/errors if it's missing (commit `d6aef96`).
+
+---
+
+## 3. Browser-process hooks
+
+The browser process is the CEF process that owns windows, IO, and the CEF browser host objects. Pengu hooks four libcef exports here.
+
+### 3.1 `cef_initialize` — settings and command line
+
+[`browser.cc:204-235`](../core/src/browser/browser.cc#L204-L235):
+
+- Wraps `app->on_before_command_line_processing` so we can shape the cmdline (next subsection).
+- Sets `cache_path` and `root_cache_path` (see [§2.6](#26-cache-path)).
+
+### 3.2 Command-line shaping — `OnBeforeCommandLineProcessing`
+
+Riot bakes a number of switches into LCUX's command line. Pengu intercepts the callback to:
+
+1. **Capture RCS credentials** for the `https://riotclient/` proxy if `use_riotclient` is enabled. The `--riotclient-app-port` and `--riotclient-auth-token` switches are stripped by CEF *after* this callback returns, so this is the only safe point to read them ([`browser.cc:138-142`](../core/src/browser/browser.cc#L138-L142)). The mechanism is pragmatic and acknowledged-fragile.
+2. **Strip `--no-proxy-server`** if `use_proxy` is set, by rebuilding the entire command line via `init_from_string`.
+3. **Append `--remote-debugging-port=<port>`** if `debug_port` is set in config (undocumented; see [§3.5](#35-devtools-built-in-and-remote)).
+4. **Append `--disable-web-security`** if `isecure_mode` is set.
+5. **Optimisation switches** (`optimized_client`, default on): `disable-background-timer-throttling`, `disable-backgrounding-occluded-windows`, `disable-renderer-backgrounding`, `disable-metrics`, `disable-component-update`, `disable-domain-reliability`, `disable-translate`, `disable-gpu-watchdog`, `disable-renderer-accessibility`, `no-sandbox`.
+6. **Super-potato switches** if enabled: `disable-smooth-scrolling`, `wm-window-animations-disabled`, `animation-duration-scale=0`.
+
+### 3.3 `cef_browser_host_create_browser` — main browser handshake
+
+LCUX creates many CEF browsers in its lifetime: the main UX shell, the auth popup, embedded eSports streams, partner iframes hosted as separate browsers, etc. Plugins should only load into the main shell.
+
+The detection in [`browser.cc:102-128`](../core/src/browser/browser.cc#L102-L128) checks the URL on `CreateBrowser`:
+
+```cpp
+if (url_.startw("https://riot:") && url_.endw("/bootstrap.html"))
+{
+    extra_info->set_null(extra_info, &u"is_main"_s);
+    HookMainBrowserClient(client);
+}
+```
+
+The `https://riot:` prefix matches the `riot:<token>@127.0.0.1:<port>` userinfo that RCS bakes into LCUX's URLs. The `bootstrap.html` filename is the very first page LCUX loads, which then redirects to `index.html` (the actual UI shell). This pattern has been stable across Client patches.
+
+Stamping `is_main` into the browser's `extra_info` dictionary is how the *renderer* side knows which browser is the main one — `extra_info` is passed through to `OnBrowserCreated` in the renderer process via CEF's IPC. See [§4](#4-renderer-process-hooks).
+
+For the main browser, [`HookMainBrowserClient`](../core/src/browser/browser.cc#L37-L100) wraps the client to:
+
+- Hook `get_keyboard_handler` for hotkeys ([§3.6](#36-hotkeys)).
+- Hook `get_life_span_handler` to wrap `on_after_created` and call `browser::setup_window` ([§3.7](#37-window-stack-and-transparency)).
+- Hook `on_process_message_received` for the renderer-to-browser IPC channel ([§3.8](#38-renderer-to-browser-ipc)).
+
+### 3.4 `cef_request_context_create_context` — custom schemes
+
+When a request context is created, Pengu registers two scheme handler factories on it:
+
+- **`https://plugins/`** — serves files out of the user's `plugins/` directory as ES modules. This is the heart of the plugin model and is documented in detail in [§6](#6-plugin-scheme-handler).
+- **`https://riotclient/`** — opt-in proxy to the Riot Client's REST/WS API. See [§3.9](#39-riotclient-proxy).
+
+Why the same `https` scheme rather than custom `pengu://`: the LCUX `index.html` historically had a CSP that only permitted `https://` origins (later relaxed to allow Riot partner iframes). Re-using `https` with a synthetic hostname avoids needing a CSP exemption and integrates cleanly with the rest of LCUX's web stack.
+
+### 3.5 DevTools (built-in and remote)
+
+DevTools is **off by default** in v1.2.0 (`use_devtools=false`). v1.1.6 had it on, v1.2.0 added a permission-gating model where users opt in.
+
+**Built-in DevTools** is opened from JavaScript via `OpenDevTools()` (or hotkeys F12 / Ctrl+Shift+I). The renderer sends an `@open-devtools` IPC process message; the browser-side handler in [`devtools.cc`](../core/src/browser/devtools.cc) calls `host->show_dev_tools(host, &wi, new DevToolsClient(browser_id), &settings, nullptr)`.
+
+The `DevToolsClient` argument is the key trick. League sets a non-1.0 zoom on the main browser host (e.g. 0.8× or 1.6× depending on user UI scale settings); if `show_dev_tools` is called with `nullptr` for the client, the DevTools window inherits that zoom and becomes unusable. Passing a fresh client decouples them. The custom client also installs a `DevToolsKeyboardHandler` for Ctrl±/Ctrl0 zoom (and Cmd-C/V/X fixes on macOS), and uses `window::get_scaling(window) - 1.0` as the initial zoom so DevTools defaults to 1.0× per-DPI.
+
+`devtools_map_` dedupes by parent browser ID — a second `OpenDevTools()` call brings the existing window to the foreground rather than opening a duplicate.
+
+**Remote DevTools** is enabled via the undocumented `debug_port` config option, which appends `--remote-debugging-port=<port>` to LCUX's command line. The user can then attach Chrome at `http://localhost:<port>/json`. It is undocumented because exposing remote control of the LCUX renderer over loopback is a real attack surface; advanced users can opt in by editing the config file directly.
+
+### 3.6 Hotkeys
+
+[`keyboard.cc`](../core/src/browser/keyboard.cc), gated on `use_hotkeys` (default on), main browser only:
+
+| Key (Win) | Key (Mac) | Effect |
+| --- | --- | --- |
+| F12 / Ctrl+Shift+I | F12 / Cmd+Alt+I | Open DevTools (also gated on `use_devtools`) |
+| Ctrl+Shift+R | Cmd+Alt+R | `browser->reload_ignore_cache` |
+| Ctrl+Shift+Enter | Cmd+Alt+Enter | Confirm dialog → `fetch('/riotclient/kill-and-restart-ux')` for full restart |
+
+All hotkeys are bypassed when focus is on an editable field, so they don't fight chat/search inputs.
+
+### 3.7 Window stack and transparency
+
+LCUX's window hierarchy on Windows ([`window.cc:53-66`](../core/src/browser/window.cc#L53-L66)):
+
+```
+RCLIENT                               <- Riot Client top-level window
+  CefBrowserWindow                    <- default container by CreateBrowser()
+    Chrome_WidgetWin_0                <- the actual Chromium widget
+      Chrome_RenderWidgetHostHWND
+      Intermediate D3D Window
+```
+
+Out of the box, `CefBrowserWindow` has its own opaque background, which would defeat any layered-window transparency on `RCLIENT`. [`browser::setup_window`](../core/src/browser/window.cc#L68-L113) hides `CefBrowserWindow` and re-parents `Chrome_WidgetWin_0` directly to `RCLIENT` so the compositor's transparent output paints straight onto the host window.
+
+Combined with the [`GetBackgroundColor` hook](#25-transparency-hook-cefcontextgetbackgroundcolor) and the `apply_vibrancy` / `set_theme` calls (driven from JS via `Effect.apply`), this gives Electron-style Mica/acrylic/blur-behind on Windows and `NSVisualEffectView` material on macOS.
+
+On macOS, no re-parenting is needed; `browser::window` is just the CEF host's `NSView*` and `NSVisualEffectView` does the heavy lifting natively.
+
+#### Silent mode
+
+If `silent_mode` is enabled, [`window.cc:96-110`](../core/src/browser/window.cc#L96-L110) hooks `ShowWindow`, `SetWindowPos`, and the window's `WndProc` to suppress LCU's own foreground/topmost calls. This is for users who don't want LCU flashing or popping itself topmost on matchmaking-found / postgame events. As a side-effect, the post-game lobby will not auto-show the client window.
+
+### 3.8 Renderer-to-browser IPC
+
+The browser-side `on_process_message_received` handler ([`browser.cc:56-99`](../core/src/browser/browser.cc#L56-L99)) understands four message names from the renderer:
+
+| Message | Effect |
+| --- | --- |
+| `@open-devtools` | Calls `browser::open_devtools` (gated on `use_devtools`) |
+| `@reload-client` | `browser->reload_ignore_cache` |
+| `@set-window-vibrancy` | Calls `window::apply_vibrancy` or `clear_vibrancy` on the host window |
+| `@set-window-theme` | Calls `window::set_theme(dark)` |
+
+The renderer side sends these via `frame->send_process_message(PID_BROWSER, msg)` from the V8 helper functions in [`v8_helper.cc`](../core/src/renderer/v8_helper.cc).
+
+### 3.9 `https://riotclient/` proxy
+
+[`riotclient.cc`](../core/src/browser/riotclient.cc) registers an opt-in scheme handler that proxies `https://riotclient/<path>` to `https://127.0.0.1:<rcs_port>/<path>` with `Authorization: Basic base64("riot:<rcs_token>")` injected and `Access-Control-Allow-Origin: *` to let LCUX's web context call it.
+
+LCUX already proxies many Riot endpoints under its own `/riotclient/...` path internally, so most plugins never need this. The custom scheme exists for the rare cases where a plugin needs an RCS endpoint LCUX doesn't re-expose (multi-product session info, account-switching, etc.).
+
+It is **off by default** (`use_riotclient=false`), historically default-on but tightened in v1.2.0 alongside the rest of the permission model — handing every loaded plugin a Basic-auth-injected channel to RCS is risky if any plugin is malicious. The credential extraction described in [§3.2](#32-command-line-shaping--onbeforecommandlineprocessing) is fragile and is a known weak point.
+
+---
+
+## 4. Renderer-process hooks
+
+The renderer process runs V8 and Blink. Pengu hooks the renderer-side `cef_execute_process` to attach to its `cef_render_process_handler_t`, then wires up two callbacks.
+
+### 4.1 `OnBrowserCreated` — adopt the `is_main` flag
+
+[`renderer.cc:259-268`](../core/src/renderer/renderer.cc#L259-L268):
+
+```cpp
+is_main_ = extra_info && extra_info->has_key(extra_info, &u"is_main"_s);
+```
+
+The `extra_info` dictionary is the same one stamped by the browser side in [§3.3](#33-cef_browser_host_create_browser--main-browser-handshake). When the renderer process is servicing the main shell's browser, `is_main_` becomes `true`.
+
+> **Known issue.** `is_main_` is a per-process global reassigned on every `OnBrowserCreated`. If CEF ever reuses one renderer process for both a main and a non-main browser, the flag flickers. The narrowing URL check in `OnContextCreated` (next section) saves us in practice, but this is belt-and-suspenders, not a guarantee.
+
+### 4.2 `OnContextCreated` — main-frame plugin injection
+
+For each new V8 context, [`renderer.cc:215-242`](../core/src/renderer/renderer.cc#L215-L242):
+
+1. Checks `is_main_ && url.startw("https://riot:") && url.endw("/index.html")`. Sub-browsers, popups, and the bootstrap step itself are skipped.
+2. Calls three setup functions:
+   - `ExposeOsObject` — `window.os = { name, version, build }` (per-platform values from [`platform.h`](../core/src/platform.h)).
+   - `ExposeNativeFunctions` — `window.__native = { OpenDevTools, OpenPluginsFolder, ReloadClient, SetWindowTheme, SetWindowVibrancy, LoadDataStore, SaveDataStore }`. The preload reads these and then `delete window.__native` so plugins can't use them directly.
+   - `LoadPlugins` — populates `window.Pengu = { version, plugins, disabledPlugins, superPotato, isMac }` where `plugins` is an array of plugin entry paths discovered on disk.
+3. Runs the embedded preload script via `frame->execute_java_script`.
+
+### 4.3 Plugin discovery
+
+[`get_plugin_entries`](../core/src/renderer/renderer.cc#L15-L78) walks the configured plugins directory and recognises three layouts:
+
+```
+plugins/
+  plugin-name.js              — top-level JS file
+  plugin-name/
+    index.js                  — plugin folder
+  @author/
+    plugin-name/
+      index.js                — author-namespaced plugin
+```
+
+Names starting with `_` or `.` are skipped. Subfolders inside an `@author` folder are also subject to the underscore/dot skip. The list of relative paths is passed to JS via `Pengu.plugins`.
+
+### 4.4 Native V8 handler
+
+`__native` is exposed via a single shared `cef_v8handler_t` ([`renderer.cc:80-119`](../core/src/renderer/renderer.cc#L80-L119)) that dispatches by function name into a `std::unordered_map<std::string, V8FunctionHandler>` populated from two entry tables:
+
+- [`v8_DataStoreEntries`](../core/src/renderer/v8_datastore.cc) — `LoadDataStore`, `SaveDataStore`.
+- [`v8_HelperEntries`](../core/src/renderer/v8_helper.cc) — `OpenDevTools`, `OpenPluginsFolder`, `ReloadClient`, `SetWindowVibrancy`, `SetWindowTheme`.
+
+The `OpenPluginsFolder` helper runs in-process (calls `shell::open_folder`); the others marshal to the browser process via process messages.
+
+---
+
+## 5. Preload bundle
+
+[`packages/preload/`](../packages/preload/) is a TypeScript codebase compiled by Vite into a single IIFE that runs at the top of every main-frame V8 context. Its entry is [`src/index.ts`](../packages/preload/src/index.ts), which imports two trees:
+
+- `./preload/` — the runtime bootstrap (DataStore, Effect, RCP/socket, plugin loader).
+- `./views/` — the in-client overlay UI (Solid components for plugin toggles, etc.).
+
+### 5.1 Build pipeline
+
+The Vite config in [`packages/preload/vite.config.ts`](../packages/preload/vite.config.ts) has two modes:
+
+**Dev (`vite dev`):** Vite serves the bundle on `https://localhost:3001`. esbuild emits `dist/preload.js` (IIFE) with a footer that imports `@vite/client` and `src/views/index.tsx` from the dev server, so HMR works inside LCUX. The C++ side, when `_DEBUG`, reads `dist/preload.js` from disk at runtime ([`renderer.cc:200`](../core/src/renderer/renderer.cc#L200)) and `execute_java_script`s it.
+
+**Build (`vite build`):** Vite emits `dist/preload.js`, then a custom `pengu-build` plugin emits `dist/preload.g.h` containing `_preload_script[]` as a C `unsigned char` array. The renderer `#include`s that header in non-debug builds and runs the embedded bytes ([`renderer.cc:209-211`](../core/src/renderer/renderer.cc#L209-L211)).
+
+> **Known issue.** The recent `7635b4c` refactor moved `plugins/` → `packages/preload/`, but the C++ paths in `renderer.cc` still reference `../plugins/dist/preload.js` and `../../plugins/dist/preload.g.h`, which no longer resolve. Release builds will fail until either the C++ paths are updated or the build emits to `core/plugins/dist/`. To be fixed.
+
+### 5.2 Plugin loader
+
+[`preload/loader.ts`](../packages/preload/src/preload/loader.ts) is the entry point that turns `Pengu.plugins` into actually loaded modules:
+
+1. **Filter disabled plugins.** `Pengu.disabledPlugins` arrives as a comma-separated string of FNV-1a 32-bit hashes (lowercased, forward-slash-normalised paths). The loader parses it into a `Set<number>`, hashes each entry, and filters out matches. Any entry matching `/^@default\//i` is also dropped — `@default/` was the v0.6 built-in plugin namespace from the old "League Loader" branding and is vestigial.
+2. **Dynamic-import each entry.** `await import('https://plugins/' + entry)`. This goes through the [`https://plugins/` scheme handler](#6-plugin-scheme-handler).
+3. **Init.** If the module exports an `init` function, await it with `{ rcp, socket, meta }`. `meta.name` is the plugin's folder name (omitted for top-level `name.js` plugins).
+4. **Load.** If the module exports `load` or `default` as a function, register it as a `window` `'load'` listener.
+
+The whole batch is wrapped in `Promise.all`, then `rcp.preInit('rcp-fe-common-libs', () => waitable)` blocks the first RCP plugin until plugin loading finishes, ensuring plugins see a consistent initial state.
+
+> **Known issue.** The hash-based disable mechanism is essentially untested in v1.2.0. v1.1.6 disables plugins by renaming `index.js` → `index.js_` on disk; the Tauri loader has partial backward-compat for that ([`packages/hub/src/lib/plugins.ts`](../packages/hub/src/lib/plugins.ts) `isIndex` checks `path += '_'`), but the end-to-end flow has not been validated.
+
+### 5.3 Public surface exposed to plugins
+
+After the preload runs, plugins see:
+
+- **`window.Pengu`** — `{ version, plugins, superPotato, isMac }` (frozen). `disabledPlugins` is consumed by the loader and removed.
+- **`window.os`** — `{ name, version, build }`.
+- **`window.DataStore`** — `{ has, get, set, remove }` for shared key-value storage.
+- **`window.Effect`** — `{ apply, clear, setTheme }` for window vibrancy/theme. Translates between Windows backdrop types (`transparent`, `blurbehind`, `acrylic`, `unified`, `mica` with sub-modes `auto/none/mica/acrylic/tabbed`) and macOS `NSVisualEffectMaterial` values.
+- **`window.rcp`** — `{ preInit, postInit, whenReady, get }`. Wraps Riot's plugin announce/registration mechanism so plugins can intercept other plugins' init.
+- **`window.rcp` is a `RCP` class instance**, but the global `rcp` and `socket` are also passed as `init` arguments to plugins.
+- **`window.openDevTools`**, **`openPluginsFolder`**, **`reloadClient`**, **`restartClient`**, **`getScriptPath`** — convenience helpers.
+
+`window.__native` is deleted from the global scope by [`api/native.ts`](../packages/preload/src/preload/api/native.ts) immediately after capture, so plugins must go through the typed wrappers.
+
+### 5.4 RCP hooks
+
+[`preload/rcp/hooks.ts`](../packages/preload/src/preload/rcp/hooks.ts) wraps `document.dispatchEvent` to intercept Riot's `riotPlugin.announce:<name>` events. Each announce carries a `registrationHandler` that gets wrapped so before/after callbacks registered via `rcp.preInit(name, fn)` and `rcp.postInit(name, fn)` fire at the right lifecycle points (before the registrar runs, after the registered API is fulfilled). `whenReady(name | names[])` returns a promise resolving to the plugin's API once it's fulfilled.
+
+This is the canonical way for plugins to extend or wrap LCUX's own "rcp-fe-*" frontend plugins.
+
+### 5.5 WAMP socket helper
+
+[`preload/rcp/socket.ts`](../packages/preload/src/preload/rcp/socket.ts) opens a WAMP WebSocket to LCUX's internal LCDS endpoint (URL provided by `rcp-fe-common-libs.context.socket._endpoint`) and exposes `socket.observe(api, listener)` / `disconnect(api, listener)`. The api string is normalised into LCDS's `OnJsonApiEvent_<path_with_underscores>` topic format (or `OnJsonApiEvent` when api is `'all'`).
+
+This is the standard way for plugins to subscribe to live LCU events (queue state, gameflow, summoner, etc.).
+
+### 5.6 Late-listener polyfills
+
+[`preload/load-hooks.ts`](../packages/preload/src/preload/load-hooks.ts) wraps `window.addEventListener` and `document.addEventListener` so that plugins registering for `load` / `DOMContentLoaded` *after* those events have already fired still get their listener invoked (via `setTimeout(listener, 1)`). Without this, plugins that bundle slowly enough to register past the `load` event would silently fail.
+
+### 5.7 Super-potato mode
+
+[`preload/super-potato.ts`](../packages/preload/src/preload/super-potato.ts), enabled when `Pengu.superPotato` is true:
+
+- Injects a global stylesheet that disables CSS transitions everywhere except a curated set of essential animations (spinners, vignette celebrations).
+- Wraps `document.createElement` to inject the same stylesheet into any new shadow root.
+- Calls Riot's `lol-settings/v1/local/lol-user-experience` endpoint to enable the in-game potato mode.
+
+Combined with the cmdline switches added by `optimized_client` and the super-potato cmdline switches in [§3.2](#32-command-line-shaping--onbeforecommandlineprocessing), this shaves significant CPU on low-end machines.
+
+---
+
+## 6. Plugin scheme handler
+
+The `https://plugins/` scheme handler ([`assets.cc`](../core/src/browser/assets.cc)) is the heart of the plugin model. It serves files out of the configured `plugins/` directory as ES modules, with on-the-fly module shims that mimic Vite's import semantics.
+
+### 6.1 Path resolution
+
+For a request to `https://plugins/<path>?<query>`:
+
+1. URL-decode the path.
+2. Resolve to `<plugins_dir>/<path>`.
+3. If the path ends in `/`, append `index.js`.
+4. If the leaf has no extension, try `<path>.js`, then `<path>/index.js`.
+5. If none of those exist, return 404.
+
+### 6.2 Module shims
+
+If the request `resource_type` is `RT_SCRIPT` (i.e. an `import` or `<script type="module">`), the handler picks one of these synthesized module sources based on the file extension and query string:
+
+| Match | Source served | Effect on `import` |
+| --- | --- | --- |
+| `?url` | `SCRIPT_IMPORT_URL` | `export default <url-with-query-stripped>` |
+| `?raw` | `SCRIPT_IMPORT_RAW` | `export default await fetch(url).then(r => r.text())` |
+| `.css` | `SCRIPT_IMPORT_CSS` | Appends `<link rel="stylesheet" href="<url>">` to body, exports nothing |
+| `.json` | `SCRIPT_IMPORT_JSON` | `export default JSON.parse(await fetch(url).then(r => r.text()))` |
+| Image / media / font (png, jpg, svg, mp4, woff2, ttf, …) | `SCRIPT_IMPORT_URL` | Same as `?url` — `import logo from './logo.png'` gives a URL string |
+| Anything else | Raw file bytes with MIME from `cef_get_mime_type` | Normal JS module |
+
+These shims are intentionally Vite-shaped so plugin authors used to Vite dev mode can write plain JS+CSS plugins without a bundler. Plugin authors using a bundler (esbuild, Rollup, etc.) typically don't need them and just import bundled output.
+
+### 6.3 Caching
+
+- **JavaScript modules** (any path served as `text/javascript`) get `Cache-Control: no-store`.
+- **All other assets** get `Cache-Control: max-age=31536000, immutable` plus an `ETag` derived from FNV-1a of the URL.
+
+The reason for `no-store` on JS specifically: LCUX's renderer URLs are stable across in-session reloads (Ctrl+Shift+R, custom DevTools reload). If JS were cached, the cache would survive a reload — and since the URL doesn't change, plugin authors couldn't iterate without restarting the entire client (which Riot's random-port handoff makes slow). Forcing fresh JS on every fetch lets reload do what users expect.
+
+Assets stay aggressively cached because they're heavy (textures, fonts, audio) and their content rarely changes; the ETag handles the rare update.
+
+### 6.4 Range requests
+
+Audio/video plugins occasionally need range support (e.g. seeking a long mp4). The handler parses `Range: bytes=<start>-<end>` headers and returns `206 Partial Content` with `Accept-Ranges`, `Content-Range`, and `Content-Length` set. Malformed ranges return `416 Requested Range Not Satisfiable`.
+
+### 6.5 CORS
+
+Every response sets `Access-Control-Allow-Origin: *`. This is needed because plugins are served from `https://plugins/` but consumed from the LCUX origin `https://127.0.0.1:<port>/`, and `fetch` from a plugin's own JS would otherwise hit CORS.
+
+---
+
+## 7. Loader
+
+The loader is a standalone GUI app responsible for installing/uninstalling the core, managing plugins, and (on macOS) watching for LCUX launches. It does **not** run inside LCUX.
+
+### 7.1 Today: Tauri (`packages/hub/`)
+
+The current loader is a Tauri app:
+
+- **Frontend** ([`packages/hub/src/`](../packages/hub/src/)) — SolidJS, Tailwind, Radix-style primitives. Pages: Splash, Welcome, Main (plugins, settings, store).
+- **Backend** ([`packages/hub/src-tauri/`](../packages/hub/src-tauri/)) — Rust with platform-split modules.
+
+Backend responsibilities:
+
+- **Config** ([`config.rs`](../packages/hub/src-tauri/src/config.rs)) — locates `core.dll`/`core.dylib` and `config` next to itself.
+- **Windows** ([`windows/`](../packages/hub/src-tauri/src/windows/)) — `mod_ifeo.rs` and `mod_symlink.rs` activation, WebView2 presence check, window shadow setup. UAC elevation via `runas` when admin is needed for IFEO writes.
+- **macOS** ([`macos/`](../packages/hub/src-tauri/src/macos/)) — RCS WAMP socket daemon, `insert_dylib` (Rust port + external binary fallback), system tray, startup-on-login, traffic-light hiding.
+- **Shell** ([`shell.rs`](../packages/hub/src-tauri/src/shell.rs)) — `expand_folder`, `reveal_file` for opening Explorer/Finder.
+
+The frontend invokes these Rust commands via `@tauri-apps/api`. Plugin metadata is parsed from JSDoc tags (`@description`, `@author`, `@link`) inside each plugin's entry file. The plugin store ([`store.ts`](../packages/hub/src/lib/store.ts)) fetches a YAML registry from `github.com/PenguLoader/plugin-store` — currently a placeholder with no plan to implement install automation.
+
+### 7.2 Future: `app/` (.NET 10)
+
+The Tauri implementation is planned to be replaced by a from-scratch .NET 10 host:
+
+- **Windows** — WebView2 hosting the SolidJS UI.
+- **macOS** — WKWebView hosting the SolidJS UI.
+
+`packages/hub/` will then contain only the SolidJS frontend assets; the host process and IPC (replacing Tauri's `invoke`) move into `app/`. The activation, plugin management, and macOS RCS-watcher logic carry over from the Rust backend in concept but get rewritten in C#.
+
+The `refactor-2` branch contains an older C# experiment that embedded the hub UI directly into the Riot Client window via DevTools Protocol attachment. It was deemed too complex and is not the basis for `app/`.
+
+### 7.3 Production: v1.1.6
+
+Until `app/` is ready, the actually shipped loader is **v1.1.6**, a Windows-only WPF / .NET Framework app. It uses IFEO activation, disables plugins by renaming `index.js` → `index.js_` on disk, and does not support macOS at all. The v1.2.0 codebase on `main` is not user-released.
+
+---
+
+## 8. Configuration
+
+The config file lives next to the loader binary as `config` (no extension). It's a plain `key = value` ini-style file with `;` and `#` for comments. Unknown keys are ignored; `loader_dir / "config"` is read at every option lookup but cached after the first miss/hit.
+
+| Key | Type | Default | Description |
+| --- | --- | --- | --- |
+| `plugins_dir` | path | `<loader_dir>/plugins` | Override plugins folder location |
+| `disabled_plugins` | csv hex | `""` | Comma-separated FNV-1a 32-bit hex hashes of disabled plugin paths |
+| `use_hotkeys` | bool | `true` | Enable F12 / Ctrl+Shift+I / Ctrl+Shift+R / Ctrl+Shift+Enter |
+| `optimized_client` | bool | `true` | Append performance-related Chromium switches |
+| `super_potato` | bool | `false` | Disable animations + Riot's potato mode |
+| `silent_mode` | bool | `false` | Suppress LCU's foreground/topmost calls |
+| `isecure_mode` | bool | `false` | Append `--disable-web-security` |
+| `use_devtools` | bool | `false` | Allow `OpenDevTools()` and DevTools hotkeys |
+| `use_riotclient` | bool | `false` | Register `https://riotclient/` proxy scheme |
+| `use_proxy` | bool | `false` | Strip `--no-proxy-server` so HTTP proxy env vars are honoured |
+| `debug_port` | int | `0` | Append `--remote-debugging-port=<port>` (undocumented) |
+| `league_dir` | path | `""` | Used by the loader (symlink mode) to locate the LoL install |
+
+---
+
+## 9. Persistence
+
+`window.DataStore` reads and writes a single shared file at `<loader_dir>/datastore`. Format on disk: JSON, XOR'd byte-by-byte against a cycling 20-byte key (`A5dgY6lz9fpG9kGNiH1mZ`).
+
+The XOR is **not encryption** — the key is a string literal in the binary, anyone can recover plaintext in seconds. It exists to keep casual users from opening the file in a text editor and corrupting it. A speed bump, not a security boundary.
+
+Plugins share a single namespace and are expected to prefix their own keys to avoid collisions; the API does not enforce per-plugin scoping today. There is no quota.
+
+`localStorage` and `IndexedDB` are not viable cross-launch options because LCUX's origin is `https://127.0.0.1:<port>/` and the port changes on every Riot Client launch — browser storage scoped to that origin gets orphaned. `DataStore` is the only durable cross-launch storage available to plugins.
+
+A future iteration is planned to replace `DataStore` with per-plugin async storage.
+
+---
+
+## 10. Known issues / TODO
+
+Surfaced separately so they don't get lost in implementation prose:
+
+1. **Preload include path is broken on `main`.** Commit `7635b4c` moved `plugins/` to `packages/preload/`. The C++ references in [`renderer.cc:200,209`](../core/src/renderer/renderer.cc#L200) still point at the old path. Release builds will fail until either the C++ side is updated or the build emits to `core/plugins/dist/`.
+2. **`is_main_` flicker.** Per-process global reassigned on every `OnBrowserCreated` ([`renderer.cc:265`](../core/src/renderer/renderer.cc#L265)). Currently saved by the `index.html` URL check downstream, but not robust if CEF's process model ever changes.
+3. **Hash-based disable is essentially untested.** v1.1.6 uses on-disk renames; v1.2.0 uses FNV-1a hashes. The new path has not been validated end-to-end. Tauri loader has partial backward-compat for `.js_`-renamed plugins ([`plugins.ts:131`](../packages/hub/src/lib/plugins.ts#L131)) but the entry path produced for those would not satisfy the C++ scheme handler.
+4. **RCS credential extraction is fragile.** The `OnBeforeCommandLineProcessing` window is the only known point to read `--riotclient-app-port` / `--riotclient-auth-token` before CEF strips them. There is no clean alternative.
+5. **`OnDemand` enum on Windows is dead.** Defined in the loader UI ([`core-module.ts:5-9`](../packages/hub/src/lib/core-module.ts#L5-L9)) but only `Universal` (IFEO) and `Targeted` (symlink) are wired to Rust. macOS implicitly is OnDemand and ignores the enum.
+6. **Cache path always overrides on `main`.** `refactor-2` contains a fix to defer to Riot's own `Saved/webcache` when set. Should be ported back.
+
+---
+
+## 11. References
+
+- v0.6.0 [`HOW_IT_WORKS.md`](https://github.com/PenguLoader/PenguLoader/blob/v0.6.0/HOW_IT_WORKS.md) — original architecture write-up. Many concepts (CommonJS `require`, d3d9 proxying, CreateRemoteThread DevTools) are now superseded.
+- [PenguLoader/PenguLoader#25](https://github.com/PenguLoader/PenguLoader/issues/25) — full investigation history of the CEF transparency hook.
+- v1.1.6 — production codebase (WPF / .NET Framework), tag [`v1.1.6`](https://github.com/PenguLoader/PenguLoader/tree/v1.1.6).
+- `refactor-2` branch — discarded experiment that embedded the hub UI inside LCUX via DevTools Protocol. Not the basis for the `app/` rewrite.
+- [Mecha](https://github.com/x00bence/Mecha) — the original IFEO+Detours injector that inspired the v0.6 era.
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..9f36ca21
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "pengu-loader",
+  "version": "1.2.0",
+  "description": "The ultimate JavaScript plugin loader",
+  "license": "MIT",
+  "private": true,
+  "type": "module",
+  "workspaces": [
+    "packages/hub",
+    "packages/preload",
+    "packages/types"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/PenguLoader/PenguLoader.git"
+  },
+  "keywords": [
+    "league-of-legends",
+    "league-client",
+    "plugin-loader"
+  ],
+  "bugs": {
+    "url": "https://github.com/PenguLoader/PenguLoader/issues"
+  },
+  "homepage": "https://github.com/PenguLoader/PenguLoader#readme"
+}
\ No newline at end of file
diff --git a/loader/.gitignore b/packages/hub/.gitignore
similarity index 100%
rename from loader/.gitignore
rename to packages/hub/.gitignore
diff --git a/loader/.npmrc b/packages/hub/.npmrc
similarity index 100%
rename from loader/.npmrc
rename to packages/hub/.npmrc
diff --git a/loader/.vscode/extensions.json b/packages/hub/.vscode/extensions.json
similarity index 100%
rename from loader/.vscode/extensions.json
rename to packages/hub/.vscode/extensions.json
diff --git a/loader/.vscode/settings.json b/packages/hub/.vscode/settings.json
similarity index 100%
rename from loader/.vscode/settings.json
rename to packages/hub/.vscode/settings.json
diff --git a/loader/README.md b/packages/hub/README.md
similarity index 100%
rename from loader/README.md
rename to packages/hub/README.md
diff --git a/loader/index.html b/packages/hub/index.html
similarity index 100%
rename from loader/index.html
rename to packages/hub/index.html
diff --git a/loader/package.json b/packages/hub/package.json
similarity index 100%
rename from loader/package.json
rename to packages/hub/package.json
diff --git a/loader/pnpm-lock.yaml b/packages/hub/pnpm-lock.yaml
similarity index 100%
rename from loader/pnpm-lock.yaml
rename to packages/hub/pnpm-lock.yaml
diff --git a/loader/src-tauri/.gitignore b/packages/hub/src-tauri/.gitignore
similarity index 100%
rename from loader/src-tauri/.gitignore
rename to packages/hub/src-tauri/.gitignore
diff --git a/loader/src-tauri/Cargo.lock b/packages/hub/src-tauri/Cargo.lock
similarity index 100%
rename from loader/src-tauri/Cargo.lock
rename to packages/hub/src-tauri/Cargo.lock
diff --git a/loader/src-tauri/Cargo.toml b/packages/hub/src-tauri/Cargo.toml
similarity index 100%
rename from loader/src-tauri/Cargo.toml
rename to packages/hub/src-tauri/Cargo.toml
diff --git a/loader/src-tauri/build.rs b/packages/hub/src-tauri/build.rs
similarity index 100%
rename from loader/src-tauri/build.rs
rename to packages/hub/src-tauri/build.rs
diff --git a/loader/src-tauri/icons/128x128.png b/packages/hub/src-tauri/icons/128x128.png
similarity index 100%
rename from loader/src-tauri/icons/128x128.png
rename to packages/hub/src-tauri/icons/128x128.png
diff --git a/loader/src-tauri/icons/128x128@2x.png b/packages/hub/src-tauri/icons/128x128@2x.png
similarity index 100%
rename from loader/src-tauri/icons/128x128@2x.png
rename to packages/hub/src-tauri/icons/128x128@2x.png
diff --git a/loader/src-tauri/icons/32x32.png b/packages/hub/src-tauri/icons/32x32.png
similarity index 100%
rename from loader/src-tauri/icons/32x32.png
rename to packages/hub/src-tauri/icons/32x32.png
diff --git a/loader/src-tauri/icons/Square107x107Logo.png b/packages/hub/src-tauri/icons/Square107x107Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square107x107Logo.png
rename to packages/hub/src-tauri/icons/Square107x107Logo.png
diff --git a/loader/src-tauri/icons/Square142x142Logo.png b/packages/hub/src-tauri/icons/Square142x142Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square142x142Logo.png
rename to packages/hub/src-tauri/icons/Square142x142Logo.png
diff --git a/loader/src-tauri/icons/Square150x150Logo.png b/packages/hub/src-tauri/icons/Square150x150Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square150x150Logo.png
rename to packages/hub/src-tauri/icons/Square150x150Logo.png
diff --git a/loader/src-tauri/icons/Square284x284Logo.png b/packages/hub/src-tauri/icons/Square284x284Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square284x284Logo.png
rename to packages/hub/src-tauri/icons/Square284x284Logo.png
diff --git a/loader/src-tauri/icons/Square30x30Logo.png b/packages/hub/src-tauri/icons/Square30x30Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square30x30Logo.png
rename to packages/hub/src-tauri/icons/Square30x30Logo.png
diff --git a/loader/src-tauri/icons/Square310x310Logo.png b/packages/hub/src-tauri/icons/Square310x310Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square310x310Logo.png
rename to packages/hub/src-tauri/icons/Square310x310Logo.png
diff --git a/loader/src-tauri/icons/Square44x44Logo.png b/packages/hub/src-tauri/icons/Square44x44Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square44x44Logo.png
rename to packages/hub/src-tauri/icons/Square44x44Logo.png
diff --git a/loader/src-tauri/icons/Square71x71Logo.png b/packages/hub/src-tauri/icons/Square71x71Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square71x71Logo.png
rename to packages/hub/src-tauri/icons/Square71x71Logo.png
diff --git a/loader/src-tauri/icons/Square89x89Logo.png b/packages/hub/src-tauri/icons/Square89x89Logo.png
similarity index 100%
rename from loader/src-tauri/icons/Square89x89Logo.png
rename to packages/hub/src-tauri/icons/Square89x89Logo.png
diff --git a/loader/src-tauri/icons/StoreLogo.png b/packages/hub/src-tauri/icons/StoreLogo.png
similarity index 100%
rename from loader/src-tauri/icons/StoreLogo.png
rename to packages/hub/src-tauri/icons/StoreLogo.png
diff --git a/loader/src-tauri/icons/icon.icns b/packages/hub/src-tauri/icons/icon.icns
similarity index 100%
rename from loader/src-tauri/icons/icon.icns
rename to packages/hub/src-tauri/icons/icon.icns
diff --git a/loader/src-tauri/icons/icon.ico b/packages/hub/src-tauri/icons/icon.ico
similarity index 100%
rename from loader/src-tauri/icons/icon.ico
rename to packages/hub/src-tauri/icons/icon.ico
diff --git a/loader/src-tauri/icons/icon.png b/packages/hub/src-tauri/icons/icon.png
similarity index 100%
rename from loader/src-tauri/icons/icon.png
rename to packages/hub/src-tauri/icons/icon.png
diff --git a/loader/src-tauri/src/config.rs b/packages/hub/src-tauri/src/config.rs
similarity index 100%
rename from loader/src-tauri/src/config.rs
rename to packages/hub/src-tauri/src/config.rs
diff --git a/loader/src-tauri/src/macos/core.rs b/packages/hub/src-tauri/src/macos/core.rs
similarity index 100%
rename from loader/src-tauri/src/macos/core.rs
rename to packages/hub/src-tauri/src/macos/core.rs
diff --git a/loader/src-tauri/src/macos/dylib.rs b/packages/hub/src-tauri/src/macos/dylib.rs
similarity index 100%
rename from loader/src-tauri/src/macos/dylib.rs
rename to packages/hub/src-tauri/src/macos/dylib.rs
diff --git a/loader/src-tauri/src/macos/mod.rs b/packages/hub/src-tauri/src/macos/mod.rs
similarity index 100%
rename from loader/src-tauri/src/macos/mod.rs
rename to packages/hub/src-tauri/src/macos/mod.rs
diff --git a/loader/src-tauri/src/macos/socket.rs b/packages/hub/src-tauri/src/macos/socket.rs
similarity index 100%
rename from loader/src-tauri/src/macos/socket.rs
rename to packages/hub/src-tauri/src/macos/socket.rs
diff --git a/loader/src-tauri/src/macos/startup.rs b/packages/hub/src-tauri/src/macos/startup.rs
similarity index 100%
rename from loader/src-tauri/src/macos/startup.rs
rename to packages/hub/src-tauri/src/macos/startup.rs
diff --git a/loader/src-tauri/src/macos/tray.rs b/packages/hub/src-tauri/src/macos/tray.rs
similarity index 100%
rename from loader/src-tauri/src/macos/tray.rs
rename to packages/hub/src-tauri/src/macos/tray.rs
diff --git a/loader/src-tauri/src/macos/utils.rs b/packages/hub/src-tauri/src/macos/utils.rs
similarity index 100%
rename from loader/src-tauri/src/macos/utils.rs
rename to packages/hub/src-tauri/src/macos/utils.rs
diff --git a/loader/src-tauri/src/macos/webview.rs b/packages/hub/src-tauri/src/macos/webview.rs
similarity index 100%
rename from loader/src-tauri/src/macos/webview.rs
rename to packages/hub/src-tauri/src/macos/webview.rs
diff --git a/loader/src-tauri/src/main.rs b/packages/hub/src-tauri/src/main.rs
similarity index 100%
rename from loader/src-tauri/src/main.rs
rename to packages/hub/src-tauri/src/main.rs
diff --git a/loader/src-tauri/src/shell.rs b/packages/hub/src-tauri/src/shell.rs
similarity index 100%
rename from loader/src-tauri/src/shell.rs
rename to packages/hub/src-tauri/src/shell.rs
diff --git a/loader/src-tauri/src/windows/mod.rs b/packages/hub/src-tauri/src/windows/mod.rs
similarity index 100%
rename from loader/src-tauri/src/windows/mod.rs
rename to packages/hub/src-tauri/src/windows/mod.rs
diff --git a/loader/src-tauri/src/windows/mod_ifeo.rs b/packages/hub/src-tauri/src/windows/mod_ifeo.rs
similarity index 100%
rename from loader/src-tauri/src/windows/mod_ifeo.rs
rename to packages/hub/src-tauri/src/windows/mod_ifeo.rs
diff --git a/loader/src-tauri/src/windows/mod_symlink.rs b/packages/hub/src-tauri/src/windows/mod_symlink.rs
similarity index 100%
rename from loader/src-tauri/src/windows/mod_symlink.rs
rename to packages/hub/src-tauri/src/windows/mod_symlink.rs
diff --git a/loader/src-tauri/src/windows/utils.rs b/packages/hub/src-tauri/src/windows/utils.rs
similarity index 100%
rename from loader/src-tauri/src/windows/utils.rs
rename to packages/hub/src-tauri/src/windows/utils.rs
diff --git a/loader/src-tauri/tauri.conf.json b/packages/hub/src-tauri/tauri.conf.json
similarity index 100%
rename from loader/src-tauri/tauri.conf.json
rename to packages/hub/src-tauri/tauri.conf.json
diff --git a/loader/src/App.css b/packages/hub/src/App.css
similarity index 100%
rename from loader/src/App.css
rename to packages/hub/src/App.css
diff --git a/loader/src/App.tsx b/packages/hub/src/App.tsx
similarity index 100%
rename from loader/src/App.tsx
rename to packages/hub/src/App.tsx
diff --git a/loader/src/assets/bg-mask.svg b/packages/hub/src/assets/bg-mask.svg
similarity index 100%
rename from loader/src/assets/bg-mask.svg
rename to packages/hub/src/assets/bg-mask.svg
diff --git a/loader/src/assets/icon-sm.png b/packages/hub/src/assets/icon-sm.png
similarity index 100%
rename from loader/src/assets/icon-sm.png
rename to packages/hub/src/assets/icon-sm.png
diff --git a/loader/src/assets/icon.png b/packages/hub/src/assets/icon.png
similarity index 100%
rename from loader/src/assets/icon.png
rename to packages/hub/src/assets/icon.png
diff --git a/loader/src/components/Activator.tsx b/packages/hub/src/components/Activator.tsx
similarity index 100%
rename from loader/src/components/Activator.tsx
rename to packages/hub/src/components/Activator.tsx
diff --git a/loader/src/components/Appbar.tsx b/packages/hub/src/components/Appbar.tsx
similarity index 100%
rename from loader/src/components/Appbar.tsx
rename to packages/hub/src/components/Appbar.tsx
diff --git a/loader/src/components/Icons.tsx b/packages/hub/src/components/Icons.tsx
similarity index 100%
rename from loader/src/components/Icons.tsx
rename to packages/hub/src/components/Icons.tsx
diff --git a/loader/src/components/PluginGallery.tsx b/packages/hub/src/components/PluginGallery.tsx
similarity index 100%
rename from loader/src/components/PluginGallery.tsx
rename to packages/hub/src/components/PluginGallery.tsx
diff --git a/loader/src/components/PluginStore.tsx b/packages/hub/src/components/PluginStore.tsx
similarity index 100%
rename from loader/src/components/PluginStore.tsx
rename to packages/hub/src/components/PluginStore.tsx
diff --git a/loader/src/components/settings/Tab.About.tsx b/packages/hub/src/components/settings/Tab.About.tsx
similarity index 100%
rename from loader/src/components/settings/Tab.About.tsx
rename to packages/hub/src/components/settings/Tab.About.tsx
diff --git a/loader/src/components/settings/Tab.Client.tsx b/packages/hub/src/components/settings/Tab.Client.tsx
similarity index 100%
rename from loader/src/components/settings/Tab.Client.tsx
rename to packages/hub/src/components/settings/Tab.Client.tsx
diff --git a/loader/src/components/settings/Tab.Pengu.tsx b/packages/hub/src/components/settings/Tab.Pengu.tsx
similarity index 100%
rename from loader/src/components/settings/Tab.Pengu.tsx
rename to packages/hub/src/components/settings/Tab.Pengu.tsx
diff --git a/loader/src/components/settings/index.tsx b/packages/hub/src/components/settings/index.tsx
similarity index 100%
rename from loader/src/components/settings/index.tsx
rename to packages/hub/src/components/settings/index.tsx
diff --git a/loader/src/components/settings/templates.tsx b/packages/hub/src/components/settings/templates.tsx
similarity index 100%
rename from loader/src/components/settings/templates.tsx
rename to packages/hub/src/components/settings/templates.tsx
diff --git a/loader/src/components/ui/Button.tsx b/packages/hub/src/components/ui/Button.tsx
similarity index 100%
rename from loader/src/components/ui/Button.tsx
rename to packages/hub/src/components/ui/Button.tsx
diff --git a/loader/src/components/ui/Checkbox.tsx b/packages/hub/src/components/ui/Checkbox.tsx
similarity index 100%
rename from loader/src/components/ui/Checkbox.tsx
rename to packages/hub/src/components/ui/Checkbox.tsx
diff --git a/loader/src/components/ui/ComboBox.tsx b/packages/hub/src/components/ui/ComboBox.tsx
similarity index 100%
rename from loader/src/components/ui/ComboBox.tsx
rename to packages/hub/src/components/ui/ComboBox.tsx
diff --git a/loader/src/components/ui/RadioButton.tsx b/packages/hub/src/components/ui/RadioButton.tsx
similarity index 100%
rename from loader/src/components/ui/RadioButton.tsx
rename to packages/hub/src/components/ui/RadioButton.tsx
diff --git a/loader/src/components/ui/index.ts b/packages/hub/src/components/ui/index.ts
similarity index 100%
rename from loader/src/components/ui/index.ts
rename to packages/hub/src/components/ui/index.ts
diff --git a/loader/src/index.tsx b/packages/hub/src/index.tsx
similarity index 100%
rename from loader/src/index.tsx
rename to packages/hub/src/index.tsx
diff --git a/loader/src/lib/config.ts b/packages/hub/src/lib/config.ts
similarity index 100%
rename from loader/src/lib/config.ts
rename to packages/hub/src/lib/config.ts
diff --git a/loader/src/lib/core-module.ts b/packages/hub/src/lib/core-module.ts
similarity index 100%
rename from loader/src/lib/core-module.ts
rename to packages/hub/src/lib/core-module.ts
diff --git a/loader/src/lib/datatstore.ts b/packages/hub/src/lib/datatstore.ts
similarity index 100%
rename from loader/src/lib/datatstore.ts
rename to packages/hub/src/lib/datatstore.ts
diff --git a/loader/src/lib/i18n.ts b/packages/hub/src/lib/i18n.ts
similarity index 100%
rename from loader/src/lib/i18n.ts
rename to packages/hub/src/lib/i18n.ts
diff --git a/loader/src/lib/league-client.ts b/packages/hub/src/lib/league-client.ts
similarity index 100%
rename from loader/src/lib/league-client.ts
rename to packages/hub/src/lib/league-client.ts
diff --git a/loader/src/lib/plugins.ts b/packages/hub/src/lib/plugins.ts
similarity index 100%
rename from loader/src/lib/plugins.ts
rename to packages/hub/src/lib/plugins.ts
diff --git a/loader/src/lib/root.ts b/packages/hub/src/lib/root.ts
similarity index 100%
rename from loader/src/lib/root.ts
rename to packages/hub/src/lib/root.ts
diff --git a/loader/src/lib/shell.ts b/packages/hub/src/lib/shell.ts
similarity index 100%
rename from loader/src/lib/shell.ts
rename to packages/hub/src/lib/shell.ts
diff --git a/loader/src/lib/startup.ts b/packages/hub/src/lib/startup.ts
similarity index 100%
rename from loader/src/lib/startup.ts
rename to packages/hub/src/lib/startup.ts
diff --git a/loader/src/lib/store.ts b/packages/hub/src/lib/store.ts
similarity index 100%
rename from loader/src/lib/store.ts
rename to packages/hub/src/lib/store.ts
diff --git a/loader/src/lib/utils.ts b/packages/hub/src/lib/utils.ts
similarity index 100%
rename from loader/src/lib/utils.ts
rename to packages/hub/src/lib/utils.ts
diff --git a/loader/src/pages/MainPage.tsx b/packages/hub/src/pages/MainPage.tsx
similarity index 100%
rename from loader/src/pages/MainPage.tsx
rename to packages/hub/src/pages/MainPage.tsx
diff --git a/loader/src/pages/SplashPage.tsx b/packages/hub/src/pages/SplashPage.tsx
similarity index 100%
rename from loader/src/pages/SplashPage.tsx
rename to packages/hub/src/pages/SplashPage.tsx
diff --git a/loader/src/pages/WelcomePage.tsx b/packages/hub/src/pages/WelcomePage.tsx
similarity index 100%
rename from loader/src/pages/WelcomePage.tsx
rename to packages/hub/src/pages/WelcomePage.tsx
diff --git a/loader/src/vite-env.d.ts b/packages/hub/src/vite-env.d.ts
similarity index 100%
rename from loader/src/vite-env.d.ts
rename to packages/hub/src/vite-env.d.ts
diff --git a/loader/tailwind.config.ts b/packages/hub/tailwind.config.ts
similarity index 100%
rename from loader/tailwind.config.ts
rename to packages/hub/tailwind.config.ts
diff --git a/loader/translations.json b/packages/hub/translations.json
similarity index 100%
rename from loader/translations.json
rename to packages/hub/translations.json
diff --git a/loader/tsconfig.json b/packages/hub/tsconfig.json
similarity index 100%
rename from loader/tsconfig.json
rename to packages/hub/tsconfig.json
diff --git a/loader/tsconfig.node.json b/packages/hub/tsconfig.node.json
similarity index 100%
rename from loader/tsconfig.node.json
rename to packages/hub/tsconfig.node.json
diff --git a/loader/vite.config.ts b/packages/hub/vite.config.ts
similarity index 100%
rename from loader/vite.config.ts
rename to packages/hub/vite.config.ts
diff --git a/plugins/.gitignore b/packages/preload/.gitignore
similarity index 100%
rename from plugins/.gitignore
rename to packages/preload/.gitignore
diff --git a/plugins/README.md b/packages/preload/README.md
similarity index 100%
rename from plugins/README.md
rename to packages/preload/README.md
diff --git a/plugins/index.html b/packages/preload/index.html
similarity index 100%
rename from plugins/index.html
rename to packages/preload/index.html
diff --git a/plugins/package.json b/packages/preload/package.json
similarity index 80%
rename from plugins/package.json
rename to packages/preload/package.json
index a7f0cde5..af951fcb 100644
--- a/plugins/package.json
+++ b/packages/preload/package.json
@@ -10,10 +10,6 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@twind/core": "^1.1.3",
-    "@twind/preset-autoprefix": "^1.0.7",
-    "@twind/preset-tailwind": "^1.1.4",
-    "@twind/with-web-components": "^1.1.3",
     "fuse.js": "^6.6.2",
     "snarkdown": "^2.0.0",
     "solid-js": "^1.7.8",
diff --git a/plugins/pnpm-lock.yaml b/packages/preload/pnpm-lock.yaml
similarity index 95%
rename from plugins/pnpm-lock.yaml
rename to packages/preload/pnpm-lock.yaml
index ecc05734..0bea5f1b 100644
--- a/plugins/pnpm-lock.yaml
+++ b/packages/preload/pnpm-lock.yaml
@@ -8,18 +8,6 @@ importers:
 
   .:
     dependencies:
-      '@twind/core':
-        specifier: ^1.1.3
-        version: 1.1.3(typescript@4.9.5)
-      '@twind/preset-autoprefix':
-        specifier: ^1.0.7
-        version: 1.0.7(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)
-      '@twind/preset-tailwind':
-        specifier: ^1.1.4
-        version: 1.1.4(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)
-      '@twind/with-web-components':
-        specifier: ^1.1.3
-        version: 1.1.3(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)
       fuse.js:
         specifier: ^6.6.2
         version: 6.6.2
@@ -605,45 +593,6 @@ packages:
     cpu: [x64]
     os: [win32]
 
-  '@twind/core@1.1.3':
-    resolution: {integrity: sha512-/B/aNFerMb2IeyjSJy3SJxqVxhrT77gBDknLMiZqXIRr4vNJqiuhx7KqUSRzDCwUmyGuogkamz+aOLzN6MeSLw==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@twind/preset-autoprefix@1.0.7':
-    resolution: {integrity: sha512-3wmHO0pG/CVxYBNZUV0tWcL7CP0wD5KpyWAQE/KOalWmOVBj+nH6j3v6Y3I3pRuMFaG5DC78qbYbhA1O11uG3w==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      '@twind/core': ^1.1.0
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@twind/preset-tailwind@1.1.4':
-    resolution: {integrity: sha512-zv85wrP/DW4AxgWrLfH7kyGn/KJF3K04FMLVl2AjoxZGYdCaoZDkL8ma3hzaKQ+WGgBFRubuB/Ku2Rtv/wjzVw==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      '@twind/core': ^1.1.0
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
-  '@twind/with-web-components@1.1.3':
-    resolution: {integrity: sha512-pM2Ps58pkLQva2HsC/cm2y5kTIwojJ6896w4+kXIMCOhuoOfTeyNOkYvBdr8Cpkvm+vR+ggPITNdvpzAOXa+Dg==}
-    engines: {node: '>=14.15.0'}
-    peerDependencies:
-      '@twind/core': ^1.1.0
-      typescript: ^4.8.4
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@types/babel__core@7.20.5':
     resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==}
 
@@ -912,9 +861,6 @@ packages:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
 
-  style-vendorizer@2.2.3:
-    resolution: {integrity: sha512-/VDRsWvQAgspVy9eATN3z6itKTuyg+jW1q6UoTCQCFRqPDw8bi3E1hXIKnGw5LvXS2AQPuJ7Af4auTLYeBOLEg==}
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -1467,31 +1413,6 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.21.0':
     optional: true
 
-  '@twind/core@1.1.3(typescript@4.9.5)':
-    dependencies:
-      csstype: 3.1.2
-    optionalDependencies:
-      typescript: 4.9.5
-
-  '@twind/preset-autoprefix@1.0.7(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)':
-    dependencies:
-      '@twind/core': 1.1.3(typescript@4.9.5)
-      style-vendorizer: 2.2.3
-    optionalDependencies:
-      typescript: 4.9.5
-
-  '@twind/preset-tailwind@1.1.4(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)':
-    dependencies:
-      '@twind/core': 1.1.3(typescript@4.9.5)
-    optionalDependencies:
-      typescript: 4.9.5
-
-  '@twind/with-web-components@1.1.3(@twind/core@1.1.3(typescript@4.9.5))(typescript@4.9.5)':
-    dependencies:
-      '@twind/core': 1.1.3(typescript@4.9.5)
-    optionalDependencies:
-      typescript: 4.9.5
-
   '@types/babel__core@7.20.5':
     dependencies:
       '@babel/parser': 7.22.7
@@ -1781,8 +1702,6 @@ snapshots:
 
   source-map-js@1.2.0: {}
 
-  style-vendorizer@2.2.3: {}
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
diff --git a/plugins/src/index.ts b/packages/preload/src/index.ts
similarity index 100%
rename from plugins/src/index.ts
rename to packages/preload/src/index.ts
diff --git a/plugins/src/preload/api/DataStore.ts b/packages/preload/src/preload/api/DataStore.ts
similarity index 100%
rename from plugins/src/preload/api/DataStore.ts
rename to packages/preload/src/preload/api/DataStore.ts
diff --git a/plugins/src/preload/api/Effect.ts b/packages/preload/src/preload/api/Effect.ts
similarity index 97%
rename from plugins/src/preload/api/Effect.ts
rename to packages/preload/src/preload/api/Effect.ts
index 4a7505c6..258b581b 100644
--- a/plugins/src/preload/api/Effect.ts
+++ b/packages/preload/src/preload/api/Effect.ts
@@ -125,8 +125,8 @@ window.Effect = {
   setTheme(theme) {
     if (theme === 'light')
       native.SetWindowTheme(false)
-    else (theme === 'dark')
-    native.SetWindowTheme(true)
+    else if (theme === 'dark')
+      native.SetWindowTheme(true)
   },
 
 }
\ No newline at end of file
diff --git a/plugins/src/preload/api/index.ts b/packages/preload/src/preload/api/index.ts
similarity index 100%
rename from plugins/src/preload/api/index.ts
rename to packages/preload/src/preload/api/index.ts
diff --git a/plugins/src/preload/api/native.ts b/packages/preload/src/preload/api/native.ts
similarity index 100%
rename from plugins/src/preload/api/native.ts
rename to packages/preload/src/preload/api/native.ts
diff --git a/plugins/src/preload/index.ts b/packages/preload/src/preload/index.ts
similarity index 89%
rename from plugins/src/preload/index.ts
rename to packages/preload/src/preload/index.ts
index 99736ab2..08f69f6c 100644
--- a/plugins/src/preload/index.ts
+++ b/packages/preload/src/preload/index.ts
@@ -1,5 +1,4 @@
 import './api';
-import './polyfills';
 import './super-potato';
 import './load-hooks';
 import './loader';
diff --git a/packages/preload/src/preload/load-hooks.ts b/packages/preload/src/preload/load-hooks.ts
new file mode 100644
index 00000000..5e066c2e
--- /dev/null
+++ b/packages/preload/src/preload/load-hooks.ts
@@ -0,0 +1,103 @@
+/**
+ * Late-listener support for `load` and `DOMContentLoaded`.
+ *
+ * Pengu's preload IIFE runs synchronously inside OnContextCreated (via
+ * cef_v8context_t::eval), so the IIFE itself is in place before any HTML
+ * scripts execute. But user plugins are loaded via dynamic `import()` —
+ * which is asynchronous. A slow-importing plugin can finish AFTER the
+ * page already fired `load` / `DOMContentLoaded`. When such a plugin then
+ * does `window.addEventListener('load', fn)`, the native dispatch is
+ * already over — the listener would never fire.
+ *
+ * This module patches `addEventListener` on `window` and `document` to
+ * detect that case and schedule the listener via `setTimeout(0)` with a
+ * synthesized Event of the right type. From the plugin author's view,
+ * `addEventListener` works as if their code had run before the event.
+ *
+ * Notes / known limitations:
+ *  - Late listeners are invoked once on the next tick. They aren't
+ *    registered with the real EventTarget, so `removeEventListener` on a
+ *    re-routed listener has no cancellable handle.
+ *  - The synthesized `Event` object has `currentTarget` / `target` set to
+ *    null (we can't spoof them through normal Event construction). Most
+ *    `load` / `DOMContentLoaded` listeners ignore those properties; if a
+ *    plugin needs them, it should listen earlier or query `document` /
+ *    `window` directly.
+ *  - `capture` (boolean or `options.capture`) is ignored for late listeners
+ *    — there's no DOM dispatch to capture against.
+ */
+
+const windowAddEventListener = window.addEventListener;
+const documentAddEventListener = document.addEventListener;
+
+// One-shot flag: did the native `load` event fire? Registered via the saved
+// reference so our own patch (assigned below) doesn't intercept it.
+let windowLoaded = false;
+windowAddEventListener.call(window, 'load', () => { windowLoaded = true; }, { once: true });
+
+function isDomReady(): boolean {
+  // 'loading' is the only state where DOMContentLoaded hasn't fired yet.
+  return document.readyState === 'interactive' || document.readyState === 'complete';
+}
+
+/**
+ * Schedule a listener to fire on the next tick with a synthesized Event.
+ * Honors `options.signal` both at schedule time and at fire time.
+ */
+function callLate(
+  target: EventTarget,
+  type: string,
+  listener: EventListenerOrEventListenerObject,
+  options?: boolean | AddEventListenerOptions,
+) {
+  const signal = (typeof options === 'object' && options) ? options.signal : undefined;
+  if (signal?.aborted) return;
+
+  setTimeout(() => {
+    if (signal?.aborted) return;
+    const ev = new Event(type);
+    if (typeof listener === 'function') {
+      listener.call(target, ev);
+    } else if (listener && typeof listener.handleEvent === 'function') {
+      listener.handleEvent(ev);
+    }
+  }, 0);
+}
+
+// `load` and `DOMContentLoaded` both bubble to window, so a plugin's late
+// `window.addEventListener('DOMContentLoaded', ...)` is a real and common case.
+window.addEventListener = function (
+  type: string,
+  listener: EventListenerOrEventListenerObject | null,
+  options?: boolean | AddEventListenerOptions,
+): void {
+  // Spec: addEventListener with null callback is a no-op.
+  if (!listener) return;
+
+  if (type === 'load' && windowLoaded) {
+    callLate(this, type, listener, options);
+    return;
+  }
+  if (type === 'DOMContentLoaded' && isDomReady()) {
+    callLate(this, type, listener, options);
+    return;
+  }
+  windowAddEventListener.call(this, type, listener, options);
+};
+
+// `document` fires DOMContentLoaded directly (then it bubbles to window).
+// `document` does not fire `load` — only window does — so we don't intercept it here.
+document.addEventListener = function (
+  type: string,
+  listener: EventListenerOrEventListenerObject | null,
+  options?: boolean | AddEventListenerOptions,
+): void {
+  if (!listener) return;
+  if (type === 'DOMContentLoaded' && isDomReady()) {
+    callLate(this, type, listener, options);
+    return;
+  }
+  documentAddEventListener.call(this, type, listener, options);
+};
+
+export { };
diff --git a/plugins/src/preload/loader.ts b/packages/preload/src/preload/loader.ts
similarity index 63%
rename from plugins/src/preload/loader.ts
rename to packages/preload/src/preload/loader.ts
index b21c9395..009b81ff 100644
--- a/plugins/src/preload/loader.ts
+++ b/packages/preload/src/preload/loader.ts
@@ -72,14 +72,31 @@ async function loadPlugin(entry: string) {
   }
 }
 
-// Load all plugins asynchronously
-const waitable = Promise.all(
-  plugins.map(loadPlugin)
-);
+// Load all plugins asynchronously. loadPlugin swallows its own errors, so
+// Promise.all here only "stalls" if a plugin hangs — top-level await that
+// never resolves, infinite loop in init, unawaited fetch to a dead host, etc.
+//
+// Race that against a hard timeout so a single bad plugin can't deadlock
+// rcp-fe-common-libs (and the 35 RCP plugins that depend on it) indefinitely.
+// Plugins that finish after the timeout still complete in the background;
+// they just don't gate the rest of LCUX from initializing. The trade-off:
+// late-finishing plugins miss preInit/postInit hooks for RCP plugins that
+// already passed those phases — same gotcha that exists today for any
+// subscribe-after-announce.
+const PLUGIN_LOAD_TIMEOUT_MS = 15_000;
+
+const allLoaded = Promise.all(plugins.map(loadPlugin));
+const timedOut = new Promise<void>(resolve => setTimeout(() => {
+  console.warn('%c Pengu ', 'background: #183461; color: #fff',
+    `plugin load exceeded ${PLUGIN_LOAD_TIMEOUT_MS}ms — releasing rcp-fe-common-libs gate. Slow plugins continue loading in the background.`);
+  resolve();
+}, PLUGIN_LOAD_TIMEOUT_MS));
+
+const waitable = Promise.race([allLoaded, timedOut]);
 
 // Listen for the first rcp, it's also the first listener
 rcp.preInit('rcp-fe-common-libs', async function () {
-  // Wait for plugins load
+  // Wait for plugins load (or timeout — see above)
   await waitable;
 });
 
diff --git a/packages/preload/src/preload/rcp/graph.ts b/packages/preload/src/preload/rcp/graph.ts
new file mode 100644
index 00000000..d321a453
--- /dev/null
+++ b/packages/preload/src/preload/rcp/graph.ts
@@ -0,0 +1,77 @@
+/**
+ * RCP plugin dependency graph.
+ *
+ * LCUX serves `/graph.json` describing every RCP plugin in the build along
+ * with its dependencies, load sequence, virtual-impl mappings, and
+ * lazy-loading hints. The graph is static for a given client build, so we
+ * fetch it once and cache the Promise.
+ *
+ * Use cases for plugin authors:
+ *  - Discover all RCP plugin names without waiting for announces.
+ *  - Subscribe (preInit/postInit/whenReady) to every plugin we care about
+ *    BEFORE its announce fires — required by the push-style RCP contract.
+ *  - Reason about plugin dependencies (e.g. "wait for X and all its deps").
+ */
+
+export interface PluginGraph {
+  /** Plugin "affinities" — niche, usually empty. */
+  affinities: Record<string, any>;
+  /** Map of plugin name → list of its direct dependencies. */
+  dependencies: Record<string, string[]>;
+  /** Virtual-package resolution: e.g. `rcp-be-lol-rso-auth → rcp-be-rga-rso-auth`. */
+  implementations: Record<string, string>;
+  /** Plugins loaded lazily / on demand. */
+  lazy: Record<string, any>;
+  /** Total ordered load sequence chosen by the runtime. */
+  sequence: string[];
+  /** Backward-compat shims. */
+  shims: Record<string, any>;
+}
+
+let _graph: Promise<PluginGraph> | null = null;
+
+/**
+ * Fetch and cache the plugin graph. Subsequent calls return the same Promise.
+ * Reload the page to refresh after a Riot client update.
+ */
+export function graph(): Promise<PluginGraph> {
+  if (!_graph) {
+    _graph = fetch('/graph.json').then(r => {
+      if (!r.ok) throw new Error(`graph.json ${r.status}`);
+      return r.json();
+    });
+  }
+  return _graph;
+}
+
+/**
+ * Direct dependencies of `name`. Returns `[]` if the plugin is unknown or has no deps.
+ * Names are returned exactly as listed in the graph (lowercase, `rcp-` prefixed).
+ */
+export async function dependencies(name: string): Promise<string[]> {
+  const g = await graph();
+  return g.dependencies[name] ?? [];
+}
+
+/**
+ * Direct dependents — plugins that depend on `name`. O(N) scan over the
+ * dependencies map; cache the result yourself if calling frequently.
+ */
+export async function dependents(name: string): Promise<string[]> {
+  const g = await graph();
+  const out: string[] = [];
+  for (const [k, deps] of Object.entries(g.dependencies)) {
+    if (deps.includes(name)) out.push(k);
+  }
+  return out;
+}
+
+/**
+ * All RCP plugin names known to the runtime, in load order.
+ * Matches the keys present in announces, so it can be used to pre-subscribe
+ * (e.g. via `rcp.whenReady`) before any plugin announces.
+ */
+export async function names(): Promise<string[]> {
+  const g = await graph();
+  return g.sequence.slice();
+}
diff --git a/packages/preload/src/preload/rcp/hooks.ts b/packages/preload/src/preload/rcp/hooks.ts
new file mode 100644
index 00000000..bff50aed
--- /dev/null
+++ b/packages/preload/src/preload/rcp/hooks.ts
@@ -0,0 +1,321 @@
+import { graph, dependencies, dependents, names } from './graph';
+
+/**
+ * Riot Client Plugin (RCP) hooks.
+ *
+ * Riot's frontend (LCUX) is composed of independent plugins named `rcp-fe-*`.
+ * Each one announces itself by dispatching a CustomEvent of type
+ * `riotPlugin.announce:<name>` on `document`. The event carries a
+ * `registrationHandler` that, when called by the announcing plugin's loader,
+ * runs the plugin's registrar (which builds and returns its public API).
+ *
+ * Pengu intercepts that announce → registrationHandler chain so user plugins
+ * can:
+ *   - run code BEFORE a plugin initializes (`rcp.preInit`),
+ *   - run code AFTER a plugin's API is ready (`rcp.postInit`),
+ *   - await a plugin's API as a Promise (`rcp.whenReady`),
+ *   - synchronously look up an already-fulfilled plugin's API (`rcp.get`).
+ *
+ * Plugin lifecycle, with Pengu's wrap in place:
+ *
+ *   announce              registrar runs       all postInit awaited
+ *      │                       │                       │
+ *      ▼                       ▼                       ▼
+ *   ┌────────┐ before ┌──────┐ ──────────► ┌─────────┐ after  ┌──────────┐
+ *   │preInit │ awaited│ init │   registrar │ postInit│ awaited│fulfilled │
+ *   └────────┘        └──────┘             └─────────┘        └──────────┘
+ *
+ * - State `preInit`: announce has fired, before-callbacks are still running.
+ * - State `init`: before-callbacks done, registrar is running.
+ * - State `postInit`: registrar returned an api, after-callbacks are running.
+ * - State `fulfilled`: everything done; api is final and immutable from our side.
+ */
+
+type RcpAnnouceEvent = CustomEvent & {
+  errorHandler: () => any;
+  registrationHandler: (
+    registrar: (provider: any) => Promise<any>
+  ) => Promise<any> | void;
+};
+
+type CallbackType = 'before' | 'after';
+
+interface Callback {
+  (...args: any): void | Promise<void>;
+}
+
+interface PluginContainer {
+  impl: null | object;
+  state: 'preInit' | 'init' | 'postInit' | 'fulfilled';
+}
+
+/**
+ * Per-plugin queue of pending before/after callbacks plus a total count used
+ * to garbage-collect the entry once both queues drain. `_count` tracks the
+ * total number of registered callbacks across both `before` and `after`
+ * arrays so we can delete the container in O(1) once it hits zero.
+ */
+type CallbackContainer = {
+  _count: number;
+} & {
+  [k in CallbackType]?: Callback[];
+};
+
+const RCPE_PREF = 'riotPlugin.announce:';
+const RCPE_PREF_LEN = RCPE_PREF.length;
+
+/** Plugins that have begun their lifecycle (any state). */
+const _plugins = new Map<string, PluginContainer>();
+
+/**
+ * Pending callbacks per plugin name. Entries exist only between
+ * `addCallback` and `invokeCallbacks` draining them; once empty, removed.
+ */
+const _callbacks = new Map<string, CallbackContainer>();
+
+/**
+ * Push-style subscription: register a one-shot listener for this specific
+ * plugin's announce event. Only fires for the first announcement; if the
+ * plugin re-announces (it shouldn't), our wrap won't run twice. This is
+ * called lazily — only when the first callback for `name` is registered —
+ * so we don't intercept announces for plugins nobody is listening to.
+ *
+ * Note: this replaces an older "pull" approach that wrapped
+ * `document.dispatchEvent` to intercept every event. The push approach
+ * avoids mutating `document.dispatchEvent` (which other libraries may
+ * also want to wrap) and side-steps the resulting non-configurable
+ * descriptor.
+ */
+function subscribePlugin(name: string) {
+  const type = `${RCPE_PREF}${name}`;
+  document.addEventListener(type, <any>onPluginAnnounce, {
+    once: true,
+    capture: false,
+  });
+}
+
+/**
+ * Fired once when an `riotPlugin.announce:<name>` event is dispatched.
+ * Replaces the event's `registrationHandler` with our wrapper so that when
+ * Riot's plugin loader calls it, our before/after lifecycle runs around
+ * the real registrar.
+ */
+function onPluginAnnounce(event: RcpAnnouceEvent) {
+  const name = event.type.substring(RCPE_PREF_LEN);
+  const handler = event.registrationHandler;
+
+  function handlerWrap(this: any, registrar: Parameters<typeof handler>[0]): ReturnType<typeof handler> {
+    // Forward to the original handler with a wrapped registrar that runs
+    // our lifecycle around the real one. The outer `handler.call(this, ...)`
+    // preserves whatever `this` Riot intends for the handler.
+    return handler.call(this, async (provider: any) => {
+      const container: PluginContainer = { impl: null, state: 'preInit' };
+      _plugins.set(name, container);
+
+      // Run all `before` callbacks (registered via rcp.preInit).
+      // Awaited so the registrar doesn't run until preInit work completes.
+      await invokeCallbacks(name, 'before', provider);
+      container.state = 'init';
+
+      // Run Riot's actual registrar; the returned value is the plugin api.
+      const api = await registrar(provider);
+      container.impl = api;
+      container.state = 'postInit';
+
+      // Run all `after` callbacks (registered via rcp.postInit / whenReady).
+      // Non-blocking callbacks were wrapped to fire-and-forget at registration
+      // time, so awaiting Promise.allSettled here only delays for blocking ones.
+      await invokeCallbacks(name, 'after', api);
+      container.state = 'fulfilled';
+
+      return api;
+    });
+  }
+
+  // Replace the announce event's registrationHandler with our wrapper.
+  // The announce event hasn't been fully dispatched yet — listeners run
+  // before dispatchEvent returns — so subsequent listeners (Riot's plugin
+  // loader) will see the wrapped value.
+  Object.defineProperty(event, 'registrationHandler', {
+    value: handlerWrap,
+  });
+}
+
+/**
+ * Drain a queue of callbacks for a plugin. New callbacks added during an
+ * await are picked up by the next loop iteration — important because a
+ * preInit/postInit callback may itself register additional callbacks for
+ * the same plugin (rare, but legal).
+ */
+async function invokeCallbacks(name: string, type: CallbackType, ...args: any[]) {
+  const container = _callbacks.get(name);
+  if (container === undefined) return;
+
+  const callbacks = container[type];
+  if (callbacks === undefined) return;
+
+  while (callbacks.length > 0) {
+    // Decrement total count by the size of THIS batch before draining,
+    // so concurrent registrations (which increment _count) don't desync.
+    container._count -= callbacks.length;
+    // Promise.allSettled — one bad callback shouldn't stop the others;
+    // their exceptions are swallowed (they should log themselves if needed).
+    await Promise.allSettled(callbacks.splice(0).map(cb => cb(...args)));
+  }
+
+  // Free the container once both queues are fully consumed.
+  if (container._count === 0) {
+    _callbacks.delete(name);
+  }
+}
+
+/**
+ * Register a callback in the pending queue. Lazily creates the container
+ * and the document-level announce subscription on first use per plugin.
+ */
+function addCallback(name: string, callback: Callback, type: CallbackType) {
+  let container = _callbacks.get(name);
+  if (container === undefined) {
+    container = { _count: 0, [type]: [] };
+    _callbacks.set(name, container);
+    // First time we care about this plugin — start listening for its announce.
+    subscribePlugin(name);
+  }
+
+  let callbacks = container[type];
+  if (callbacks === undefined) {
+    callbacks = [];
+    container[type] = callbacks;
+  }
+
+  container._count++;
+  callbacks.push(callback);
+}
+
+/**
+ * Normalise a user-provided plugin name. Riot's plugins are all prefixed
+ * with `rcp-` and are case-insensitive in the announce protocol, but our
+ * Map lookups are case-sensitive — so we lowercase and ensure the prefix
+ * before any registry access. Applied at every public entrypoint so
+ * `rcp.preInit('FE-Common-Libs', fn)` and `rcp.preInit('rcp-fe-common-libs', fn)`
+ * resolve identically.
+ */
+function ensureName(name: string) {
+  name = String(name).toLowerCase();
+  if (!name.startsWith('rcp-')) {
+    return 'rcp-' + name;
+  }
+  return name;
+}
+
+/**
+ * Register a callback to run BEFORE the named plugin's registrar.
+ * Returns true if accepted (plugin is unknown or still in `preInit` state),
+ * false if the plugin has already moved past `preInit` (in which case the
+ * callback is ignored — register earlier, or use `postInit` / `whenReady`).
+ */
+function preInit(name: string, callback: (provider: any) => any): boolean {
+  if (typeof callback !== 'function')
+    throw new TypeError(`${callback} is not a function`);
+
+  name = ensureName(name);
+  const plugin = _plugins.get(name);
+
+  if (plugin === undefined || plugin.state === 'preInit') {
+    addCallback(name, callback, 'before');
+    return true;
+  }
+
+  return false;
+}
+
+/**
+ * Register a callback to run AFTER the named plugin's registrar returns its
+ * api. Returns true if accepted (plugin is unknown or not yet `fulfilled`),
+ * false if already fulfilled.
+ *
+ * `blocking = false` (the default) wraps the callback so it runs as a
+ * fire-and-forget side-effect — its return value/promise is discarded so
+ * a slow callback doesn't delay the plugin's transition to `fulfilled`.
+ * Pass `blocking = true` only when you genuinely need to delay the plugin
+ * lifecycle (e.g. installing required mocks before the plugin is observed
+ * as fulfilled by other consumers).
+ */
+function postInit(name: string, callback: (api: any) => any, blocking: boolean = false) {
+  if (typeof callback !== 'function')
+    throw new TypeError(`${callback} is not a function`);
+
+  name = ensureName(name);
+  const plugin = _plugins.get(name);
+
+  if (plugin !== undefined && plugin.state === 'fulfilled')
+    return false;
+
+  addCallback(name, blocking ? callback : (api: any) => void callback(api), 'after');
+  return true;
+}
+
+/**
+ * Promise-based equivalent of postInit. Resolves with the plugin's api when
+ * it reaches `fulfilled`. If the plugin is already fulfilled, resolves
+ * synchronously on the next microtask with the cached impl.
+ */
+function whenReadyOne(name: string) {
+  return new Promise<any>(resolve => {
+    // postInit returns false only when the plugin is already fulfilled,
+    // in which case we read the cached impl directly instead of waiting.
+    if (!postInit(name, resolve)) {
+      const plugin = _plugins.get(name)!;
+      resolve(plugin.impl);
+    }
+  });
+}
+
+/** Resolves with an array of impls, in the same order as `names`. */
+function whenReadyAll(names: string[]) {
+  return Promise.all(names.map(name => whenReadyOne(name)));
+}
+
+function whenReady(name: string): Promise<any>;
+function whenReady(names: string[]): Promise<any[]>;
+function whenReady(param: any) {
+  if (typeof param === 'string') {
+    return whenReadyOne(ensureName(param));
+  }
+  if (Array.isArray(param)) {
+    return whenReadyAll(param.map(ensureName));
+  }
+  throw new TypeError(`unexpected argument ${param}`);
+}
+
+/**
+ * Synchronous lookup. Returns the api if the plugin is fulfilled (or beyond
+ * postInit), undefined otherwise. Does NOT wait — use `whenReady` if you
+ * need to synchronise with a plugin that may not have announced yet.
+ */
+function get(name: string) {
+  name = ensureName(name);
+  return _plugins.get(name)?.impl;
+}
+
+export const rcp = {
+  preInit,
+  postInit,
+  whenReady,
+  get,
+  // Plugin dependency graph access (see ./graph.ts).
+  graph,
+  dependencies,
+  dependents,
+  names,
+};
+
+// Expose on `window` for advanced plugin authors who don't have access to
+// the init context. Frozen properties (non-configurable, non-writable, not
+// enumerable) so plugins can't accidentally shadow or replace it.
+Object.defineProperty(window, 'rcp', {
+  value: rcp,
+  enumerable: false,
+  configurable: false,
+  writable: false,
+});
diff --git a/plugins/src/preload/rcp/index.ts b/packages/preload/src/preload/rcp/index.ts
similarity index 100%
rename from plugins/src/preload/rcp/index.ts
rename to packages/preload/src/preload/rcp/index.ts
diff --git a/packages/preload/src/preload/rcp/socket.ts b/packages/preload/src/preload/rcp/socket.ts
new file mode 100644
index 00000000..384158ca
--- /dev/null
+++ b/packages/preload/src/preload/rcp/socket.ts
@@ -0,0 +1,187 @@
+import { rcp } from './hooks';
+
+/**
+ * LCDS event subscription.
+ *
+ * LCUX talks to its backend over a WAMP-over-WebSocket connection. Every
+ * LCDS state change (summoner data, gameflow, party, ...) is published as
+ * a WAMP type-8 EVENT frame on the broadcast endpoint `OnJsonApiEvent`.
+ * The frame body has the shape `{data, uri, eventType}` where:
+ *   - `uri` is the LCDS path (e.g. `/lol-summoner/v1/current-summoner`),
+ *   - `eventType` is `Create | Update | Delete`,
+ *   - `data` is the resource payload (or null for Delete).
+ *
+ * This module exposes `socket.observe(api, fn)` for plugins to subscribe
+ * to those events, and routes incoming frames to matching listeners.
+ *
+ * # How we get the socket
+ *
+ * Riot's frontend already maintains the WAMP connection on
+ * `provider.context.socket._websocket` for the `rcp-fe-common-libs` plugin.
+ * We attach a `message` listener to that same WebSocket — no second
+ * connection, no duplicate TLS handshake, no separate WAMP session.
+ *
+ * # Why we don't use Riot's `socket.subscribe`
+ *
+ * Riot's `socket` object exposes a `subscribe(uri, context, action)` method,
+ * but in this CEF/CEF108 build the underlying `_socket` (the WAMP-aware
+ * wrapper that would forward subscribes to the wire) is permanently
+ * undefined. Calling `subscribe` only registers a local handler in the
+ * dispatcher; no WAMP SUBSCRIBE goes on the wire. So in practice subscribing
+ * via Riot's socket would only work for the broadcast endpoint, which Riot's
+ * frontend already subscribed to. We therefore listen on the raw WebSocket
+ * and parse frames ourselves — same delivery, simpler dispatch, full
+ * `{data, uri, eventType}` envelope preserved (Riot's dispatcher would
+ * have stripped `eventType` and `uri`, passing only `body.data`).
+ *
+ * # Server-side filtering: not used
+ *
+ * Riot only ever pushes events to `OnJsonApiEvent` (the broadcast). Pengu's
+ * older `socket.observe('lol-summoner/v1/current-summoner', fn)` API
+ * accepts URI-style names, but with this socket impl the server doesn't
+ * filter by scope — every event flows through and we filter client-side
+ * by matching `body.uri` to the listener's registered key. For typical
+ * LCUX traffic (a few events per minute at idle) this is negligible.
+ */
+
+interface EventData {
+  data: any;
+  uri: string;
+  eventType: 'Create' | 'Update' | 'Delete';
+}
+
+interface ApiListener {
+  (message: EventData): void;
+}
+
+/**
+ * Map from `buildApi(api)` key to its registered listener functions.
+ * Two key shapes coexist:
+ *   - `OnJsonApiEvent`                                  — broadcast subscribers
+ *     (registered via observe('all', fn))
+ *   - `OnJsonApiEvent_<flattened-uri>`                  — scoped subscribers
+ *     (registered via observe('lol-x/v1/y', fn) or observe('/lol-x/v1/y', fn))
+ *
+ * `flattened-uri` replaces every `/` with `_`, so `/lol-x/v1/y` becomes
+ * `_lol-x_v1_y`. This is the convention from the original Pengu socket; we
+ * keep it for backwards compatibility with existing user plugins.
+ */
+const listenersMap = new Map<string, Array<ApiListener>>();
+
+/**
+ * Guards against re-registering our message handler if `rcp-fe-common-libs`
+ * preInit ever fires twice (it shouldn't, but defensive). Set on first
+ * successful attach; never reset.
+ */
+let attached = false;
+
+// Capture the WAMP WebSocket on the first announce of rcp-fe-common-libs.
+// This callback runs during the plugin's `before` phase, so the socket is
+// already constructed but the plugin's registrar hasn't run yet — a fine
+// time to add a passive message listener.
+rcp.preInit('rcp-fe-common-libs', async function (provider) {
+  if (attached) return;
+  const ws: WebSocket | undefined = provider?.context?.socket?._websocket;
+  if (!ws) return;
+  attached = true;
+  ws.addEventListener('message', handleMessage);
+});
+
+/**
+ * Parse a WAMP frame and dispatch to matching listeners.
+ *
+ * WAMP frame format on this socket: `[type, endpoint, body]` where
+ * type 8 = EVENT. Anything else (HELLO, RESULT, GOODBYE, heartbeat) is
+ * ignored. The body for type-8 events is `{data, uri, eventType}`.
+ *
+ * Listeners are invoked via `setTimeout(..., 0)` rather than synchronously
+ * so an exception in one listener can't disrupt other listeners or the
+ * underlying WebSocket message loop. This also yields back to the event
+ * loop between callbacks, keeping the UI responsive when many listeners
+ * are registered.
+ */
+function handleMessage(ev: MessageEvent<string>) {
+  let frame: any;
+  try { frame = JSON.parse(ev.data); }
+  catch { return; }
+  if (!Array.isArray(frame) || frame[0] !== 8) return;
+  const body = frame[2] as EventData | undefined;
+  if (!body || typeof body !== 'object') return;
+
+  // Broadcast: every observer registered with api='all' gets every event.
+  const all = listenersMap.get('OnJsonApiEvent');
+  if (all) for (const cb of all) setTimeout(() => cb(body), 0);
+
+  // Scoped: route by the body's inner uri to listeners registered with a
+  // matching path. Lowercased + slashes-to-underscores so plugin authors
+  // can use either '/lol-x/v1/y' or 'lol-x/v1/y' without caring about case.
+  if (typeof body.uri === 'string') {
+    const key = 'OnJsonApiEvent' + body.uri.toLowerCase().replace(/\//g, '_');
+    const scoped = listenersMap.get(key);
+    if (scoped) for (const cb of scoped) setTimeout(() => cb(body), 0);
+  }
+}
+
+/**
+ * Build the listenersMap key from a user-supplied api string.
+ *
+ * - `api === 'all'` → `OnJsonApiEvent` (broadcast)
+ * - anything else → `OnJsonApiEvent_<lowercased, slashes-to-underscores>`
+ *
+ * Leading and trailing slashes are stripped first, so the normalized form
+ * matches keys produced from `body.uri` in `handleMessage`.
+ */
+function buildApi(api: string): string {
+  if (api === 'all') return 'OnJsonApiEvent';
+  api = api.toLowerCase().replace(/^\/+|\/+$/g, '');
+  return 'OnJsonApiEvent_' + api.replace(/\//g, '_');
+}
+
+/**
+ * Subscribe to LCDS events.
+ *
+ * Returns an object with a `disconnect()` method on success; returns
+ * `false` if either argument is invalid (non-string api, empty api,
+ * non-function listener).
+ *
+ * Multiple listeners can register for the same api; they're invoked in
+ * registration order on each event. Subscribing the same listener twice
+ * registers it twice (no dedupe).
+ */
+function observe(api: string, listener: ApiListener) {
+  if (typeof api !== 'string' || api === ''
+    || typeof listener !== 'function')
+    return false;
+
+  const endpoint = buildApi(api);
+  const arr = listenersMap.get(endpoint);
+  if (arr) arr.push(listener);
+  else listenersMap.set(endpoint, [listener]);
+
+  return {
+    disconnect: () => disconnect(api, listener),
+  };
+}
+
+/**
+ * Remove a previously-registered listener. Returns `true` if the
+ * listener was found and removed, `false` if no matching listener
+ * was registered for this api (silent — not an error).
+ *
+ * Note: this only removes the specific listener function. Other
+ * listeners on the same api stay registered.
+ */
+function disconnect(api: string, listener: ApiListener) {
+  const endpoint = buildApi(api);
+  const arr = listenersMap.get(endpoint);
+  if (!arr) return false;
+  const filtered = arr.filter(x => x !== listener);
+  if (filtered.length === 0) listenersMap.delete(endpoint);
+  else listenersMap.set(endpoint, filtered);
+  return true;
+}
+
+export const socket = {
+  observe,
+  disconnect,
+};
diff --git a/plugins/src/preload/super-potato.ts b/packages/preload/src/preload/super-potato.ts
similarity index 100%
rename from plugins/src/preload/super-potato.ts
rename to packages/preload/src/preload/super-potato.ts
diff --git a/plugins/src/types.d.ts b/packages/preload/src/types.d.ts
similarity index 100%
rename from plugins/src/types.d.ts
rename to packages/preload/src/types.d.ts
diff --git a/plugins/src/views/App.tsx b/packages/preload/src/views/App.tsx
similarity index 100%
rename from plugins/src/views/App.tsx
rename to packages/preload/src/views/App.tsx
diff --git a/plugins/src/views/assets/pengu.jpg b/packages/preload/src/views/assets/pengu.jpg
similarity index 100%
rename from plugins/src/views/assets/pengu.jpg
rename to packages/preload/src/views/assets/pengu.jpg
diff --git a/plugins/src/views/assets/pengu2.jpg b/packages/preload/src/views/assets/pengu2.jpg
similarity index 100%
rename from plugins/src/views/assets/pengu2.jpg
rename to packages/preload/src/views/assets/pengu2.jpg
diff --git a/plugins/src/views/components/CommandBar/Animator.tsx b/packages/preload/src/views/components/CommandBar/Animator.tsx
similarity index 98%
rename from plugins/src/views/components/CommandBar/Animator.tsx
rename to packages/preload/src/views/components/CommandBar/Animator.tsx
index 7be2fc28..be3d01ef 100644
--- a/plugins/src/views/components/CommandBar/Animator.tsx
+++ b/packages/preload/src/views/components/CommandBar/Animator.tsx
@@ -93,7 +93,7 @@ export function Animator(props) {
   return (
     <div
       ref={outerRef!}
-      class="w-full h-full"
+      class="pengu-cmdbar-animator"
       style={appearanceAnimationKeyframes[0]}
     >
       <div ref={innerRef!}>
diff --git a/plugins/src/views/components/CommandBar/SearchBar.tsx b/packages/preload/src/views/components/CommandBar/SearchBar.tsx
similarity index 77%
rename from plugins/src/views/components/CommandBar/SearchBar.tsx
rename to packages/preload/src/views/components/CommandBar/SearchBar.tsx
index 116c07fa..122989d5 100644
--- a/plugins/src/views/components/CommandBar/SearchBar.tsx
+++ b/packages/preload/src/views/components/CommandBar/SearchBar.tsx
@@ -19,9 +19,9 @@ export function SearchBar() {
   };
 
   return (
-    <div class="flex items-center px-3 border-b border-gray-300 bg-white/90">
+    <div class="pengu-cmdbar-search">
       <svg
-        class="w-4 h-4 mr-0 text-neutral-400 shrink-0"
+        class="pengu-cmdbar-search-icon"
         xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
         fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
       >
@@ -34,8 +34,7 @@ export function SearchBar() {
         onKeyDown={onKeyDown}
         onInput={e => setSearch(e.target.value)}
         onBlur={() => setTimeout(() => input.focus(), 50)}
-        class="flex w-full px-2 py-3 text-sm bg-transparent border-none rounded-md outline-none
-        placeholder:text-neutral-400 h-11 disabled:cursor-not-allowed disabled:opacity-50"
+        class="pengu-cmdbar-search-input"
         placeholder={_t('cmdbar_type_hint')} autocomplete="off" autocorrect="off" spellcheck={false}
       />
     </div>
diff --git a/plugins/src/views/components/CommandBar/SearchItem.tsx b/packages/preload/src/views/components/CommandBar/SearchItem.tsx
similarity index 65%
rename from plugins/src/views/components/CommandBar/SearchItem.tsx
rename to packages/preload/src/views/components/CommandBar/SearchItem.tsx
index f78bc31f..378f2dfa 100644
--- a/plugins/src/views/components/CommandBar/SearchItem.tsx
+++ b/packages/preload/src/views/components/CommandBar/SearchItem.tsx
@@ -13,22 +13,20 @@ export function SearchItem(props: Props) {
   const { activeIndex, setActiveIndex } = useRoot();
 
   return (
-    <div class="px-1">
+    <div class="pengu-cmdbar-item-wrap">
       <div
         data-index={props.index}
         data-active={activeIndex() === props.index}
         onClick={props.click}
         onMouseMove={() => setActiveIndex(props.index)}
-        class="cursor-pointer relative flex select-none items-center rounded px-2 py-1.5
-          text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-          data-[active=true]:bg-slate-700 data-[active=true]:text-white"
+        class="pengu-cmdbar-item"
       >
         <Show when={props.item.icon}>
           <span innerHTML={props.item.icon}></span>
         </Show>
         <span>{evaluate(props.item.name)}</span>
         <Show when={props.item.legend}>
-          <span class="ml-auto text-xs tracking-widest">{evaluate(props.item.legend)}</span>
+          <span class="pengu-cmdbar-item-legend">{evaluate(props.item.legend)}</span>
         </Show>
       </div>
     </div>
diff --git a/plugins/src/views/components/CommandBar/SearchResults.tsx b/packages/preload/src/views/components/CommandBar/SearchResults.tsx
similarity index 91%
rename from plugins/src/views/components/CommandBar/SearchResults.tsx
rename to packages/preload/src/views/components/CommandBar/SearchResults.tsx
index 5a8bb8f1..913b92c5 100644
--- a/plugins/src/views/components/CommandBar/SearchResults.tsx
+++ b/packages/preload/src/views/components/CommandBar/SearchResults.tsx
@@ -96,16 +96,13 @@ export function SearchResults() {
   });
 
   return (
-    <div
-      ref={containerRef!}
-      class="max-h-[320px] overflow-y-auto overflow-x-hidden scroll-smooth"
-    >
+    <div ref={containerRef!} class="pengu-cmdbar-results">
       <For each={filteredItems()}>
         {(item, index) => (
-          <div class="pb-1 space-y-1">
+          <div class="pengu-cmdbar-group">
             <Show when={shouldShowCategory(item, index())}>
-              <div class="px-1 overflow-hidden text-gray-700">
-                <div class="px-2 py-1 my-1 text-xs font-medium text-neutral-500 capitalize">
+              <div class="pengu-cmdbar-category">
+                <div class="pengu-cmdbar-category-label">
                   {evaluate(item.group)}
                 </div>
               </div>
diff --git a/plugins/src/views/components/CommandBar/data.ts b/packages/preload/src/views/components/CommandBar/data.ts
similarity index 100%
rename from plugins/src/views/components/CommandBar/data.ts
rename to packages/preload/src/views/components/CommandBar/data.ts
diff --git a/plugins/src/views/components/CommandBar/index.tsx b/packages/preload/src/views/components/CommandBar/index.tsx
similarity index 62%
rename from plugins/src/views/components/CommandBar/index.tsx
rename to packages/preload/src/views/components/CommandBar/index.tsx
index 53f63e7b..e80dd1d6 100644
--- a/plugins/src/views/components/CommandBar/index.tsx
+++ b/packages/preload/src/views/components/CommandBar/index.tsx
@@ -3,6 +3,7 @@ import { useRoot, VisualState } from './root';
 import { SearchBar } from './SearchBar';
 import { SearchResults } from './SearchResults';
 import { Animator } from './Animator';
+import './style.css';
 
 export function CommandBar() {
 
@@ -23,15 +24,11 @@ export function CommandBar() {
 
   return (
     <Show when={!hidden()}>
-      <div class="fixed top-0 left-0 z-[99] flex items-center justify-center w-screen h-screen">
-        <div
-          class="absolute inset-0 w-full h-full bg-black bg-opacity-40"
-          onClick={backdropClick}
-        />
-        <div class="flex min-h-[370px] justify-center w-full max-w-xl items-start relative">
+      <div class="pengu-cmdbar-overlay">
+        <div class="pengu-cmdbar-backdrop" onClick={backdropClick} />
+        <div class="pengu-cmdbar-container">
           <Animator>
-            <div class="box-border flex flex-col w-full h-full overflow-hidden
-           bg-white rounded-md shadow-md bg-opacity-90 drop-shadow-md backdrop-blur-sm">
+            <div class="pengu-cmdbar-panel">
               <SearchBar />
               <SearchResults />
             </div>
diff --git a/plugins/src/views/components/CommandBar/root.ts b/packages/preload/src/views/components/CommandBar/root.ts
similarity index 100%
rename from plugins/src/views/components/CommandBar/root.ts
rename to packages/preload/src/views/components/CommandBar/root.ts
diff --git a/packages/preload/src/views/components/CommandBar/style.css b/packages/preload/src/views/components/CommandBar/style.css
new file mode 100644
index 00000000..b396d54d
--- /dev/null
+++ b/packages/preload/src/views/components/CommandBar/style.css
@@ -0,0 +1,149 @@
+/* CommandBar — plain CSS, no Tailwind/twind. Class names prefixed `pengu-cmdbar-`
+   to avoid collisions with LCUX's own styles (light DOM after dropping shadow). */
+
+.pengu-cmdbar-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+}
+
+.pengu-cmdbar-backdrop {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.pengu-cmdbar-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: 36rem;
+  min-height: 370px;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.pengu-cmdbar-panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+              0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(4px);
+}
+
+.pengu-cmdbar-search {
+  display: flex;
+  align-items: center;
+  padding: 0 0.75rem;
+  border-bottom: 1px solid #d1d5db;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.pengu-cmdbar-search-icon {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  color: #a3a3a3;
+}
+
+.pengu-cmdbar-search-input {
+  display: flex;
+  width: 100%;
+  padding: 0.75rem 0.5rem;
+  height: 2.75rem;
+  font-size: 0.875rem;
+  background-color: transparent;
+  border: none;
+  border-radius: 0.375rem;
+  outline: none;
+}
+
+.pengu-cmdbar-search-input::placeholder {
+  color: #a3a3a3;
+}
+
+.pengu-cmdbar-search-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pengu-cmdbar-results {
+  max-height: 320px;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scroll-behavior: smooth;
+}
+
+.pengu-cmdbar-group {
+  padding-bottom: 0.25rem;
+}
+
+.pengu-cmdbar-group + .pengu-cmdbar-group {
+  margin-top: 0.25rem;
+}
+
+.pengu-cmdbar-category {
+  padding: 0 0.25rem;
+  overflow: hidden;
+  color: #374151;
+}
+
+.pengu-cmdbar-category-label {
+  padding: 0.25rem 0.5rem;
+  margin: 0.25rem 0;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #737373;
+  text-transform: capitalize;
+}
+
+.pengu-cmdbar-item-wrap {
+  padding: 0 0.25rem;
+}
+
+.pengu-cmdbar-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  outline: none;
+  color: inherit;
+  background: transparent;
+}
+
+.pengu-cmdbar-item[data-active="true"] {
+  background-color: #334155;
+  color: #ffffff;
+}
+
+.pengu-cmdbar-item[data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+.pengu-cmdbar-item-legend {
+  margin-left: auto;
+  font-size: 0.75rem;
+  letter-spacing: 0.1em;
+}
+
+.pengu-cmdbar-animator {
+  width: 100%;
+  height: 100%;
+}
diff --git a/plugins/src/views/components/CommandBar/utils.ts b/packages/preload/src/views/components/CommandBar/utils.ts
similarity index 100%
rename from plugins/src/views/components/CommandBar/utils.ts
rename to packages/preload/src/views/components/CommandBar/utils.ts
diff --git a/plugins/src/views/components/Toaster.tsx b/packages/preload/src/views/components/Toaster.tsx
similarity index 100%
rename from plugins/src/views/components/Toaster.tsx
rename to packages/preload/src/views/components/Toaster.tsx
diff --git a/packages/preload/src/views/components/Welcome.css b/packages/preload/src/views/components/Welcome.css
new file mode 100644
index 00000000..b5a126ce
--- /dev/null
+++ b/packages/preload/src/views/components/Welcome.css
@@ -0,0 +1,228 @@
+/* Welcome — plain CSS, prefixed `pengu-welcome-`. Light DOM. */
+
+.pengu-welcome {
+  position: relative;
+  z-index: 10;
+}
+
+.pengu-welcome-backdrop {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  transition: opacity 0.15s ease-out;
+}
+
+.pengu-welcome-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 10;
+  overflow-y: auto;
+}
+
+.pengu-welcome-center {
+  display: flex;
+  min-height: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 0;
+}
+
+.pengu-welcome-modal {
+  position: relative;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  background-color: #ffffff;
+  text-align: left;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
+              0 8px 10px -6px rgba(0, 0, 0, 0.1);
+  margin: 2rem 0;
+  max-width: 32rem;
+  transition: all 0.15s ease-out;
+}
+
+.pengu-welcome-body {
+  background-color: #ffffff;
+  padding: 1.25rem 1.5rem 1rem;
+}
+
+.pengu-welcome-row {
+  display: flex;
+  align-items: flex-start;
+}
+
+.pengu-welcome-logo-wrap {
+  margin: 0 auto;
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  width: 2.5rem;
+}
+
+.pengu-welcome-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 0.25rem;
+}
+
+.pengu-welcome-text {
+  margin-left: 1rem;
+  text-align: left;
+}
+
+.pengu-welcome-title {
+  font-size: 1rem;
+  margin: 0;
+  font-weight: 600;
+  line-height: 1.5rem;
+  color: #111827;
+}
+
+.pengu-welcome-desc {
+  margin-top: 0.5rem;
+}
+
+.pengu-welcome-msg {
+  font-size: 0.875rem;
+  color: #000000;
+}
+
+.pengu-welcome-badges {
+  display: flex;
+  margin-top: 1.25rem;
+  gap: 0.25rem;
+}
+
+.pengu-welcome-badge {
+  opacity: 0.9;
+  transition: opacity 0.1s ease-out;
+}
+
+.pengu-welcome-badge:hover {
+  opacity: 1;
+}
+
+.pengu-welcome-footer {
+  background-color: #f9fafb;
+  padding: 0.75rem 1.5rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.pengu-welcome-checkbox-wrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.pengu-welcome-checkbox {
+  height: 1rem;
+  width: 1rem;
+  border-radius: 0.25rem;
+  outline: none;
+}
+
+.pengu-welcome-checkbox-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #374151;
+}
+
+.pengu-welcome-ok {
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  outline: none;
+  border: none;
+  background-color: rgba(209, 213, 219, 0.6);
+  padding: 0.25rem 0.75rem;
+  color: #111827;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: background-color 0.1s ease-out;
+}
+
+.pengu-welcome-ok:hover {
+  background-color: #d1d5db;
+}
+
+/* Update toast (rendered via toast.custom from doCheckUpdate). */
+
+.pengu-update-toast {
+  position: relative;
+  width: 370px;
+  background-color: #ffffff;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+              0 4px 6px -4px rgba(0, 0, 0, 0.1),
+              0 0 0 1px rgba(0, 0, 0, 0.05);
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.pengu-update-toast.is-hidden {
+  display: none;
+}
+
+.pengu-update-toast-body {
+  padding: 0.5rem;
+}
+
+.pengu-update-toast-row {
+  display: flex;
+  align-items: flex-start;
+}
+
+.pengu-update-toast-icon {
+  flex-shrink: 0;
+  padding-top: 2px;
+  color: #4b5563;
+}
+
+.pengu-update-toast-content {
+  margin-left: 0.75rem;
+  flex: 1;
+  min-width: 0;
+  padding-top: 0.125rem;
+}
+
+.pengu-update-toast-title {
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: #0ea5e9;
+}
+
+.pengu-update-toast-hint {
+  margin: 0.25rem 0 0;
+  font-size: 0.875rem;
+  color: #374151;
+}
+
+.pengu-update-toast-actions {
+  margin-left: 1rem;
+  flex-shrink: 0;
+  display: flex;
+}
+
+.pengu-update-toast-close {
+  background-color: #ffffff;
+  border-radius: 0.375rem;
+  border: none;
+  display: inline-flex;
+  color: #9ca3af;
+  cursor: pointer;
+  padding: 0;
+}
+
+.pengu-update-toast-close:hover {
+  color: #6b7280;
+}
+
+.pengu-update-toast-close-icon {
+  height: 1.25rem;
+  width: 1.25rem;
+}
diff --git a/plugins/src/views/components/Welcome.tsx b/packages/preload/src/views/components/Welcome.tsx
similarity index 56%
rename from plugins/src/views/components/Welcome.tsx
rename to packages/preload/src/views/components/Welcome.tsx
index 55be9e2c..bb7fd8b7 100644
--- a/plugins/src/views/components/Welcome.tsx
+++ b/packages/preload/src/views/components/Welcome.tsx
@@ -3,6 +3,7 @@ import penguLogo from '../assets/pengu.jpg';
 import { toast } from './Toaster';
 import { _t } from '../lib/i18n';
 import { fetchUpdate } from '../lib/updater';
+import './Welcome.css';
 
 async function doCheckUpdate() {
   const update = await fetchUpdate();
@@ -10,10 +11,10 @@ async function doCheckUpdate() {
 
   toast.custom((t) => {
     return (
-      <div class={`${!t.visible && 'hidden'} relative w-[370px] bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden`}>
-        <div class="p-2">
-          <div class="flex items-start">
-            <div class="flex-shrink-0 pt-[2px] text-gray-600">
+      <div class={`pengu-update-toast ${!t.visible ? 'is-hidden' : ''}`}>
+        <div class="pengu-update-toast-body">
+          <div class="pengu-update-toast-row">
+            <div class="pengu-update-toast-icon">
               <svg width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M9 12h-3.586a1 1 0 0 1 -.707 -1.707l6.586 -6.586a1 1 0 0 1 1.414 0l6.586 6.586a1 1 0 0 1 -.707 1.707h-3.586v3h-6v-3z"></path>
@@ -21,23 +22,22 @@ async function doCheckUpdate() {
                 <path d="M9 18h6"></path>
               </svg>
             </div>
-            <div class="ml-3 w-0 flex-1 pt-0.5">
-              <p class="text-sm font-bold text-sky-500">{_t('update_available')} - {update.version}</p>
-              <p class="mt-1 text-sm text-gray-700">{_t('update_hint')}</p>
+            <div class="pengu-update-toast-content">
+              <p class="pengu-update-toast-title">{_t('update_available')} - {update.version}</p>
+              <p class="pengu-update-toast-hint">{_t('update_hint')}</p>
             </div>
-            <div class="ml-4 flex-shrink-0 flex">
+            <div class="pengu-update-toast-actions">
               <button
-                class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500"
+                class="pengu-update-toast-close"
                 onClick={() => toast.dismiss(t.id)}
               >
-                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                <svg class="pengu-update-toast-close-icon" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                 </svg>
               </button>
             </div>
           </div>
         </div>
-
       </div>
     )
   }, { duration: 30000, position: 'bottom-left' });
@@ -70,28 +70,28 @@ export function Welcome() {
 
   return (
     <Show when={visible()}>
-      <div class="z-10 relative">
-        <div class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>
-        <div class="fixed inset-0 z-10 overflow-y-auto">
-          <div class="flex min-h-full justify-center text-center items-center p-0">
-            <div class="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all my-8 max-w-lg">
-              <div class="bg-white px-4 pt-5 p-6 pb-4">
-                <div class="sm:flex sm:items-start">
-                  <div class="mx-auto flex flex-shrink-0 items-center justify-center h-10 w-10">
-                    <img src={penguLogo} class="w-10 h-10 rounded" alt="" />
+      <div class="pengu-welcome">
+        <div class="pengu-welcome-backdrop"></div>
+        <div class="pengu-welcome-overlay">
+          <div class="pengu-welcome-center">
+            <div class="pengu-welcome-modal">
+              <div class="pengu-welcome-body">
+                <div class="pengu-welcome-row">
+                  <div class="pengu-welcome-logo-wrap">
+                    <img src={penguLogo} class="pengu-welcome-logo" alt="" />
                   </div>
-                  <div class="ml-4 mt-0 text-left">
-                    <h3 class="text-base mt-0 font-semibold leading-6 text-gray-900">Pengu Loader</h3>
-                    <div class="mt-2">
-                      <div class="text-sm text-black">{_t('welcome_msg')}</div>
-                      <div class="flex mt-5 space-x-1">
-                        <a href="https://chat.pengu.lol/" target="_blank" rel="noreferrer" class="opacity-90 hover:opacity-100">
+                  <div class="pengu-welcome-text">
+                    <h3 class="pengu-welcome-title">Pengu Loader</h3>
+                    <div class="pengu-welcome-desc">
+                      <div class="pengu-welcome-msg">{_t('welcome_msg')}</div>
+                      <div class="pengu-welcome-badges">
+                        <a href="https://chat.pengu.lol/" target="_blank" rel="noreferrer" class="pengu-welcome-badge">
                           <img src="https://img.shields.io/discord/1069483280438673418?style=flat-square&logo=discord&logoColor=white&label=discord&color=5c5fff" alt="" />
                         </a>
-                        <a href="https://pengu.lol/" target="_blank" rel="noreferrer" class="opacity-90 hover:opacity-100">
+                        <a href="https://pengu.lol/" target="_blank" rel="noreferrer" class="pengu-welcome-badge">
                           <img src="https://img.shields.io/badge/-pengu.lol-607080.svg?&style=flat-square&logo=gitbook&logoColor=white" alt="" />
                         </a>
-                        <a href="https://github.com/PenguLoader/PenguLoader/" target="_blank" rel="noreferrer" class="opacity-90 hover:opacity-100">
+                        <a href="https://github.com/PenguLoader/PenguLoader/" target="_blank" rel="noreferrer" class="pengu-welcome-badge">
                           <img src="https://img.shields.io/github/stars/PenguLoader/PenguLoader?style=flat-square&logo=github" alt="" />
                         </a>
                       </div>
@@ -99,15 +99,15 @@ export function Welcome() {
                   </div>
                 </div>
               </div>
-              <div class="bg-gray-50 py-3 flex flex-row justify-between items-center px-6">
-                <div class="flex items-center space-x-2">
-                  <input type="checkbox" id="TxrO6Gew" onChange={dontShowCheck} class="h-4 w-4 rounded border-gray-300 outline-none" />
-                  <label for="TxrO6Gew" class="text-sm font-medium text-gray-700">{_t('dont_show_again')}</label>
+              <div class="pengu-welcome-footer">
+                <div class="pengu-welcome-checkbox-wrap">
+                  <input type="checkbox" id="TxrO6Gew" onChange={dontShowCheck} class="pengu-welcome-checkbox" />
+                  <label for="TxrO6Gew" class="pengu-welcome-checkbox-label">{_t('dont_show_again')}</label>
                 </div>
                 <button
                   onClick={hide}
                   type="button"
-                  class="uppercase text-sm outline-none border-none bg-gray-300/60 px-3 py-1 text-gray-900 rounded hover:bg-gray-300 cursor-pointer"
+                  class="pengu-welcome-ok"
                 >Okay</button>
               </div>
             </div>
@@ -116,4 +116,4 @@ export function Welcome() {
       </div>
     </Show>
   )
-}
\ No newline at end of file
+}
diff --git a/plugins/src/views/env.d.ts b/packages/preload/src/views/env.d.ts
similarity index 100%
rename from plugins/src/views/env.d.ts
rename to packages/preload/src/views/env.d.ts
diff --git a/packages/preload/src/views/index.tsx b/packages/preload/src/views/index.tsx
new file mode 100644
index 00000000..7cb18f6a
--- /dev/null
+++ b/packages/preload/src/views/index.tsx
@@ -0,0 +1,59 @@
+/* @refresh reload */
+import { render } from 'solid-js/web';
+import App from './App';
+import './style.css';
+
+import { rcp } from '../preload/rcp';
+import { loadTranslation } from './lib/i18n';
+
+const rootId = 'pengu-root';
+
+// Light DOM (no shadow root) — our CSS uses `pengu-` prefixed classes to avoid
+// colliding with LCUX's own styles. We previously used a shadow root for style
+// isolation, but it required twind for tailwind-style utilities to scope inside
+// the shadow tree, which dragged ~25-30 KB of bundle weight. Plain CSS with
+// prefixed classes does the job at near-zero cost.
+//
+// Render in `connectedCallback`, not the constructor — the Custom Elements
+// spec forbids adding children to the element from the constructor (browsers
+// silently no-op or throw). connectedCallback runs once the element is
+// inserted into the DOM, which is when child insertion is allowed.
+class PenguRoot extends HTMLElement {
+  private _rendered = false;
+  connectedCallback() {
+    if (this._rendered) return;
+    this._rendered = true;
+    render(() => <App />, this);
+  }
+}
+
+// Push-style RCP requires subscription before announce. Pre-warm so
+// rcp-fe-lol-shared-components is tracked in the registry; mount() below
+// then awaits its fulfillment.
+rcp.preInit('rcp-fe-lol-shared-components', () => {});
+
+async function mount() {
+  // rcp-fe-lol-shared-components does `document.body.innerHTML += ...` during
+  // its init. That destroys every custom element inside body — including our
+  // <pengu-root> if we mount before it runs — and re-parses them, which fires
+  // PenguRoot's constructor a second time and renders a duplicate App tree
+  // (visible as the welcome toast firing twice, etc). Wait until the plugin
+  // is fulfilled so its body manipulation is done before we attach.
+  await rcp.whenReady('rcp-fe-lol-shared-components').catch(() => {});
+
+  await loadTranslation();
+
+  let root = document.getElementById(rootId);
+  if (!root) {
+    root = document.createElement('div');
+    root.setAttribute('id', rootId);
+    document.body.appendChild(root);
+  }
+
+  await customElements.whenDefined(rootId);
+  const el = document.createElement(rootId);
+  root.appendChild(el);
+}
+
+customElements.define(rootId, PenguRoot);
+window.addEventListener('load', mount);
\ No newline at end of file
diff --git a/plugins/src/views/lib/i18n.ts b/packages/preload/src/views/lib/i18n.ts
similarity index 100%
rename from plugins/src/views/lib/i18n.ts
rename to packages/preload/src/views/lib/i18n.ts
diff --git a/plugins/src/views/lib/updater.ts b/packages/preload/src/views/lib/updater.ts
similarity index 100%
rename from plugins/src/views/lib/updater.ts
rename to packages/preload/src/views/lib/updater.ts
diff --git a/plugins/src/views/style.css b/packages/preload/src/views/style.css
similarity index 77%
rename from plugins/src/views/style.css
rename to packages/preload/src/views/style.css
index 2c332164..fea58e1f 100644
--- a/plugins/src/views/style.css
+++ b/packages/preload/src/views/style.css
@@ -4,7 +4,7 @@ body {
 
 #pengu-root {
   font-size: .875rem;
-  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: var(--font-body);
 }
 
 div[id^=index_loading_div] {
@@ -29,7 +29,7 @@ div[id^=index_loading_div]:after {
   margin-top: 32px;
   content: "Pengu-Powered";
   color: #e2e1e1;
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-body);
   font-size: 1rem;
   text-transform: uppercase;
 }
\ No newline at end of file
diff --git a/plugins/src/views/trans.json b/packages/preload/src/views/trans.json
similarity index 100%
rename from plugins/src/views/trans.json
rename to packages/preload/src/views/trans.json
diff --git a/plugins/tsconfig.json b/packages/preload/tsconfig.json
similarity index 100%
rename from plugins/tsconfig.json
rename to packages/preload/tsconfig.json
diff --git a/plugins/vite.config.ts b/packages/preload/vite.config.ts
similarity index 100%
rename from plugins/vite.config.ts
rename to packages/preload/vite.config.ts
diff --git a/packages/types/.gitkeep b/packages/types/.gitkeep
new file mode 100644
index 00000000..e69de29b
diff --git a/pengu.sln b/pengu.sln
deleted file mode 100644
index 0741c334..00000000
--- a/pengu.sln
+++ /dev/null
@@ -1,25 +0,0 @@
-
-Microsoft Visual Studio Solution File, Format Version 12.00
-# Visual Studio Version 17
-VisualStudioVersion = 17.8.34322.80
-MinimumVisualStudioVersion = 10.0.40219.1
-Project("{8BC9CEB8-8B4A-11D0-8D11-00A0C91BC942}") = "core", "core\core.vcxproj", "{0C5BB758-5A09-4D96-BBBC-5F03D3512B58}"
-EndProject
-Global
-	GlobalSection(SolutionConfigurationPlatforms) = preSolution
-		Debug|x64 = Debug|x64
-		Release|x64 = Release|x64
-	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{0C5BB758-5A09-4D96-BBBC-5F03D3512B58}.Debug|x64.ActiveCfg = Debug|x64
-		{0C5BB758-5A09-4D96-BBBC-5F03D3512B58}.Debug|x64.Build.0 = Debug|x64
-		{0C5BB758-5A09-4D96-BBBC-5F03D3512B58}.Release|x64.ActiveCfg = Release|x64
-		{0C5BB758-5A09-4D96-BBBC-5F03D3512B58}.Release|x64.Build.0 = Release|x64
-	EndGlobalSection
-	GlobalSection(SolutionProperties) = preSolution
-		HideSolutionNode = FALSE
-	EndGlobalSection
-	GlobalSection(ExtensibilityGlobals) = postSolution
-		SolutionGuid = {99AC0486-E5EC-495B-93FA-E8F0D758D065}
-	EndGlobalSection
-EndGlobal
diff --git a/pengu.slnx b/pengu.slnx
new file mode 100644
index 00000000..d4dd8fa7
--- /dev/null
+++ b/pengu.slnx
@@ -0,0 +1,6 @@
+<Solution>
+  <Configurations>
+    <Platform Name="x64" />
+  </Configurations>
+  <Project Path="core/core.vcxproj" Id="0c5bb758-5a09-4d96-bbbc-5f03d3512b58" />
+</Solution>
diff --git a/plugins/src/preload/load-hooks.ts b/plugins/src/preload/load-hooks.ts
deleted file mode 100644
index 1cf54652..00000000
--- a/plugins/src/preload/load-hooks.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-let windowLoaded = false;
-
-window.addEventListener('load', function () {
-  windowLoaded = true;
-})
-
-const windowAddEventListener = window.addEventListener;
-const documentAddEventListener = document.addEventListener;
-
-// Make sure the late window's load & DOMContentLoaded listeners are called
-window.addEventListener = function (type, listener, options) {
-  if (type === 'load' && windowLoaded) {
-    setTimeout(listener, 1);
-  } else if (type === 'DOMContentLoaded' && document.readyState === 'complete') {
-    setTimeout(listener, 1);
-  } else {
-    windowAddEventListener.call(this, type, listener, options);
-  }
-};
-
-// Make sure the late document's DOMContentLoaded listeners are called
-document.addEventListener = function (type, listener, options) {
-  if (type === 'DOMContentLoaded'
-    && (document.readyState === 'interactive'
-      || document.readyState === 'complete')) {
-    setTimeout(listener, 1);
-  } else {
-    documentAddEventListener.call(this, type, listener, options);
-  }
-};
-
-export { }
\ No newline at end of file
diff --git a/plugins/src/preload/polyfills.ts b/plugins/src/preload/polyfills.ts
deleted file mode 100644
index 7e539216..00000000
--- a/plugins/src/preload/polyfills.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-declare global {
-  interface Object {
-    hasOwn: Function
-  }
-}
-
-if (!Object.hasOwn) {
-  Object.hasOwn = function (obj, prop) {
-    return Object.prototype.hasOwnProperty.call(obj, prop);
-  };
-}
-
-if (!Array.prototype.at) {
-  Array.prototype.at = function (idx) {
-    idx = Number(idx) || 0;
-    if (idx < 0) {
-      idx = this.length + idx;
-      if (idx < 0) {
-        return undefined;
-      }
-    }
-    if (idx >= this.length) {
-      return undefined;
-    }
-    return this[idx];
-  };
-}
-
-export { }
\ No newline at end of file
diff --git a/plugins/src/preload/rcp/hooks.ts b/plugins/src/preload/rcp/hooks.ts
deleted file mode 100644
index 308f6d50..00000000
--- a/plugins/src/preload/rcp/hooks.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-const length = Symbol("length");
-
-type CallbackType = "before" | "after";
-
-interface Callback {
-  (...args: any): void | Promise<void>;
-}
-
-interface PluginContainer {
-  impl: null | object;
-  state: "preInit" | "init" | "postInit" | "fulfilled"
-}
-
-type CallbackContainer = {
-  [length]: number;
-} & {
-  [k in CallbackType]?: Callback[];
-}
-
-class RCP {
-  static readonly PREF = "riotPlugin.announce:";
-  static readonly PREF_LEN = this.PREF.length;
-
-  static isAnnounceEvent(event: Event): event is RcpAnnouceEvent {
-    return event.type.startsWith(this.PREF);
-  }
-
-  constructor() {
-    const self = this;
-    const { dispatchEvent } = document;
-    function dispatchEventWrap(this: any, event: Event): boolean {
-      if (RCP.isAnnounceEvent(event)) self.onPluginAnnounce(event);
-      return dispatchEvent.call(this, event);
-    }
-    Object.defineProperty(document, "dispatchEvent", { value: dispatchEventWrap });
-  }
-
-  private readonly pluginRegistry = new Map<string, PluginContainer>();
-  private readonly callbacks = new Map<string, CallbackContainer>();
-
-  private onPluginAnnounce(event: RcpAnnouceEvent) {
-    const self = this;
-    const name = event.type.substring(RCP.PREF_LEN);
-    
-    const { registrationHandler } = event;
-
-    function registrationHandlerWrap(this: any, registrar: Parameters<typeof registrationHandler>[0]): ReturnType<typeof registrationHandler> {
-      return registrationHandler.call(this, async function(provider) {
-        const container: PluginContainer = { impl: null, state: "preInit" };
-        self.pluginRegistry.set(name, container);
-        // callbacks called immidiatly, without adding microtasks to the queue
-        // so, no edgecases where pre/post init callback added after it already
-        // cant be called, but before state of plugin changes (point of not doing it after await)
-        await self.invokeCallbacks("before", name, () => { container.state = "init"; }, provider);
-        const api = (container.impl = await registrar(provider));
-        container.state = "postInit";
-        await self.invokeCallbacks("after", name, () => { container.state = "fulfilled"; }, api);
-        return api;
-      });
-    }
-  
-    Object.defineProperty(event, "registrationHandler", {
-      value: registrationHandlerWrap,
-    })
-  }
-
-  private async invokeCallbacks(type: CallbackType, name: string, callback: () => void, ...args: any[]) {
-    const container = this.callbacks.get(name);
-    if (container == undefined) return void callback();
-    const callbacks = container[type];
-    if (callbacks == undefined) return void callback();
-    //while older callbacks dont finished, new ones stll can be added 
-    while (callbacks.length > 0) do {
-      container[length] -= callbacks.length;
-      await Promise.allSettled(callbacks.splice(0).map(callback => callback(...args)));
-    } while (callbacks.length > 0);
-    if (container[length] == 0) this.callbacks.delete(name);
-    callback();
-  }
-
-  private addCallback(type: CallbackType, name: string, callback: Callback) {
-    let container = this.callbacks.get(name);
-    if (container == undefined) this.callbacks.set(name, (container = { [type]: [], [length]: 0 }));
-    const arr = container[type] ?? (container[type] = []);
-    container[length]++;
-    arr.push(callback);
-  }
-
-  public preInit(name: string, callback: (provider: any) => any): boolean {
-    name = String(name);
-    if (typeof callback !== "function") throw new TypeError(`${callback} is not a function`);
-    const plugin = this.pluginRegistry.get(name);
-    if (plugin == undefined || plugin.state == "preInit") return (this.addCallback("before", name, callback), true);
-    return false;
-  }
-
-  public postInit(name: string, callback: (api: any) => any, blocking: boolean = false){
-    name = String(name);
-    if (typeof callback !== "function") throw new TypeError(`${callback} is not a function`);
-    const plugin = this.pluginRegistry.get(name);
-    if (plugin !== undefined && plugin.state === "fulfilled") return false;
-    this.addCallback("after", name, blocking ? callback : (api: any) => void callback(api));
-    return true;
-  }
-
-  private whenReadyOne(name: string) {
-    return new Promise(resolve => {
-      if (!this.postInit(name, resolve)) resolve(this.pluginRegistry.get(name)!.impl);
-    });
-  }
-
-  private whenReadyAll(names: string[]) {
-    return Promise.all(names.map(name => this.whenReadyOne(String(name))));
-  }
-
-  public whenReady(param){
-    if (typeof param == "string") return this.whenReadyOne(param);
-    if (Array.isArray(param)) return this.whenReadyAll(param);
-    throw new TypeError(`unexpected argument ${param}`);
-  }
-  public get(name: string){
-    name = String(name).toLowerCase();
-    if (!name.startsWith('rcp-')) name = 'rcp-' + name;
-    return this.pluginRegistry.get(name)?.impl;
-  }
-
-  // [Symbol.iterator](){
-  //   return this.pluginRegistry.entries();
-  // }
-}
-
-export const rcp = new RCP();
-
-Object.defineProperty(window, "rcp", {
-  value: rcp,
-  enumerable: false,
-  configurable: false,
-  writable: false
-})
\ No newline at end of file
diff --git a/plugins/src/preload/rcp/socket.ts b/plugins/src/preload/rcp/socket.ts
deleted file mode 100644
index 7466162d..00000000
--- a/plugins/src/preload/rcp/socket.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { rcp } from './hooks';
-
-interface EventData {
-  data: any;
-  uri: string;
-  eventType: 'Create' | 'Update' | 'Delete';
-}
-
-interface ApiListener {
-  (message: EventData): void;
-}
-
-let ws: WebSocket;
-const eventQueue = Array<string>();
-const listenersMap = new Map<string, Array<ApiListener>>();
-
-rcp.preInit('rcp-fe-common-libs', async function (provider) {
-  const { _endpoint } = provider.context.socket;
-  ws = new WebSocket(_endpoint, 'wamp');
-  ws.addEventListener('open', () => {
-    for (const e of eventQueue.splice(0, eventQueue.length)) {
-      ws.send(JSON.stringify([5, e]));
-    }
-  });
-  ws.addEventListener('message', handleMessage);
-  window.addEventListener('beforeunload', () => ws.close());
-});
-
-function handleMessage(e: MessageEvent<string>) {
-  const [type, endpoint, data] = JSON.parse(e.data);
-  if (type === 8 && listenersMap.has(endpoint)) {
-    const listeners = listenersMap.get(endpoint)!;
-    for (const callback of listeners) {
-      setTimeout(() => callback(<EventData>data), 0);
-    }
-  }
-}
-
-function buildApi(api: string): string {
-  if (api === 'all') return 'OnJsonApiEvent';
-  api = api.toLowerCase().replace(/^\/+|\/+$/g, '');
-  return 'OnJsonApiEvent_' + api.replace(/\//g, '_');
-}
-
-function observe(api: string, listener: ApiListener) {
-  if (typeof api !== 'string' || api === ''
-    || typeof listener !== 'function')
-    return false;
-
-  const endpoint = buildApi(api);
-  listener = listener.bind(self);
-
-  if (listenersMap.has(endpoint)) {
-    const arr = listenersMap.get(endpoint);
-    arr!.push(listener);
-  } else {
-    listenersMap.set(endpoint, [listener]);
-  }
-
-  if (ws?.readyState === 1) {
-    ws.send(JSON.stringify([5, endpoint]));
-  } else {
-    eventQueue.push(endpoint);
-  }
-
-  return {
-    disconnect: () => disconnect(api, listener),
-  };
-}
-
-function disconnect(api: string, listener: ApiListener) {
-  const endpoint = buildApi(api);
-  if (listenersMap.has(endpoint)) {
-    const arr = listenersMap.get(endpoint)!.filter(x => x !== listener);
-    if (arr.length === 0) {
-      ws.send(JSON.stringify([6, endpoint]));
-      listenersMap.delete(endpoint);
-    } else {
-      listenersMap.set(endpoint, arr);
-    }
-    return true;
-  }
-  return false;
-}
-
-export const socket = {
-  observe,
-  disconnect,
-};
\ No newline at end of file
diff --git a/plugins/src/views/index.tsx b/plugins/src/views/index.tsx
deleted file mode 100644
index 8f56deb6..00000000
--- a/plugins/src/views/index.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-/* @refresh reload */
-import { render } from 'solid-js/web';
-import App from './App';
-import './style.css';
-
-import install from '@twind/with-web-components';
-import config from '../../twind.config';
-import { loadTranslation } from './lib/i18n';
-
-const rootId = 'pengu-root';
-const withTwind = install(config);
-
-class PenguRoot extends withTwind(HTMLElement) {
-  constructor() {
-    super();
-    const shadow = this.attachShadow({ mode: 'open' });
-    render(() => <App />, shadow);
-  }
-}
-
-async function mount() {
-
-  await loadTranslation();
-
-  let root = document.getElementById(rootId);
-  if (!root) {
-    root = document.createElement('div');
-    root.setAttribute('id', rootId);
-    document.body.appendChild(root);
-  }
-
-  await customElements.whenDefined(rootId);
-  const twind = document.createElement(rootId);
-  root.appendChild(twind);
-}
-
-customElements.define(rootId, PenguRoot);
-window.addEventListener('load', mount);
\ No newline at end of file
diff --git a/plugins/tailwind.config.ts b/plugins/tailwind.config.ts
deleted file mode 100644
index 589e8021..00000000
--- a/plugins/tailwind.config.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// just keep tailwind's intellisense
-export default {
-  content: [
-    './index.html',
-    './src/**/*.{ts,tsx,css,html,scss}',
-  ],
-}
\ No newline at end of file
diff --git a/plugins/twind.config.ts b/plugins/twind.config.ts
deleted file mode 100644
index df4bd5bd..00000000
--- a/plugins/twind.config.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { defineConfig } from '@twind/core';
-import presetAutoprefix from '@twind/preset-autoprefix';
-import presetTailwind from '@twind/preset-tailwind';
-
-export default defineConfig({
-  presets: [
-    presetAutoprefix(),
-    presetTailwind(),
-  ],
-});
\ No newline at end of file