feat: blitz provider

feat: setup interop
feat: setup game interface
2026-10-31 14:39:51 +01:00 · 2026-01-27 08:59:34 -06:00 · 2026-01-25 21:27:24 -06:00 · 2026-01-25 19:32:30 -06:00 · 2026-01-25 19:21:07 -06:00 · 2026-01-25 16:13:36 -06:00
158 changed files with 5884 additions and 2028 deletions
@@ -0,0 +1,66 @@
+name: Website UE
+
+on:
+  push:
+  workflow_dispatch:
+
+  schedule:
+    - cron: "0 4 * * *"
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: ${{ github.ref == 'refs/heads/main' }}
+
+env:
+  WOTB_SERVER: ${{ secrets.WOTB_SERVER }}
+
+jobs:
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+        with:
+          submodules: recursive
+          token: ${{ secrets.GH_TOKEN }}
+
+      - uses: oven-sh/setup-bun@v2
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: latest
+
+      - uses: arduino/setup-protoc@v3
+        with:
+          repo-token: ${{ secrets.GH_TOKEN }}
+
+      - uses: actions/configure-pages@v5
+
+      - run: bun run setup
+
+      - name: Build website
+        run: bun run build:website
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v4
+        with:
+          path: dist/website
+
+  deploy-github-pages:
+    if: ${{ github.ref == 'refs/heads/ue' && github.repository == 'blitzkit/host-beta' }}
+    name: Deploy to GitHub Pages
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: Production
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
@@ -22,7 +22,7 @@ depots
 public/sitemap*
 /firebase.json
 target
-# packages/core/src/protos/*.ts
+packages/website-ue/src/protos/*.ts
 /.vercel
 .astro
 .vercel
@@ -17,8 +17,6 @@
    "astrojs",
    "astrolib",
    "atgm",
-    "Autoloader",
-    "Autoreloader",
    "AYUV",
    "battleresults",
    "bbox",
@@ -61,6 +59,7 @@
    "Ddpf",
    "Ddsd",
    "deadrail",
+    "DEBUFF",
    "debugflags",
    "deburr",
    "decalmask",
@@ -161,6 +160,7 @@
    "playerachievements",
    "playerinfo",
    "playform",
+    "Playtest",
    "pngjs",
    "POSITIVEX",
    "POSITIVEY",
@@ -177,6 +177,7 @@
    "ratingleaderboard",
    "raycaster",
    "Redirector",
+    "REGEN",
    "Relogin",
    "researchable",
    "Resvg",
@@ -191,10 +192,12 @@
    "searchtanks",
    "SHAREDEXP",
    "SKLLD",
+    "sluggify",
    "smoothstep",
    "Smri",
    "Specularity",
    "SSAO",
+    "stackable",
    "startcase",
    "statkit",
    "statsfull",
@@ -1,13 +1,13 @@
 {
  "name": "blitzkit",
-  "version": "1.29.10",
+  "version": "2.0.0-beta.2",
  "license": "BlitzKit License",
  "private": true,
  "scripts": {
    "build:assets": "cd packages/scripts && bun run build:assets",
    "build:averages": "bun --filter=@blitzkit/scripts run build:averages",
    "build:bot": "cd packages/scripts && bun run build:bot",
-    "build:website": "cd packages/website && bun run build",
+    "build:website": "cd packages/website-ue && bun run build",
    "build:prisma": "prisma generate",
    "build:proxyclient": "cd packages/scripts && bun run build:proxyclient",
    "build:catalogitemaccesssor": "cd packages/scripts && bun run build:catalogitemaccesssor",
@@ -16,26 +16,26 @@
    "dev:bot": "bun run build:bot --dev && bun start:bot",
    "start:bot": "bun dist/bot/main.js",
    "dev:docs": "vitepress dev docs",
-    "dev:website": "cd packages/website && bun run dev",
+    "dev:website": "cd packages/website-ue && bun run dev",
    "dev:app": "cd packages/app && bun run dev",
    "dev": "bun run dev:website",
    "dev:api": "bun --filter=@blitzkit/api run dev",
    "setup:depotdownloader": "bun --filter=@blitzkit/scripts run setup:depotdownloader",
    "setup:patches": "bun --filter=@blitzkit/scripts run setup:patches",
-    "start:website": "bun --filter=@blitzkit/website run start",
+    "start:website": "bun --filter=@blitzkit/website-ue run start",
    "host:docs": "vitepress preview docs",
    "lint": "tsc",
-    "lint:website": "cd packages/website && bun run lint",
+    "lint:website": "cd packages/website-ue && bun run lint",
    "format": "prettier --write \"**/*.@(json|js|jsx|css|md|ts|tsx|html|xml|yml|gltf)\"",
    "update": "yarn upgrade --latest",
    "tunnel": "cloudflared tunnel --url http://localhost:3000",
    "discoverids": "scripts/discoverIds.ts",
    "build:protos": "cd packages/scripts && bun run build:protos",
-    "preview:website": "cd packages/website && bun run preview",
+    "preview:website": "cd packages/website-ue && bun run preview",
    "build:reviews": "cd packages/scripts && bun build:reviews",
    "build:ids": "cd packages/scripts && bun build:ids",
    "prunestrings": "cd packages/scripts && bun prunestrings",
-    "setup": "bun install && bun run build:prisma && bun run build:protos && bun run build:proxyclient",
+    "setup": "bun install && bun run build:prisma && bun run build:protos && bun run build:proxyclient && bun run build:catalogitemaccesssor",
    "patchnotes": "cd packages/scripts && bun run patchnotes"
  },
  "type": "module",
@@ -43,6 +43,7 @@
    "packages/*"
  ],
  "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
    "@prisma/client": "^6.18.0",
    "prisma": "^6.18.0",
    "typescript": "^5.9.3"
@@ -1,49 +1,50 @@
-export * from './assertSecret';
-export * from './asset';
-export * from './availableProvisions';
-export * from './averageDefinitions';
+export * from "./assertSecret";
+export * from "./asset";
+export * from "./availableProvisions";
+export * from "./averageDefinitions";
 // export * from './camouflageDefinitions';
 // export * from './checkConsumableProvisionInclusivity';
-export * from './coefficient';
-export * from './consumableDefinitions';
+export * from "./coefficient";
+export * from "./consumableDefinitions";
 // export * from './context';
-export * from './createDefaultSkills';
-export * from './degressiveStat';
-export * from './discoveredIdDefinitions';
-export * from './emblemURL';
-export * from './equipmentDefinitions';
-export * from './eventManager';
-export * from './gameDefinitions';
-export * from './getArchivedLatestSeasonNumber';
+export * from "./createDefaultSkills";
+export * from "./degressiveStat";
+export * from "./discoveredIdDefinitions";
+export * from "./emblemURL";
+export * from "./equipmentDefinitions";
+export * from "./eventManager";
+export * from "./gameDefinitions";
+export * from "./getArchivedLatestSeasonNumber";
 // export * from './getArchivedRatingInfo';
-export * from './getArchivedRatingLeaderboard';
+export * from "./getArchivedRatingLeaderboard";
 // export * from './getArchivedRatingMidnightLeaderboard';
-export * from './getTimeDaysAgo';
-export * from './isExplosive';
-export * from './mapDefinitions';
-export * from './modelDefinitions';
-export * from './normalizeBoundingBox';
+export * from "./getTimeDaysAgo";
+export * from "./isExplosive";
+export * from "./mapDefinitions";
+export * from "./modelDefinitions";
+export * from "./normalizeBoundingBox";
 // export * from './parseBkni';
 // export * from './patientFetch';
-export * from './patientFetchJSON';
-export * from './progressiveStat';
-export * from './provisionDefinitions';
-export * from './resolveDpm';
-export * from './resolvePenetrationCoefficient';
-export * from './reviews';
-export * from './skillDefinitions';
-export * from './sum';
-export * from './tankDefinitions';
-export * from './tankIcon';
-export * from './tankNames';
-export * from './unionBoundingBox';
-export * from './uniqueGuns';
-export * from './unwrapBlitzkitResponse';
-export * from './votes';
+export * from "./patientFetchJSON";
+export * from "./progressiveStat";
+export * from "./provisionDefinitions";
+export * from "./resolveDpm";
+export * from "./resolvePenetrationCoefficient";
+export * from "./reviews";
+export * from "./skillDefinitions";
+export * from "./sum";
+export * from "./tankDefinitions";
+export * from "./tankIcon";
+export * from "./tankNames";
+export * from "./unionBoundingBox";
+export * from "./uniqueGuns";
+export * from "./unwrapBlitzkitResponse";
+export * from "./votes";
 // export * from './withCORSProxy';
-export * from './createDefaultProvisions';
-export * from './gallery';
-export * from './metaSortTank';
-export * from './popularTanks';
-export * from './romanize';
-export * from './youtubers';
+export * from "./createDefaultProvisions";
+export * from "./gallery";
+export * from "./metaSortTank";
+export * from "./popularTanks";
+export * from "./romanize";
+export * from "./sluggify.ts";
+export * from "./youtubers";
@@ -0,0 +1,16 @@
+import { deburr } from "lodash-es";
+
+const nonAlphanumericRegex = /[^a-z0-9]/g;
+const multipleDashesRegex = /--+/g;
+const trailingDashRegex = /-$/g;
+const leadingDashRegex = /^-/g;
+
+export function sluggify(value: string) {
+  let slug = deburr(value).toLowerCase();
+  slug = slug.replaceAll(nonAlphanumericRegex, "-");
+  slug = slug.replaceAll(multipleDashesRegex, "-");
+  slug = slug.replaceAll(trailingDashRegex, "");
+  slug = slug.replaceAll(leadingDashRegex, "");
+
+  return slug;
+}
@@ -3,6 +3,7 @@ export * from "./fisherYates";
 export * from "./formatCompact";
 export * from "./isNumber";
 export * from "./NaNFallback";
+export * from "./normalizeAngleDeg";
 export * from "./normalizeAngleRad";
 export * from "./normalToEuler";
 export * from "./numberToRomanNumeral";
@@ -0,0 +1,6 @@
+export function normalizeAngleDeg(angle: number) {
+  const newAngle = angle % 360;
+  if (newAngle > 360) return newAngle - 360;
+  if (newAngle < -360) return newAngle + 360;
+  return newAngle;
+}
@@ -0,0 +1,57 @@
+## A streamlined .gitignore for modern .NET projects
+## including temporary files, build results, and
+## files generated by popular .NET tools. If you are
+## developing with Visual Studio, the VS .gitignore
+## https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
+## has more thorough IDE-specific entries.
+##
+## Get latest from https://github.com/github/gitignore/blob/main/Dotnet.gitignore
+
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# ASP.NET Scaffolding
+ScaffoldingReadMe.txt
+
+# NuGet Packages
+*.nupkg
+# NuGet Symbol Packages
+*.snupkg
+
+# dotenv environment variables file
+.env
+
+# Others
+~$*
+*~
+CodeCoverage/
+
+# MSBuild Binary and Structured Log
+*.binlog
+
+# MSTest test Results
+[Tt]est[Rr]esult*/
+[Bb]uild[Ll]og.*
+
+# NUnit
+*.VisualState.xml
+TestResult.xml
+nunit-*.xml
@@ -0,0 +1,15 @@
+<Project Sdk="Microsoft.NET.Sdk">
+  <PropertyGroup>
+    <TargetFramework>net9.0</TargetFramework>
+    <ImplicitUsings>enable</ImplicitUsings>
+    <Nullable>enable</Nullable>
+    <NodeApiAssemblyJSModuleType>esm</NodeApiAssemblyJSModuleType>
+    <GenerateDocumentationFile>true</GenerateDocumentationFile>
+    <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
+  </PropertyGroup>
+  <ItemGroup>
+    <PackageReference Include="CUE4Parse" Version="1.2.2" />
+    <PackageReference Include="Microsoft.JavaScript.NodeApi" Version="0.9.19" />
+    <PackageReference Include="Microsoft.JavaScript.NodeApi.Generator" Version="0.9.19" />
+  </ItemGroup>
+</Project>
@@ -0,0 +1,9 @@
+{
+  "name": "@blitzkit/game",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "dependencies": {
+    "node-api-dotnet": "^0.9.19"
+  }
+}
@@ -0,0 +1,28 @@
+using CUE4Parse.FileProvider;
+using CUE4Parse.UE4.Versions;
+using Microsoft.JavaScript.NodeApi;
+
+namespace game.src.classes;
+
+[JSExport]
+public class BlitzProvider
+{
+    private readonly DefaultFileProvider provider;
+
+    public BlitzProvider(string directory)
+    {
+        provider = new(
+            directory: directory,
+            searchOption: SearchOption.AllDirectories,
+            versions: new(EGame.GAME_UE5_5),
+            pathComparer: StringComparer.OrdinalIgnoreCase
+        );
+        provider.Initialize();
+        provider.Mount();
+    }
+
+    public string[] Files()
+    {
+        return provider.Files.Keys.ToArray();
+    }
+}
@@ -0,0 +1 @@
+export * from "../bin/Debug/net9.0/game";
@@ -1,4 +1,2 @@
 export * from "./literals";
 export * from "./strings";
-export * from "./unwrapper";
-export * from "./wrapper";
@@ -1,68 +1,3 @@
-import { merge } from "ts-deepmerge";
-import locales from "../locales.json";
-import en from "../strings/en.json";
-import es from "../strings/es.json";
-import fr from "../strings/fr.json";
-import ja from "../strings/ja.json";
-import pl from "../strings/pl.json";
-import pt from "../strings/pt.json";
-import ru from "../strings/ru.json";
-import uk from "../strings/uk.json";
-import zh from "../strings/zh.json";
+import type en from "../strings/en.json";

-export type BlitzKitStrings = typeof en;
-
-const stringsRaw: Record<string, TranslationTree> = {
-  en,
-  es,
-  fr,
-  ja,
-  pl,
-  pt,
-  ru,
-  uk,
-  zh,
-};
-
-export const STRINGS: Record<string, BlitzKitStrings> = {};
-
-for (const locale in stringsRaw) {
-  if (locale === locales.default) {
-    STRINGS[locales.default] = stringsRaw[locales.default] as BlitzKitStrings;
-    continue;
-  }
-
-  const localeStrings = stringsRaw[locale];
-  STRINGS[locale] = merge(
-    stringsRaw[locales.default],
-    localeStrings
-  ) as BlitzKitStrings;
-}
-
-export const SUPPORTED_LOCALE_BLITZ_MAP: Record<string, string> = {
-  en: "en",
-  es: "es",
-  fr: "fr",
-  ja: "ja",
-  pt: "pt",
-  ru: "ru",
-  uk: "uk",
-  zh: "zh-Hans",
-  pl: "pl",
-};
-
-export const SUPPORTED_LOCALE_FLAGS: Record<string, string> = {
-  en: "🇺🇸",
-  es: "🇪🇸",
-  fr: "🇫🇷",
-  ja: "🇯🇵",
-  pt: "🇵🇹",
-  ru: "🇷🇺",
-  uk: "🇺🇦",
-  zh: "🇨🇳",
-  pl: "🇵🇱",
-};
-
-export type TranslationTree = { [key: string]: TranslationNode };
-
-export type TranslationNode = string | TranslationTree;
+export type Strings = typeof en;
@@ -1,12 +0,0 @@
-import { I18nString } from "../../core/src";
-import locales from "../locales.json";
-
-export function unwrapper(locale = locales.default) {
-  return function (i18nString: I18nString) {
-    if (locale in i18nString.locales) {
-      return i18nString.locales[locale];
-    }
-
-    return i18nString.locales[locales.default];
-  };
-}
@@ -1,15 +0,0 @@
-import locales from "../locales.json";
-import { type BlitzKitStrings, STRINGS } from "./strings";
-
-export function wrapper(slicer: (strings: BlitzKitStrings) => string) {
-  const defaultString = slicer(STRINGS[locales.default] as BlitzKitStrings);
-
-  const object = { [locales.default]: defaultString };
-
-  for (const { locale } of locales.supported) {
-    const string = slicer(STRINGS[locale] as BlitzKitStrings);
-    if (string !== defaultString) object[locale] = string;
-  }
-
-  return object;
-}
@@ -1,21 +1,16 @@
-import { exec as execSync } from "child_process";
+import { execFile } from "child_process";
 import { existsSync } from "fs";
-import { readdir, rm } from "fs/promises";
-import { promisify } from "util";
+import { mkdir, readdir, rm, writeFile } from "fs/promises";

-const MAX_COMMAND_LENGTH = 2 ** 11;
 const TS_PROTO_EXECUTABLE_LOCATIONS = [
  "./node_modules/.bin/protoc-gen-ts_proto",
  "../../node_modules/.bin/protoc-gen-ts_proto",
 ];
-
-const roots = [
-  // "../../packages/core/src/protos",
+const ROOTS = [
  "../../packages/closed/protos",
+  "../../packages/website-ue/src/protos",
 ];

-const exec = promisify(execSync);
-
 let tsProtoExecutableLocation: string | undefined = undefined;

 for (const location of TS_PROTO_EXECUTABLE_LOCATIONS) {
@@ -36,42 +31,38 @@ if (!tsProtoExecutableLocation) {
  );
 }

-for (const root of roots) {
+await mkdir("temp", { recursive: true });
+
+for (const root of ROOTS) {
+  let args = "";
+
+  for (const include of ROOTS) {
+    args += `-I=${include}\n`;
+  }
+
+  args += `--plugin=${tsProtoExecutableLocation}\n`;
+  args += "--ts_proto_opt=esModuleInterop=true\n";
+  args += "--ts_proto_opt=oneof=unions-value\n";
+  args += "--ts_proto_opt=unrecognizedEnum=false\n";
+  args += "--ts_proto_opt=snakeToCamel=false\n";
+  args += `--ts_proto_out=${root}\n`;
+
  const filesRaw = await readdir(`${root}`);
  const files: string[] = [];

  for (const file of filesRaw) {
-    if (file.endsWith(".proto")) files.push(file);
+    if (file.endsWith(".proto")) {
+      files.push(file);
+      args += `${root}/${file}\n`;
+    }
+
    if (file.endsWith(".ts")) await rm(`${root}/${file}`);
  }

-  while (files.length > 0) {
-    let command = [
-      "protoc",
-      `--plugin=${tsProtoExecutableLocation}`,
-      "--ts_proto_opt=esModuleInterop=true",
-      "--ts_proto_opt=oneof=unions-value",
-      // "--ts_proto_opt=removeEnumPrefix=true",
-      "--ts_proto_opt=unrecognizedEnum=false",
-      "--ts_proto_opt=snakeToCamel=false",
-      `--ts_proto_out=${root}`,
-      `-I=${root}`,
-    ].join(" ");
-
-    while (true) {
-      if (files.length === 0) break;
-
-      const file = files.at(-1);
-      const newLine = ` ${root}/${file}`;
-
-      if (command.length + newLine.length < MAX_COMMAND_LENGTH) {
-        command += newLine;
-        files.pop();
-      } else {
-        break;
-      }
-    }
-
-    await exec(command);
-  }
+  await writeFile("temp/protoc.txt", args);
+  execFile("protoc", ["@temp/protoc.txt"], (error, stdout, stderr) => {
+    if (error) throw new Error(error.message);
+    if (stderr) console.error(stderr);
+    if (stdout) console.log(stdout);
+  });
 }
@@ -0,0 +1,104 @@
+import node from "@astrojs/node";
+import react from "@astrojs/react";
+import locales from "@blitzkit/i18n/locales.json";
+import strings from "@blitzkit/i18n/strings/en.json";
+import { mauve, mauveDark } from "@radix-ui/colors";
+import favicons from "astro-favicons";
+import { defineConfig } from "astro/config";
+import packageJSON from "../../package.json";
+
+const POSSIBLE_TARGETS = ["app", "web"];
+
+const target = process.env.PUBLIC_TARGET;
+
+if (!target || !POSSIBLE_TARGETS.includes(target)) {
+  throw new Error("Invalid target");
+}
+
+export default defineConfig({
+  devToolbar: { enabled: false },
+
+  vite: {
+    server: { allowedHosts: [] },
+
+    esbuild: {
+      minifyIdentifiers: true,
+      minifySyntax: false,
+      minifyWhitespace: true,
+    },
+  },
+  output: target === "web" ? "static" : "server",
+  site: "https://blitzkit.app",
+  outDir: "../../dist/website",
+  prefetch: { defaultStrategy: "hover", prefetchAll: true },
+
+  build: { concurrency: 4 },
+  adapter: target === "app" ? node({ mode: "standalone" }) : undefined,
+
+  integrations: [
+    favicons({
+      name: strings.common.name,
+      short_name: strings.common.name,
+
+      background: mauveDark.mauve1,
+      themes: [mauve.mauve1, mauveDark.mauve1],
+      appleStatusBarStyle: "black-translucent",
+
+      version: packageJSON.version,
+
+      // shortcuts: Object.values(tools)
+      //   .filter((tool) => !tool.disabled && !tool.href)
+      //   .map((tool) => {
+      //     const stringId = (tool.strings ??
+      //       tool.id) as keyof typeof strings.website.tools;
+
+      //     return {
+      //       name: strings.website.tools[stringId].name,
+      //       name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       description: strings.website.tools[stringId].description,
+      //       description_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].description
+      //       ),
+      //       short_name: strings.website.tools[stringId].name,
+      //       short_name_localized: wrapper(
+      //         (strings) => strings.website.tools[stringId].name
+      //       ),
+      //       url: `/${tool.id}`,
+      //       icon: `public/assets/tools/${tool.id}.webp`,
+      //     };
+      //   }),
+
+      manifest: {
+        // description: strings.website.home.seo_description,
+        // description_localized: wrapper(
+        //   (strings) => strings.website.home.seo_description
+        // ),
+
+        dir: "ltr",
+        categories: ["utilities", "games", "developer", "developer tools"],
+
+        id: "com.tresabhi.blitzkit",
+        start_url: "/",
+        launch_handler: { client_mode: "navigate-new" },
+        display: "fullscreen",
+        display_override: ["fullscreen", "standalone", "minimal-ui"],
+
+        lang: locales.default,
+        orientation: "any",
+      },
+
+      icons: {
+        windows: true,
+        android: true,
+        appleIcon: true,
+        appleStartup: true,
+        favicons: true,
+        yandex: true,
+      },
+    }),
+
+    react(),
+  ],
+});
@@ -0,0 +1,55 @@
+{
+  "name": "@blitzkit/website-ue",
+  "type": "module",
+  "scripts": {
+    "dev": "PUBLIC_TARGET=web astro dev",
+    "build": "PUBLIC_TARGET=web astro build",
+    "preview": "PUBLIC_TARGET=web astro preview",
+    "lint": "PUBLIC_TARGET=web astro check",
+    "astro": "astro"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.9.4",
+    "@astrojs/node": "^9.4.4",
+    "@astrojs/react": "^4.4.0",
+    "@astrolib/seo": "^1.0.0-beta.8",
+    "@blitzkit/closed": "workspace:*",
+    "@blitzkit/core": "workspace:*",
+    "@blitzkit/i18n": "workspace:*",
+    "@blitzkit/game": "workspace:*",
+    "@bufbuild/protobuf": "^2.10.2",
+    "@fontsource-variable/roboto-flex": "^5.2.8",
+    "@fontsource-variable/roboto-mono": "^5.2.8",
+    "@radix-ui/colors": "^3.0.0",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@react-three/drei": "^10.7.6",
+    "@react-three/fiber": "^9.4.0",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@types/three": "^0.180.0",
+    "@vite-pwa/astro": "^1.1.0",
+    "astro": "^5.14.4",
+    "astro-favicons": "^3.1.5",
+    "autoprefixer": "^10.4.23",
+    "cssnano": "^7.1.2",
+    "fuzzysort": "^3.1.0",
+    "immer": "^10.1.3",
+    "lodash-es": "^4.17.21",
+    "postcss": "^8.5.6",
+    "postcss-load-config": "^6.0.1",
+    "postcss-nested": "^7.0.2",
+    "postcss-preset-env": "^11.1.1",
+    "quicklime": "^1.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-promise-suspense": "^0.3.4",
+    "sharp": "^0.34.5",
+    "three": "^0.180.0",
+    "three-stdlib": "^2.36.0",
+    "typescript": "^5.9.3",
+    "varuna": "workspace:*",
+    "vite": "^7.1.9",
+    "yaml": "^2.8.1"
+  }
+}
@@ -0,0 +1,18 @@
+import cssnano from "cssnano";
+import type { Config } from "postcss-load-config";
+import postcssPresetEnv from "postcss-preset-env";
+
+export default {
+  plugins: [
+    require("autoprefixer"),
+    require("postcss-nested"),
+
+    cssnano({
+      preset: "default",
+    }),
+
+    postcssPresetEnv({
+      features: {},
+    }),
+  ],
+} satisfies Config;
@@ -0,0 +1,3 @@
+<svg width="30" height="52" viewBox="0 0 30 52" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.8564 44V52H0V36L13.8564 44ZM30 52H16.1436V44L30 36V52ZM28.8564 18V34L15 42L1.14355 34V18L15 10L28.8564 18ZM13.8564 8L0 16V0H13.8564V8ZM30 16L16.1436 8V0H30V16Z" fill="#EEEEF0"/>
+</svg>
@@ -0,0 +1,3 @@
+<svg width="70" height="35" viewBox="0 0 70 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70 32L64 35H0L70 0V32ZM0 32V0H64L0 32Z" fill="#EEEEF0"/>
+</svg>
@@ -0,0 +1,46 @@
+<svg width="426" height="426" viewBox="0 0 426 426" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M416.628 244.997L235.625 372.974C223.13 381.809 202.87 381.809 190.375 372.974L9.37173 244.997C3.1239 240.58 -3.95076e-06 234.79 0 229V196.6H426V229C426 234.79 422.876 240.58 416.628 244.997Z" fill="#0D2847"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="#D9D9D9"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="url(#paint0_linear_764_240)"/>
+<path d="M416.628 180.603L235.625 52.6262C223.13 43.7913 202.87 43.7913 190.375 52.6262L9.37172 180.603C-3.12391 189.438 -3.12391 203.762 9.37173 212.597L190.375 340.574C202.87 349.409 223.13 349.409 235.625 340.574L416.628 212.597C429.124 203.762 429.124 189.438 416.628 180.603Z" fill="url(#paint1_linear_764_240)"/>
+<g filter="url(#filter0_d_764_240)">
+<path d="M197.056 150.108L201.368 153.051L290.596 213.945L306.6 202.599L310.832 199.599L289.153 184.23L288.86 177.31L335.236 182.298L351.706 170.622L359.102 165.378L288.049 158.111L286.355 118L263.968 133.871L265.867 167.722L217.292 135.762L197.056 150.108Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 289L74.2242 204.714L70 201.714L116.393 168.767C129.906 159.17 143.124 153.539 156.048 151.875C168.971 150.211 180.919 153.275 191.893 161.069C198.702 165.905 202.718 171.006 203.941 176.372C205.165 181.658 204.302 186.506 201.354 190.918L201.692 191.158C208.978 188.301 216.935 187.286 225.563 188.113C234.247 188.9 242.613 192.151 250.66 197.866C261.803 205.779 266.398 214.825 264.446 225.004C262.551 235.142 254.96 244.929 241.672 254.366L192.905 289ZM221.999 242.08L200.456 257.38L163.905 231.422L185.448 216.123C192.007 211.465 198.473 209.23 204.846 209.42C211.22 209.529 217.193 211.562 222.764 215.519C228.392 219.516 231.31 223.797 231.521 228.364C231.732 232.85 228.558 237.422 221.999 242.08ZM165.937 205.64L146.77 219.252L114.693 196.472L133.861 182.859C140.363 178.241 146.435 175.887 152.076 175.798C157.717 175.708 163.07 177.462 168.135 181.059C173.256 184.696 175.809 188.557 175.796 192.643C175.726 196.69 172.44 201.022 165.937 205.64Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M197.056 156.108L290.596 219.945L310.832 205.599L306.6 202.599L289.153 190.23L288.86 183.31L335.236 188.298L359.102 171.378L351.706 170.622L288.049 164.111L286.355 124L263.968 139.871L265.867 173.722L217.292 141.762L201.368 153.051L197.056 156.108Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 295L70 207.714L74.2242 204.714L116.393 174.767C129.906 165.17 143.124 159.539 156.048 157.875C168.971 156.211 180.919 159.275 191.893 167.069C198.702 171.905 202.718 177.006 203.941 182.372C205.165 187.658 204.302 192.506 201.354 196.918L201.692 197.158C208.978 194.301 216.935 193.286 225.563 194.113C234.247 194.9 242.613 198.151 250.66 203.866C261.803 211.779 266.398 220.825 264.446 231.004C262.551 241.142 254.96 250.929 241.672 260.366L192.905 295ZM221.999 248.08L200.456 263.38L163.905 237.422L185.448 222.123C192.007 217.465 198.473 215.23 204.846 215.42C211.22 215.529 217.193 217.562 222.764 221.519C228.392 225.516 231.31 229.797 231.521 234.364C231.732 238.85 228.558 243.422 221.999 248.08ZM165.937 211.64L146.77 225.252L114.693 202.472L133.861 188.859C140.363 184.241 146.435 181.887 152.076 181.798C157.717 181.708 163.07 183.462 168.135 187.059C173.256 190.696 175.809 194.557 175.796 198.643C175.726 202.69 172.44 207.022 165.937 211.64Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M310.832 199.599L306.6 202.599L310.832 205.599V199.599Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M359.102 165.378L351.706 170.622L359.102 171.378V165.378Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M201.368 153.051L197.056 150.108V156.108L201.368 153.051Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+<path d="M74.2242 204.714L70 201.714V207.714L74.2242 204.714Z" fill="#111927" fill-opacity="0.5" shape-rendering="crispEdges"/>
+</g>
+<path d="M197.056 150.108L290.596 213.945L310.832 199.599L289.153 184.23L288.86 177.31L335.236 182.298L359.102 165.378L288.049 158.111L286.355 118L263.968 133.871L265.867 167.722L217.292 135.762L197.056 150.108Z" fill="url(#paint2_linear_764_240)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M192.905 289L70 201.714L116.393 168.767C129.906 159.17 143.124 153.539 156.048 151.875C168.971 150.211 180.919 153.275 191.893 161.069C198.702 165.905 202.718 171.006 203.941 176.372C205.165 181.658 204.302 186.506 201.354 190.918L201.692 191.158C208.978 188.301 216.935 187.286 225.563 188.113C234.247 188.9 242.613 192.151 250.66 197.866C261.803 205.779 266.398 214.825 264.446 225.004C262.551 235.142 254.96 244.929 241.672 254.366L192.905 289ZM221.999 242.08L200.456 257.38L163.905 231.422L185.448 216.123C192.007 211.465 198.473 209.23 204.846 209.42C211.22 209.529 217.193 211.562 222.764 215.519C228.392 219.516 231.31 223.797 231.521 228.364C231.732 232.85 228.558 237.422 221.999 242.08ZM165.937 205.64L146.77 219.252L114.693 196.472L133.861 182.859C140.363 178.241 146.435 175.887 152.076 175.798C157.717 175.708 163.07 177.462 168.135 181.059C173.256 184.696 175.809 188.557 175.796 192.643C175.726 196.69 172.44 201.022 165.937 205.64Z" fill="url(#paint3_linear_764_240)"/>
+<defs>
+<filter id="filter0_d_764_240" x="66" y="116" width="297.103" height="185" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_764_240"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_764_240" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_764_240" x1="213" y1="46" x2="213" y2="347.2" gradientUnits="userSpaceOnUse">
+<stop stop-color="#10243E"/>
+<stop offset="1" stop-color="#0F1B2D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_764_240" x1="127.008" y1="96.51" x2="241.48" y2="334.974" gradientUnits="userSpaceOnUse">
+<stop stop-color="#262A65"/>
+<stop offset="1" stop-color="#104D87"/>
+</linearGradient>
+<linearGradient id="paint2_linear_764_240" x1="215" y1="98.5" x2="299.5" y2="210.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.379808" stop-color="#C2E6FF"/>
+<stop offset="0.706731" stop-color="#70B8FF"/>
+</linearGradient>
+<linearGradient id="paint3_linear_764_240" x1="215" y1="98.5" x2="299.5" y2="210.5" gradientUnits="userSpaceOnUse">
+<stop offset="0.379808" stop-color="#C2E6FF"/>
+<stop offset="0.706731" stop-color="#70B8FF"/>
+</linearGradient>
+</defs>
+</svg>
@@ -0,0 +1,102 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--space-4);
+
+  .series {
+    position: relative;
+    width: 100%;
+    aspect-ratio: 7 / 8;
+
+    .entry {
+      position: absolute;
+
+      border-radius: var(--space-3);
+      box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+
+      background-size: cover;
+      background-position: center;
+
+      &.skeleton {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .count {
+      position: absolute;
+      bottom: var(--space-3);
+      right: var(--space-3);
+
+      box-shadow: var(--shadow-aggressive);
+    }
+  }
+
+  .label {
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+
+    .skeleton {
+      width: 100%;
+    }
+  }
+}
+
+.details {
+  display: flex;
+  gap: var(--space-5);
+  align-items: center;
+
+  .preview {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    padding: var(--space-2);
+
+    &[data-grade="1"] .image {
+      outline: var(--space-2) solid var(--gray-9);
+    }
+
+    &[data-grade="2"] .image {
+      outline: var(--space-2) solid var(--blue-9);
+      box-shadow: 0 0 var(--space-3) var(--blue-9);
+    }
+
+    &[data-grade="3"] .image {
+      outline: var(--space-2) solid var(--purple-9);
+      box-shadow: 0 0 var(--space-4) var(--purple-9);
+    }
+
+    &[data-grade="4"] .image {
+      outline: var(--space-2) solid var(--amber-9);
+      box-shadow: 0 0 var(--space-5) var(--amber-9);
+    }
+
+    .image {
+      aspect-ratio: 7 / 8;
+      width: 8rem;
+      border-radius: var(--space-3);
+
+      background-size: cover;
+      background-position: center;
+    }
+
+    .grade {
+      margin-top: calc(var(--space-3) * -1);
+    }
+  }
+
+  .description {
+    display: flex;
+    flex-direction: column;
+
+    max-width: 20rem;
+  }
+}
@@ -0,0 +1,153 @@
+import { literals } from "@blitzkit/i18n";
+import { Grade } from "@protos/blitz_static_standard_grades_enum";
+import { DownloadIcon, StarFilledIcon } from "@radix-ui/react-icons";
+import type { Color } from "../../core/ui/color";
+import { useGameStrings } from "../../hooks/useGameStrings";
+import { useStrings } from "../../hooks/useStrings";
+import type { Avatar } from "../../protos/avatar";
+import type { PropsWithSkeleton } from "../../types/propsWithSkeleton";
+import { Badge } from "../Badge";
+import { Button } from "../Button";
+import { Dialog } from "../Dialog";
+import { InlineSkeleton } from "../InlineSkeleton";
+import { Link } from "../Link";
+import { Skeleton } from "../Skeleton";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  name: string;
+  avatars: Avatar[];
+}
+
+const MAX_CARDS = 3;
+const CARD_TRIM = "var(--space-3)";
+
+export function AvatarCard(props: PropsWithSkeleton<Props>) {
+  const card = (
+    <div className={styles.card}>
+      <Series skeleton={props.skeleton} {...props} />
+
+      <Text align="center" className={styles.label}>
+        {props.skeleton ? <InlineSkeleton /> : props.name}
+      </Text>
+    </div>
+  );
+
+  if (props.skeleton) return card;
+
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger>{card}</Dialog.Trigger>
+      <Dialog.Content>
+        <Text size="major" weight="bold">
+          {props.name}
+        </Text>
+
+        <Details avatars={props.avatars} />
+      </Dialog.Content>
+    </Dialog.Root>
+  );
+}
+
+interface DetailsProps {
+  avatars: Avatar[];
+}
+
+const gradeColors: Record<Grade, Color> = {
+  [Grade.GRADE_UNSPECIFIED]: "gray",
+  [Grade.GRADE_COMMON]: "gray",
+  [Grade.GRADE_RARE]: "blue",
+  [Grade.GRADE_EPIC]: "purple",
+  [Grade.GRADE_LEGENDARY]: "amber",
+};
+
+function Details({ avatars }: DetailsProps) {
+  const gameStrings = useGameStrings("ProfileAvatarEntity");
+  const strings = useStrings();
+
+  return [...avatars].reverse().map((avatar) => {
+    const description = gameStrings[avatar.stuff_ui!.description];
+    const obtaining = gameStrings[avatar.stuff_ui!.obtaining_methods];
+    const hasDescription = description || obtaining;
+
+    return (
+      <div className={styles.details}>
+        <div className={styles.preview} data-grade={avatar.stuff_ui!.grade}>
+          <div
+            className={styles.image}
+            style={{
+              backgroundImage: `url(/api/avatars/${avatar.name}.webp)`,
+            }}
+          />
+          <Badge
+            color={gradeColors[avatar.stuff_ui!.grade]}
+            className={styles.grade}
+          >
+            <StarFilledIcon />
+            {strings.grades[avatar.stuff_ui!.grade]}
+          </Badge>
+        </div>
+
+        <div className={styles.description}>
+          <Text>
+            {hasDescription ? (
+              <>
+                {description} {obtaining}
+              </>
+            ) : (
+              strings.avatars.no_description
+            )}
+          </Text>
+
+          <Link
+            underline="never"
+            href={`/api/avatars/${avatar.name}.webp`}
+            download
+          >
+            <Button>
+              <DownloadIcon /> {strings.avatars.download}
+            </Button>
+          </Link>
+        </div>
+      </div>
+    );
+  });
+}
+
+interface SeriesProps {
+  avatars: Avatar[];
+}
+
+function Series(props: PropsWithSkeleton<SeriesProps>) {
+  const count = Math.min(props.skeleton ? 0 : props.avatars.length, MAX_CARDS);
+  const strings = useStrings();
+
+  return (
+    <div className={styles.series}>
+      {!props.skeleton &&
+        props.avatars.slice(-MAX_CARDS).map((avatar, index) => (
+          <div
+            key={avatar.name}
+            className={styles.entry}
+            style={{
+              filter: `brightness(${(index + 1) / count})`,
+              top: `calc(${index} * ${CARD_TRIM})`,
+              left: `calc(${index} * ${CARD_TRIM})`,
+              width: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
+              height: `calc(100% - ${CARD_TRIM} * ${count - 1})`,
+              backgroundImage: `url(/api/avatars/${avatar.name}.webp)`,
+            }}
+          />
+        ))}
+
+      {!props.skeleton && props.avatars.length > 1 && (
+        <Badge color="gray" highContrast className={styles.count}>
+          {literals(strings.units.x, { value: props.avatars.length })}
+        </Badge>
+      )}
+
+      {props.skeleton && <Skeleton className={styles.entry} />}
+    </div>
+  );
+}
@@ -0,0 +1,7 @@
+.avatar-controls {
+  display: flex;
+
+  .search {
+    flex: 1;
+  }
+}
@@ -0,0 +1,40 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useCallback, useEffect, useRef } from "react";
+import { useStrings } from "../../hooks/useStrings";
+import { Avatars } from "../../stores/avatars";
+import { TextField } from "../TextField";
+import "./index.css";
+
+export function AvatarControls() {
+  const strings = useStrings();
+  const search = useRef<HTMLInputElement>(null);
+
+  const onChange = useCallback(() => {
+    if (!search.current) return;
+
+    const trimmed = search.current.value.trim();
+
+    Avatars.mutate((draft) => {
+      if (trimmed.length === 0) {
+        draft.search = null;
+      } else {
+        draft.search = trimmed;
+      }
+    });
+  }, []);
+
+  useEffect(onChange, []);
+
+  return (
+    <div className="avatar-controls">
+      <TextField
+        ref={search}
+        className="search"
+        placeholder={strings.avatars.search}
+        onChange={onChange}
+      >
+        <MagnifyingGlassIcon />
+      </TextField>
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+.avatars-list {
+  display: grid;
+  gap: var(--space-5) var(--space-4);
+  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
+
+  @media (min-width: 32rem) {
+    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  }
+}
@@ -0,0 +1,85 @@
+import fuzzysort from "fuzzysort";
+import { useMemo } from "react";
+import { api } from "../../core/api/dynamic";
+import { useAwait } from "../../hooks/useAwait";
+import { useGameStrings } from "../../hooks/useGameStrings";
+import { useLocale } from "../../hooks/useLocale";
+import type { Avatar } from "../../protos/avatar";
+import { Avatars } from "../../stores/avatars";
+import { AvatarCard } from "../AvatarCard";
+import { IncrementalLoader } from "../IncrementalLoader";
+import "./index.css";
+
+const { go } = fuzzysort;
+
+const indexingPattern = /.+_(\d+)$/;
+
+export function AvatarsList() {
+  const locale = useLocale();
+  const search = Avatars.use((state) => state.search);
+  const { avatars } = useAwait(() => api.avatars(), "avatars");
+  const gameStrings = useGameStrings("ProfileAvatarEntity");
+  const groups = useMemo(() => {
+    const groups = new Map<string, Avatar[]>();
+
+    for (const avatar of avatars) {
+      const name =
+        gameStrings[avatar.stuff_ui!.display_name] ??
+        avatar.stuff_ui!.display_name;
+
+      if (groups.has(name)) {
+        groups.get(name)!.push(avatar);
+      } else {
+        groups.set(name, [avatar]);
+      }
+    }
+
+    return groups;
+  }, []);
+  const ordered = useMemo(() => {
+    const array = Array.from(groups.entries());
+    return array
+      .sort((a, b) => a[0].localeCompare(b[0], locale))
+      .map(([name, avatars]) => ({
+        key: name,
+        name,
+        avatars: avatars.sort((a, b) => {
+          const gradeA = a.stuff_ui!.grade;
+          const gradeB = b.stuff_ui!.grade;
+          let diff = gradeA - gradeB;
+
+          if (diff === 0) {
+            const matchesA = a.name.match(indexingPattern);
+            const matchesB = b.name.match(indexingPattern);
+
+            if (matchesA && matchesB) {
+              const indexA = Number(matchesA[1]);
+              const indexB = Number(matchesB[1]);
+
+              diff = indexA - indexB;
+            }
+          }
+
+          return diff;
+        }),
+      }));
+  }, []);
+  const filtered = useMemo(() => {
+    if (search === null) return ordered;
+
+    const searched = go(search, ordered, { keys: ["name"] });
+
+    return searched.map((result) => result.obj);
+  }, [search]);
+
+  return (
+    <div className="avatars-list">
+      <IncrementalLoader
+        initial={7 * 5}
+        intermediate={7 * 3}
+        data={filtered}
+        Component={AvatarCard}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,17 @@
+.badge {
+  border-radius: var(--max-size);
+
+  padding: var(--space-2) var(--space-3);
+
+  font-size: var(--font-size-minor);
+  font-weight: var(--weight-medium);
+
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+
+  .svg {
+    width: 1em;
+    height: 1em;
+  }
+}
@@ -0,0 +1,32 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
+import { LIGHT_TEXT_COLORS } from "../Button";
+import styles from "./index.module.css";
+
+export interface BadgeProps extends ComponentProps<"div"> {
+  color?: Color | "accent";
+  highContrast?: boolean;
+}
+
+export function Badge({
+  className,
+  style,
+  color = "accent",
+  highContrast,
+  ...props
+}: BadgeProps) {
+  const lightText = LIGHT_TEXT_COLORS.has(color as Color);
+
+  return (
+    <div
+      className={classNames(styles.badge, className)}
+      style={{
+        backgroundColor: `var(--${color}-${highContrast ? 12 : 9})`,
+        color: `var(--gray-${highContrast || lightText ? 1 : 12})`,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,3 @@
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<link rel="sitemap" href="/sitemap-index.xml" />
@@ -0,0 +1,85 @@
+---
+import "@fontsource-variable/jetbrains-mono";
+import "@fontsource-variable/roboto-flex";
+---
+
+<style>
+  :root {
+    --space-0: 0.0625rem;
+    --space-1: 0.125rem;
+    --space-2: 0.25rem;
+    --space-3: 0.5rem;
+    --space-4: 1rem;
+    --space-5: 2rem;
+    --space-6: 4rem;
+    --space-7: 8rem;
+    --space-8: 16rem;
+    --space-9: 32rem;
+
+    --page-width: 64rem;
+
+    --max-size: max(100vw, 100vh);
+
+    --font-size-regular: 1rem;
+    --font-size-minor: 0.75rem;
+    --font-size-major: 1.25rem;
+
+    --font-size-heading-1: 3rem;
+    --font-size-heading-2: 2rem;
+    --font-size-heading-3: 1.5rem;
+    --font-size-heading-4: 1.25rem;
+    --font-size-heading-5: 1rem;
+    --font-size-heading-6: 0.75rem;
+
+    --font-family-regular: "Roboto Flex Variable", sans-serif;
+    --font-family-mono: "JetBrains Mono Variable", monospace;
+
+    --color-regular: var(--gray-12);
+    --color-low-contrast: var(--gray-11);
+
+    --weight-light: 300;
+    --weight-regular: 400;
+    --weight-medium: 500;
+    --weight-bold: 700;
+    --weight-black: 900;
+
+    --outline-focus: var(--space-1) solid var(--accent-6);
+
+    --shadow-cavity:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--black-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--white-a1);
+
+    --shadow-bump:
+      inset calc(var(--space-1) * sin(45deg)) calc(var(--space-1) * sin(45deg))
+        var(--space-1) var(--white-a3),
+      inset calc(var(--space-1) * sin(45deg) * -1)
+        calc(var(--space-1) * sin(45deg) * -1) var(--space-1) var(--black-a3);
+
+    --shadow-outline-width: 1.5px;
+    --shadow-outline-width-negative: calc(var(--shadow-outline-width) * -1);
+
+    --shadow-interactive-background: 0 0 0 var(--shadow-outline-width)
+      var(--gray-6);
+    --shadow-interactive-shine: var(--shadow-outline-width-negative)
+      var(--shadow-outline-width-negative) var(--shadow-outline-width)
+      var(--white-a1);
+    --shadow-interactive-shadow: var(--shadow-outline-width)
+      var(--shadow-outline-width) var(--shadow-outline-width) var(--black-a4);
+    --shadow-interactive:
+      var(--shadow-interactive-shine), var(--shadow-interactive-shadow),
+      var(--shadow-interactive-background);
+
+    --shadow-aggressive: var(--space-1) var(--space-1) var(--space-4)
+      var(--black-a11);
+    --shadow-subtle: 0 var(--space-1) var(--space-3) var(--black-a5);
+    --shadow-none: 0 0 0 transparent;
+
+    --blur-glass: blur(4rem);
+    --blur-tint: blur(8rem);
+
+    --duration-brief: 200ms;
+    --duration-subtle: 2s;
+  }
+</style>
@@ -0,0 +1,26 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+
+  border-radius: var(--max-size);
+  padding: var(--space-3) var(--space-4);
+
+  background-color: var(--accent-9);
+  border: none;
+
+  font-family: var(--font-family-regular);
+  font-size: var(--font-size-minor);
+  color: var(--gray-1);
+  font-weight: var(--weight-medium);
+
+  .svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  &[data-light-text="true"] {
+    color: var(--gray-12);
+  }
+}
@@ -0,0 +1,44 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import type { Color } from "../../core/ui/color";
+import styles from "./index.module.css";
+
+export interface ButtonProps extends ComponentProps<"button"> {
+  color?: Color;
+  variant?: "solid";
+}
+
+export const LIGHT_TEXT_COLORS = new Set<Color>([
+  "gold",
+  "bronze",
+  "teal",
+  "grass",
+  "amber",
+  "plum",
+  "pink",
+  "brown",
+  "crimson",
+  "jade",
+]);
+
+export function Button({
+  className,
+  color,
+  variant = "solid",
+  style,
+  ...props
+}: ButtonProps) {
+  return (
+    <button
+      className={classNames(styles.button, className)}
+      data-color={color}
+      data-variant={variant}
+      data-light-text={color ? LIGHT_TEXT_COLORS.has(color) : undefined}
+      style={{
+        backgroundColor: color ? `var(--${color}-9)` : undefined,
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,3 @@
+.code {
+  font-family: var(--font-family-mono);
+}
@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface CodeProps extends ComponentProps<"code"> {}
+
+export function Code({ className, ...props }: CodeProps) {
+  return <code className={classNames("code", className)} {...props} />;
+}
@@ -0,0 +1,24 @@
+---
+import type { Color } from "../core/ui/color";
+
+interface Props {
+  color: Color;
+  alias: string;
+  alpha?: boolean;
+}
+
+const { color, alias, alpha } = Astro.props;
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  styles += `--${alias}-${alpha ? "a" : ""}${n}:var(--${color}-${alpha ? "a" : ""}${n});`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>
@@ -0,0 +1,32 @@
+---
+import * as colors from "@radix-ui/colors";
+import type { Color } from "../core/ui/color";
+
+interface Props {
+  color: Color | AlphaOnlyColor;
+  alpha?: boolean;
+}
+
+const ALPHA_ONLY_COLORS = ["black", "white"] as const;
+type AlphaOnlyColor = (typeof ALPHA_ONLY_COLORS)[number];
+
+const { color, alpha } = Astro.props;
+const name = `${color}${
+  ALPHA_ONLY_COLORS.includes(color as AlphaOnlyColor) ? "" : "Dark"
+}${alpha ? "A" : ""}`;
+const scale = colors[name as keyof typeof colors];
+
+let styles = "";
+
+styles += ":root{";
+
+for (let i = 0; i < 12; i++) {
+  const n = i + 1;
+  const value = scale[`${color}${alpha ? "A" : ""}${n}` as keyof typeof scale];
+  styles += `--${color}-${alpha ? "a" : ""}${n}:${value};`;
+}
+
+styles += "}";
+---
+
+<style set:html={styles}></style>
@@ -0,0 +1,36 @@
+.trigger {
+  display: contents;
+  cursor: pointer;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100dvh;
+  overflow-y: scroll;
+
+  background-color: var(--black-a9);
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+    margin: var(--space-4);
+    box-sizing: border-box;
+
+    min-width: 25rem;
+
+    background-color: var(--gray-3);
+    padding: var(--space-4);
+    box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+    border-radius: var(--space-3);
+  }
+}
@@ -0,0 +1,80 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import styles from "./index.module.css";
+
+const DialogContext = createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} | null>(null);
+
+function useDialog() {
+  const context = useContext(DialogContext);
+
+  if (context === null) {
+    throw new Error("Dialog components must be used within a Dialog.Root");
+  }
+
+  return context;
+}
+
+interface RootProps {
+  children: ReactNode;
+}
+
+function Root({ children }: RootProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+interface TriggerProps {
+  children: ReactNode;
+}
+
+function Trigger({ children }: TriggerProps) {
+  const { setOpen } = useDialog();
+
+  return (
+    <div
+      className={styles.trigger}
+      onClick={() => {
+        setOpen(true);
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface ContentProps {
+  children: ReactNode;
+}
+
+function Content({ children }: ContentProps) {
+  const { open, setOpen } = useDialog();
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={() => {
+        setOpen(false);
+      }}
+    >
+      <div
+        className={styles.content}
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export const Dialog = { Root, Trigger, Content };
@@ -0,0 +1,67 @@
+---
+import packageJson from "../../../../package.json";
+import { api } from "../core/api/dynamic";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .footer {
+    display: flex;
+    justify-content: center;
+
+    padding: var(--space-5) var(--space-5);
+
+    background-color: var(--gray-3);
+    color: var(--color-low-contrast);
+
+    .content {
+      flex: 1;
+      max-width: var(--page-width);
+
+      .logo {
+        display: flex;
+        align-items: center;
+        gap: var(--space-4);
+
+        .icon {
+          width: var(--space-6);
+          height: var(--space-6);
+        }
+
+        .info {
+          display: flex;
+          flex-direction: column;
+          gap: var(--space-1);
+        }
+      }
+    }
+  }
+</style>
+
+<div class="footer">
+  <div class="content">
+    <div class="logo">
+      <BlitzKitIcon className="icon" />
+
+      <div class="info">
+        <Text lowContrast weight="medium" size="major">
+          {strings.common.name}
+        </Text>
+
+        <Code>
+          {packageJson.version}
+        </Code>
+      </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,25 @@
+.heading {
+  &[data-size="1"] {
+    font-size: var(--font-size-heading-1);
+  }
+
+  &[data-size="2"] {
+    font-size: var(--font-size-heading-2);
+  }
+
+  &[data-size="3"] {
+    font-size: var(--font-size-heading-3);
+  }
+
+  &[data-size="4"] {
+    font-size: var(--font-size-heading-4);
+  }
+
+  &[data-size="5"] {
+    font-size: var(--font-size-heading-5);
+  }
+
+  &[data-size="6"] {
+    font-size: var(--font-size-heading-6);
+  }
+}
@@ -0,0 +1,23 @@
+import { classNames } from "../../core/ui/classNames";
+import { Text, type TextProps } from "../Text";
+import "./index.css";
+
+export interface HeadingProps extends Omit<TextProps, "size"> {
+  size?: `${1 | 2 | 3 | 4 | 5 | 6}`;
+}
+
+export function Heading({
+  className,
+  weight,
+  size = "1",
+  ...props
+}: HeadingProps) {
+  return (
+    <Text
+      {...props}
+      weight={weight ?? "medium"}
+      className={classNames("heading", className)}
+      data-size={size}
+    />
+  );
+}
@@ -0,0 +1,111 @@
+---
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { api } from "../core/api/dynamic";
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { Code } from "./Code";
+import { Text } from "./Text";
+import { TextField } from "./TextField";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+
+const strings = await api.strings(locale);
+---
+
+<style>
+  .home-hero {
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    align-items: center;
+    position: relative;
+
+    padding: 0 var(--space-4);
+    margin-bottom: var(--space-4);
+
+    .wallpaper {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: calc(100% - var(--space-5) / 2);
+
+      background-image: url(/assets/home-hero.webp);
+      background-size: cover;
+      background-position: top;
+
+      .gradient {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        gap: var(--space-7);
+
+        width: 100%;
+        height: 100%;
+
+        background: linear-gradient(
+          color-mix(in srgb, transparent 50%, var(--gray-1)),
+          var(--gray-1)
+        );
+      }
+    }
+
+    .name {
+      margin: var(--space-6) 0;
+
+      .icon-wrapper {
+        position: relative;
+
+        width: var(--space-6);
+        height: var(--space-6);
+
+        .icon {
+          width: 100%;
+          height: 100%;
+        }
+
+        .version {
+          position: absolute;
+          top: 0;
+          right: 0;
+          transform: translate(100%, 0);
+          padding-left: var(--space-2);
+
+          font-weight: var(--weight-bold);
+          letter-spacing: -0.15em;
+        }
+      }
+    }
+
+    .search {
+      width: 100%;
+      max-width: 25rem;
+      z-index: 0;
+    }
+  }
+</style>
+
+<div class="home-hero">
+  <div class="wallpaper">
+    <div class="gradient"></div>
+  </div>
+
+  <div class="name">
+    <div class="icon-wrapper">
+      <BlitzKitIcon className="icon" />
+      <Code className="version">2.0</Code>
+    </div>
+
+    <Text lowContrast>
+      {strings.home.credit}
+    </Text>
+  </div>
+
+  <TextField className="search" placeholder={strings.home.search}>
+    <MagnifyingGlassIcon />
+  </TextField>
+</div>
@@ -0,0 +1,2 @@
+.incremental-loader {
+}
@@ -0,0 +1,83 @@
+import { times } from "lodash-es";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import type { PropsWithSkeleton } from "../../types/propsWithSkeleton";
+import "./index.css";
+
+export interface IncrementalLoaderProps<Props extends { key: string }> {
+  initial: number;
+  intermediate: number;
+  rate?: number;
+
+  skeleton?: boolean;
+  data: Props[];
+  Component: (props: PropsWithSkeleton<Omit<Props, "key">>) => ReactNode;
+}
+
+export function IncrementalLoader<Props extends { key: string }>({
+  initial,
+  rate = 2,
+  data,
+  skeleton,
+  intermediate,
+  Component,
+}: IncrementalLoaderProps<Props>) {
+  const [count, setCount] = useState(initial);
+  const sliced = data.slice(0, count);
+
+  useEffect(() => setCount(initial), [data, initial]);
+
+  return (
+    <>
+      {!skeleton &&
+        sliced.map(({ key, ...props }) => <Component key={key} {...props} />)}
+
+      {times(
+        skeleton
+          ? initial + intermediate
+          : Math.min(intermediate, data.length - count),
+        (index) => (
+          <Item key={index} rate={rate} setCount={setCount}>
+            <Component skeleton />
+          </Item>
+        )
+      )}
+    </>
+  );
+}
+
+interface ItemProps {
+  children: ReactNode;
+  rate: number;
+  setCount: (setter: (state: number) => number) => void;
+}
+
+function Item({ setCount, rate, children }: ItemProps) {
+  const wrapper = useRef<HTMLDivElement>(null);
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    function dispose() {
+      observer.current?.disconnect();
+      observer.current = null;
+    }
+
+    if (!wrapper.current) return;
+
+    if (observer.current === null) {
+      observer.current = new IntersectionObserver(([entry]) => {
+        if (!entry.isIntersecting) return;
+        setCount((state) => state + rate);
+      });
+
+      observer.current.observe(wrapper.current);
+    }
+
+    return dispose;
+  }, []);
+
+  return (
+    <div ref={wrapper} className="incremental-loader">
+      {children}
+    </div>
+  );
+}
@@ -0,0 +1,5 @@
+.inline-skeleton {
+  display: inline-block;
+
+  height: 1em;
+}
@@ -0,0 +1,11 @@
+import { classNames } from "../../core/ui/classNames";
+import { Skeleton, type SkeletonProps } from "../Skeleton";
+import "./index.css";
+
+export interface InlineSkeletonProps extends SkeletonProps {}
+
+export function InlineSkeleton({ className, ...props }: InlineSkeletonProps) {
+  return (
+    <Skeleton className={classNames("inline-skeleton", className)} {...props} />
+  );
+}
@@ -0,0 +1,23 @@
+.link {
+  color: var(--accent-11);
+  text-decoration-color: currentColor;
+
+  &[data-underline="hover"],
+  &[data-underline="never"] {
+    text-decoration: none;
+  }
+
+  &[data-underline="hover"]:hover,
+  &[data-underline="hover"]:focus {
+    text-decoration: underline;
+  }
+
+  &[data-high-contrast="true"] {
+    color: var(--accent-12);
+  }
+
+  svg {
+    width: 1.25em;
+    height: 1.25em;
+  }
+}
@@ -0,0 +1,24 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface LinkProps extends ComponentProps<"a"> {
+  underline?: "always" | "hover" | "never";
+  highContrast?: boolean;
+}
+
+export function Link({
+  highContrast,
+  className,
+  underline = "always",
+  ...props
+}: LinkProps) {
+  return (
+    <a
+      className={classNames("link", className)}
+      {...props}
+      data-underline={underline}
+      data-high-contrast={highContrast}
+    />
+  );
+}
@@ -0,0 +1,15 @@
+import locales from "@blitzkit/i18n/locales.json";
+import { Link, type LinkProps } from "./Link";
+
+export interface LinkI18n extends LinkProps {
+  locale: string;
+}
+
+export function LinkI18n({ locale, href, ...props }: LinkI18n) {
+  return (
+    <Link
+      href={`${locale === locales.default ? "" : `/${locale}`}${href}`}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,126 @@
+---
+import { BlitzKitIcon } from "../icons/BlitzKit";
+import { LinkI18n } from "./LinkI18n";
+import { Text } from "./Text";
+import { api } from "../core/api/dynamic";
+import { tools } from "../core/tools/tools";
+import type { Tool } from "../core/tools/tools";
+import { HamburgerMenuIcon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
+
+interface Props {
+  locale: string;
+}
+
+const { locale } = Astro.props;
+---
+
+<style>
+  #navbar {
+    position: sticky;
+    top: 0;
+    left: 0;
+    width: 100%;
+
+    display: flex;
+    justify-content: center;
+
+    z-index: 1;
+    background-color: var(--gray-a2);
+    box-shadow: var(--shadow-none);
+    backdrop-filter: var(--blur-glass) brightness(10%);
+    box-shadow: var(--shadow-subtle);
+
+    transition-duration: var(--duration-brief);
+
+    &[data-sticky="true"] {
+      transform: translateY(-100%);
+      box-shadow: var(--shadow-none);
+    }
+
+    .content {
+      display: flex;
+      justify-content: space-between;
+
+      width: 100%;
+      max-width: calc(var(--page-width) + 2 * var(--space-4));
+
+      .group {
+        display: flex;
+        gap: var(--space-2);
+
+        .action {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          padding: var(--space-3);
+          gap: var(--space-2);
+
+          cursor: pointer;
+          color: var(--color-regular);
+          text-decoration: none;
+          color: var(--gray-11);
+
+          .selector {
+            padding: var(--space-2);
+            border-radius: var(--max-size);
+
+            display: flex;
+            justify-content: center;
+
+            width: 100%;
+            max-width: var(--space-6);
+
+            .icon {
+              height: 1.25em;
+              width: 100%;
+              vertical-align: top;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
+
+<script>
+  const navbar = document.getElementById("navbar")!;
+  let lastScrollY = window.scrollY;
+
+  function handleScroll() {
+    const dy = window.scrollY - lastScrollY;
+    lastScrollY = window.scrollY;
+
+    const hide = window.scrollY > navbar.clientHeight && dy > 0;
+
+    navbar.dataset.sticky = `${hide}`;
+  }
+
+  handleScroll();
+  window.addEventListener("scroll", handleScroll);
+</script>
+
+<div id="navbar">
+  <div class="content">
+    <div class="group">
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <BlitzKitIcon className="icon" />
+        </div>
+      </LinkI18n>
+    </div>
+
+    <div class="group">
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <MagnifyingGlassIcon className="icon" />
+        </div>
+      </LinkI18n>
+
+      <LinkI18n {locale} href="/" className="action" tabIndex={0}>
+        <div class="selector">
+          <HamburgerMenuIcon className="icon" />
+        </div>
+      </LinkI18n>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,9 @@
+.recent {
+  .list {
+    min-height: var(--space-7);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
@@ -0,0 +1,34 @@
+import { LocaleProvider } from "../../hooks/useLocale";
+import { useStrings } from "../../hooks/useStrings";
+import { Heading } from "../Heading";
+import { Section } from "../Section";
+import { Text } from "../Text";
+import styles from "./index.module.css";
+
+interface Props {
+  locale: string;
+  skeleton?: boolean;
+}
+
+export function RecentItems({ locale, skeleton }: Props) {
+  return (
+    <LocaleProvider locale={locale}>
+      <Content />
+    </LocaleProvider>
+  );
+}
+
+function Content() {
+  const strings = useStrings();
+  return (
+    <Section first className={styles.recent}>
+      <Heading size="3">{strings.recent.title}</Heading>
+
+      <div className={styles.list}>
+        <Text lowContrast size="minor">
+          {strings.recent.no_recent}
+        </Text>
+      </div>
+    </Section>
+  );
+}
@@ -0,0 +1,18 @@
+.section {
+  display: flex;
+  justify-content: center;
+  padding: var(--space-4);
+
+  .content {
+    flex: 1;
+    max-width: var(--page-width);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  &[data-first="true"] .content {
+    padding-top: var(--space-6);
+  }
+}
@@ -0,0 +1,19 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface SectionProps extends ComponentProps<"div"> {
+  first?: boolean;
+}
+
+export function Section({ className, children, ...props }: SectionProps) {
+  return (
+    <div
+      data-first={props.first}
+      className={classNames("section", className)}
+      {...props}
+    >
+      <div className="content">{children}</div>
+    </div>
+  );
+}
@@ -0,0 +1,17 @@
+@keyframes skeleton-animation {
+  0% {
+    background-color: var(--black-a8);
+  }
+  50% {
+    background-color: var(--black-a5);
+  }
+  100% {
+    background-color: var(--black-a8);
+  }
+}
+
+.skeleton {
+  animation: skeleton-animation var(--duration-subtle) ease infinite;
+
+  border-radius: var(--space-2);
+}
@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface SkeletonProps extends ComponentProps<"div"> {}
+
+export function Skeleton({ className, ...props }: SkeletonProps) {
+  return <div className={classNames("skeleton", className)} {...props} />;
+}
@@ -0,0 +1,26 @@
+import type { CharacteristicOutput } from "../core/tankopedia/characteristics";
+import type { CharacteristicRenderConfig } from "../core/tankopedia/characteristicsOrder";
+import { renderCharacteristic } from "../core/tankopedia/renderCharacteristic";
+
+interface Props {
+  characteristic: CharacteristicOutput;
+  others: CharacteristicOutput[];
+  config: CharacteristicRenderConfig;
+}
+
+export function TankopediaCharacteristic({
+  characteristic,
+  others,
+  config,
+}: Props) {
+  if (characteristic === null) return null;
+
+  const rendered = renderCharacteristic(characteristic, config);
+
+  return (
+    <p>
+      {config.name}: {rendered} {config.units && `${config.units}`} (1 /{" "}
+      {others.length})
+    </p>
+  );
+}
@@ -0,0 +1,7 @@
+interface Props {
+  toy: string;
+}
+
+export function TankopediaToy({ toy }: Props) {
+  return <p>toy: {toy}</p>;
+}
@@ -0,0 +1,38 @@
+.text {
+  font-size: var(--font-size-regular);
+  color: var(--gray-12);
+
+  &[data-low-contrast="true"] {
+    color: var(--white-a9);
+  }
+
+  &[data-size="minor"] {
+    font-size: var(--font-size-minor);
+  }
+  &[data-size="major"] {
+    font-size: var(--font-size-major);
+  }
+
+  &[data-weight="light"] {
+    font-weight: var(--weight-light);
+  }
+  &[data-weight="regular"] {
+    font-weight: var(--weight-regular);
+  }
+  &[data-weight="medium"] {
+    font-weight: var(--weight-medium);
+  }
+  &[data-weight="bold"] {
+    font-weight: var(--weight-bold);
+  }
+  &[data-weight="black"] {
+    font-weight: var(--weight-black);
+  }
+
+  &[data-align="center"] {
+    text-align: center;
+  }
+  &[data-align="right"] {
+    text-align: right;
+  }
+}
@@ -0,0 +1,31 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface TextProps extends ComponentProps<"span"> {
+  weight?: "light" | "regular" | "medium" | "bold" | "black";
+  lowContrast?: boolean;
+  size?: "regular" | "minor" | "major";
+  align?: "left" | "center" | "right";
+}
+
+export function Text({
+  lowContrast,
+  className,
+  size = "regular",
+  weight,
+  style,
+  align,
+  ...props
+}: TextProps) {
+  return (
+    <span
+      className={classNames("text", className)}
+      data-low-contrast={lowContrast}
+      data-size={size}
+      data-weight={weight}
+      data-align={align === "left" ? undefined : align}
+      {...props}
+    />
+  );
+}
@@ -0,0 +1,69 @@
+.text-field {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+
+  gap: var(--space-3);
+
+  border-radius: var(--max-size);
+
+  background-color: var(--gray-1);
+  box-shadow: var(--shadow-interactive), var(--shadow-cavity);
+  cursor: text;
+
+  font-size: var(--font-size-regular);
+  color: var(--gray-11);
+
+  &[data-has-icon="true"] {
+    padding-left: var(--space-3);
+
+    input {
+      padding-left: 0;
+    }
+  }
+
+  &:focus-within {
+    outline: var(--outline-focus);
+    box-shadow: var(--shadow-focus);
+  }
+
+  &[data-disabled="true"] {
+    cursor: not-allowed;
+    background-color: var(--gray-3);
+
+    color: var(--gray-9);
+
+    input::placeholder {
+      color: var(--gray-9);
+    }
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  input {
+    min-width: 0;
+    flex: 1;
+
+    background: none;
+    border: none;
+    cursor: inherit;
+
+    font-size: inherit;
+    font-weight: medium;
+    padding: var(--space-3) 0;
+    padding-left: var(--space-4);
+
+    color: var(--gray-12);
+
+    &::placeholder {
+      color: var(--gray-11);
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
@@ -0,0 +1,33 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef,
+  type ComponentProps,
+  type ReactNode,
+} from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export interface TextFieldProps extends ComponentProps<"input"> {
+  children?: ReactNode;
+}
+
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  ({ children, className, placeholder, disabled, ...props }, ref) => {
+    const input = useRef<HTMLInputElement>(null);
+
+    useImperativeHandle(ref, () => input.current!, []);
+
+    return (
+      <div
+        {...props}
+        className={classNames("text-field", className)}
+        data-has-icon={children !== undefined}
+        data-disabled={disabled}
+      >
+        {children}
+        <input disabled={disabled} ref={input} placeholder={placeholder} />
+      </div>
+    );
+  }
+);
@@ -0,0 +1,90 @@
+---
+import { api } from "../core/api/dynamic";
+import type { Tool } from "../core/tools/tools";
+import { Heading } from "./Heading";
+import { Text } from "./Text";
+
+interface Props {
+  locale: string;
+  tool: Tool;
+}
+
+const { tool, locale } = Astro.props;
+const strings = await api.strings(locale);
+const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
+---
+
+<style>
+  .tool-banner {
+    background-size: cover;
+    margin-bottom: var(--space-4);
+
+    .content {
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      display: flex;
+      justify-content: center;
+      gap: var(--space-4);
+      padding: var(--space-5) var(--space-4);
+      box-sizing: border-box;
+
+      backdrop-filter: var(--blur-tint);
+
+      @media (width > 40rem) {
+        padding: var(--space-6) var(--space-4);
+      }
+
+      .centered {
+        flex: 1;
+        max-width: var(--page-width);
+
+        display: flex;
+        flex-direction: column;
+      }
+
+      .pattern {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+
+        mask-image: linear-gradient(
+          90deg,
+          transparent 25%,
+          var(--black-a1),
+          transparent
+        );
+        mask-repeat: no-repeat;
+        mask-size: cover;
+      }
+    }
+  }
+</style>
+
+<div
+  class="tool-banner"
+  style={{
+    backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+    backgroundPosition: tool.banner_background_position ?? "top",
+  }}
+>
+  <div class="content">
+    <div
+      class="pattern"
+      style={{ backgroundImage: `url(/assets/patterns/${tool.id}.svg)` }}
+    >
+    </div>
+
+    <div class="centered">
+      <Heading weight="medium" size="2">
+        {toolStrings.name}
+      </Heading>
+      <Text>
+        {toolStrings.slogan}
+      </Text>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,88 @@
+---
+import { CaretRightIcon } from "@radix-ui/react-icons";
+import { api } from "../core/api/dynamic";
+import { type Tool } from "../core/tools/tools";
+import { Button } from "./Button";
+import { LinkI18n } from "./LinkI18n";
+import { Text } from "./Text";
+
+interface Props {
+  tool: Tool;
+  locale: string;
+}
+
+const { tool, locale } = Astro.props;
+const strings = await api.strings(locale);
+const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
+---
+
+<style>
+  .tool-card {
+    display: flex;
+    flex-direction: column;
+    height: 10rem;
+    position: relative;
+
+    border-radius: var(--space-3);
+
+    background-size: cover;
+    background-position: center;
+    overflow: hidden;
+
+    &[data-significant="true"] {
+      grid-column: 1 / -1;
+      height: 15rem;
+    }
+
+    .poster {
+      flex: 1;
+
+      background-size: cover;
+      background-position: center;
+    }
+
+    .info {
+      display: flex;
+      justify-content: space-between;
+      padding: var(--space-4);
+
+      backdrop-filter: blur(var(--space-6));
+
+      .readable {
+        display: flex;
+        flex-direction: column;
+      }
+    }
+  }
+</style>
+
+<LinkI18n
+  {locale}
+  href={`/${tool.id}`}
+  className="tool-card"
+  underline="never"
+  style={{
+    backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+  }}
+  data-significant={tool.significant}
+>
+  <div
+    class="poster"
+    style={{
+      backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
+    }}
+  >
+  </div>
+
+  <div class="info">
+    <div class="readable">
+      <Text weight="medium">{toolStrings.name}</Text>
+      <Text size="minor" lowContrast>{toolStrings.slogan}</Text>
+    </div>
+
+    <Button color={tool.accent}>
+      {toolStrings.action}
+      <CaretRightIcon />
+    </Button>
+  </div>
+</LinkI18n>
@@ -0,0 +1,38 @@
+import { glob } from "astro/loaders";
+import { z } from "astro/zod";
+import { defineCollection } from "astro:content";
+
+const api = defineCollection({
+  loader() {
+    const globbed = import.meta.glob("./pages/api/**/*.ts", {
+      eager: true,
+      query: "?raw",
+      import: "default",
+    });
+
+    const paths: { id: string; body: string }[] = [];
+
+    for (const path in globbed) {
+      const id = path.replace("./pages/api/", "").replace(".ts", "");
+      const body = (globbed[path] as string).replaceAll("\r\n", "\n");
+      const docs = body.match(
+        /\/\*\*\n((( \*.*)\n)+) \*\/\nexport (async )?function GET\(/
+      )?[1].spl;
+
+      paths.push({ id, body, docs: docs?.[1] ?? undefined });
+    }
+
+    return paths;
+  },
+
+  schema: z.object({
+    body: z.string(),
+    docs: z.optional(z.string()),
+  }),
+});
+
+const docs = defineCollection({
+  loader: glob({ base: "../../docs", pattern: "**/*.md" }),
+});
+
+export const collections = { api, docs };
@@ -0,0 +1,161 @@
+import type { Strings } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import type { Avatar } from "../../protos/avatar";
+import type { Avatars } from "../../protos/avatars";
+import type { Background } from "../../protos/background";
+import type { Backgrounds } from "../../protos/backgrounds";
+import type { Tank } from "../../protos/tank";
+import type { TankList } from "../../protos/tank_list";
+import type { Tanks } from "../../protos/tanks";
+
+export abstract class AbstractAPI {
+  private _tankListCache: TankList | undefined;
+  protected abstract _tankList(): Promise<TankList>;
+  async tankList() {
+    if (this._tankListCache === undefined) {
+      this._tankListCache = await this._tankList();
+    }
+
+    return this._tankListCache;
+  }
+
+  private _tankCache: Record<string, Tank> = {};
+  protected abstract _tank(id: string): Promise<Tank>;
+  async tank(id: string) {
+    if (this._tankCache[id] === undefined) {
+      this._tankCache[id] = await this._tank(id);
+    }
+
+    return this._tankCache[id];
+  }
+
+  private _tanksCache: Tanks | undefined;
+  protected abstract _tanks(): Promise<Tanks>;
+  async tanks() {
+    if (this._tanksCache === undefined) {
+      this._tanksCache = await this._tanks();
+    }
+
+    return this._tanksCache;
+  }
+
+  private assertLocale(locale: string) {
+    const supported = locales.supported.find(
+      (supported) => supported.locale === locale
+    );
+
+    if (supported === undefined) {
+      throw new Error(`Unsupported locale: ${locale}`);
+    }
+
+    return supported;
+  }
+
+  private _stringsCache: Record<string, Strings> = {};
+  protected abstract _strings(locale: string): Promise<Strings>;
+  async strings(locale: string) {
+    this.assertLocale(locale);
+
+    if (this._stringsCache[locale] === undefined) {
+      this._stringsCache[locale] = await this._strings(locale);
+    }
+
+    return this._stringsCache[locale];
+  }
+
+  private _gameStringsCache: Record<string, Record<string, string>> = {};
+  protected abstract _gameStrings(
+    locale: string
+  ): Promise<Record<string, string>>;
+  async gameStrings(locale: string) {
+    this.assertLocale(locale);
+
+    if (this._gameStringsCache[locale] === undefined) {
+      this._gameStringsCache[locale] = await this._gameStrings(locale);
+    }
+
+    return this._gameStringsCache[locale];
+  }
+
+  private _groupedGameStringsCache: Record<
+    string,
+    Record<string, Record<string, string>>
+  > = {};
+  protected abstract _groupedGameStrings(
+    locale: string,
+    group: string
+  ): Promise<Record<string, string>>;
+  async groupedGameStrings(locale: string, group: string, prefix: boolean) {
+    this.assertLocale(locale);
+
+    if (this._groupedGameStringsCache[locale] === undefined) {
+      this._groupedGameStringsCache[locale] = {};
+    }
+
+    if (this._groupedGameStringsCache[locale][group] === undefined) {
+      this._groupedGameStringsCache[locale][group] =
+        await this._groupedGameStrings(locale, group);
+    }
+
+    if (!prefix) return this._groupedGameStringsCache[locale][group];
+
+    const strings: Record<string, string> = {};
+
+    for (const key in this._groupedGameStringsCache[locale][group]) {
+      strings[`${group}__${key}`] =
+        this._groupedGameStringsCache[locale][group][key];
+    }
+
+    return strings;
+  }
+
+  private _avatarCache: Record<string, Avatar> = {};
+  protected abstract _avatar(id: string): Promise<Avatar>;
+  async avatar(id: string) {
+    if (this._avatarCache[id] === undefined) {
+      this._avatarCache[id] = await this._avatar(id);
+    }
+
+    return this._avatarCache[id];
+  }
+
+  private _avatarsCache: Avatars | undefined;
+  protected abstract _avatars(): Promise<Avatars>;
+  async avatars() {
+    if (this._avatarsCache === undefined) {
+      this._avatarsCache = await this._avatars();
+    }
+
+    return this._avatarsCache;
+  }
+
+  private _backgroundCache: Record<string, Background> = {};
+  protected abstract _background(id: string): Promise<Background>;
+  async background(id: string) {
+    if (this._backgroundCache[id] === undefined) {
+      this._backgroundCache[id] = await this._background(id);
+    }
+
+    return this._backgroundCache[id];
+  }
+
+  private _backgroundsCache: Backgrounds | undefined;
+  protected abstract _backgrounds(): Promise<Backgrounds>;
+  async backgrounds() {
+    if (this._backgroundsCache === undefined) {
+      this._backgroundsCache = await this._backgrounds();
+    }
+
+    return this._backgroundsCache;
+  }
+
+  private _gameStringGroupsCache: string[] | undefined;
+  protected abstract _gameStringGroups(): Promise<string[]>;
+  async gameStringGroups() {
+    if (this._gameStringGroupsCache === undefined) {
+      this._gameStringGroupsCache = await this._gameStringGroups();
+    }
+
+    return this._gameStringGroupsCache;
+  }
+}
@@ -0,0 +1,27 @@
+import { fetchPB } from "@blitzkit/core";
+import type { Strings } from "@blitzkit/i18n";
+import { Avatars } from "../../protos/avatars";
+import { AbstractAPI } from "./abstract";
+
+//@ts-expect-error
+export class ClientAPI extends AbstractAPI {
+  protected _avatars() {
+    return fetchPB("/api/avatars/all.pb", Avatars);
+  }
+
+  protected _gameStrings(): Promise<Record<string, string>> {
+    throw new Error("Cannot fetch full game strings on client");
+  }
+
+  protected async _groupedGameStrings(locale: string, group: string) {
+    const response = await fetch(`/api/game-strings/${locale}/${group}.json`);
+    const json = (await response.json()) as Record<string, string>;
+    return json;
+  }
+
+  protected async _strings(locale: string) {
+    const response = await fetch(`/api/strings/${locale}.json`);
+    const json = (await response.json()) as Strings;
+    return json;
+  }
+}
@@ -0,0 +1,24 @@
+import { assertSecret } from "@blitzkit/core";
+import type { AbstractAPI } from "./abstract";
+
+let dynamicAPI: AbstractAPI;
+
+if (typeof window === "undefined") {
+  const { ProxyClient } = await import("@blitzkit/closed");
+  const { ServerAPI } = await import("./server");
+
+  const proxyClient = await new ProxyClient(
+    assertSecret(import.meta.env.WOTB_SERVER)
+  ).handshake();
+  const metadata = await proxyClient.metadata();
+
+  dynamicAPI = new ServerAPI(metadata);
+} else {
+  const { ClientAPI } = await import("./client");
+
+  dynamicAPI = new ClientAPI();
+}
+
+export const api = dynamicAPI;
+
+
@@ -0,0 +1,23 @@
+import sharp from "sharp";
+
+export async function imageProxy(url: string) {
+  if (import.meta.env.DEV) {
+    return Response.redirect(url);
+  }
+
+  let response: Response;
+
+  try {
+    response = await fetch(url);
+  } catch (error) {
+    console.warn(`Failed to fetch image proxy ${url}:`, error);
+    return new Response(null, { status: 404 });
+  }
+
+  const buffer = await response.arrayBuffer();
+  const image = sharp(buffer, { animated: true });
+  const webp = await image.webp().toBuffer();
+  const array = new Uint8Array(webp);
+
+  return new Response(array);
+}
@@ -0,0 +1,235 @@
+import type { MetadataAccessor } from "@blitzkit/closed";
+import { sluggify, type DeepPartial } from "@blitzkit/core";
+import type { Strings } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import type { RemoteStorageComponent } from "@protos/blitz_static_remote_storage_component";
+import { merge } from "lodash-es";
+import { parse } from "yaml";
+import type { Avatar } from "../../protos/avatar";
+import type { Background } from "../../protos/background";
+import type { Tank } from "../../protos/tank";
+import type { TankListEntry } from "../../protos/tank_list";
+import type { Tanks } from "../../protos/tanks";
+import { AbstractAPI } from "./abstract";
+
+if (typeof window !== "undefined") {
+  throw new Error("ServerAPI is being evaluated in the browser");
+}
+
+const globbedStrings = import.meta.glob("../../../../i18n/strings/*.json", {
+  import: "default",
+});
+
+interface LocalizationConfig {
+  namespaces: string[];
+}
+
+export class ServerAPI extends AbstractAPI {
+  constructor(private metadata: MetadataAccessor) {
+    super();
+  }
+
+  protected async _gameStrings(locale: string) {
+    const group = this.metadata.group("ClientConfigsEntity");
+
+    if (group.length !== 1) {
+      throw new RangeError(
+        `Don't know how to handle ${group.length} ClientConfigsEntities`
+      );
+    }
+
+    const clientConfig = this.metadata.item(group[0].id);
+    const localizationResources = clientConfig.LocalizationResources();
+
+    if (!localizationResources.remote_storage) {
+      throw new Error("Localization resources not found");
+    }
+
+    let remoteStorage: RemoteStorageComponent | undefined = undefined;
+
+    for (const candidateId of localizationResources.remote_storage
+      .remote_urls) {
+      const item = this.metadata.item(candidateId);
+      const candidate = item.RemoteStorage();
+
+      if (
+        remoteStorage === undefined ||
+        candidate.download_speed_weight > remoteStorage.download_speed_weight
+      ) {
+        remoteStorage = candidate;
+      }
+    }
+
+    if (remoteStorage === undefined) {
+      throw new Error("No suitable production remote storage found");
+    }
+
+    const strings: Record<string, string> = {};
+    const configPath = `${remoteStorage.url}/${remoteStorage.relative_path}/config.yaml`;
+
+    try {
+      const config = await fetch(configPath)
+        .then((response) => response.text())
+        .then((text) => parse(text) as LocalizationConfig);
+
+      for (const namespace of config.namespaces) {
+        Object.assign(
+          strings,
+          await fetch(
+            `${remoteStorage.url}${remoteStorage.relative_path}/${namespace}/${locale}.yaml`
+          )
+            .then((response) => response.text())
+            .then((text) => {
+              const strings: Record<string, string> = {};
+              const parsed = parse(text) as Record<string, string>;
+
+              for (const key in parsed) {
+                strings[key] = parsed[key].replaceAll('\\"', '"');
+              }
+
+              return strings;
+            })
+        );
+      }
+    } catch (error) {
+      console.warn(
+        `Failed to fetch config from ${configPath}. Returning empty strings. This will throw an error in production. Error:`,
+        error
+      );
+    }
+
+    return strings;
+  }
+
+  protected async _groupedGameStrings(locale: string, group: string) {
+    const strings = await this.gameStrings(locale);
+    const filtered: Record<string, string> = {};
+
+    for (const key in strings) {
+      if (key.startsWith(`${group}__`)) {
+        const trimmed = key.substring(group.length + 2);
+        filtered[trimmed] = strings[key];
+      }
+    }
+
+    return filtered;
+  }
+
+  protected async _strings(locale: string) {
+    const localized = (await globbedStrings[
+      `../../../../i18n/strings/${locale}.json`
+    ]()) as DeepPartial<Strings>;
+    const defaults = (await globbedStrings[
+      `../../../../i18n/strings/${locales.default}.json`
+    ]()) as Strings;
+    const strings = merge({}, defaults, localized);
+
+    return strings;
+  }
+
+  protected async _tankList() {
+    const group = this.metadata.group("TankEntity");
+    const list: TankListEntry[] = [];
+    const strings = await this.groupedGameStrings("en", "TankEntity", true);
+
+    for (const item of group) {
+      const tankCatalog = item.TankCatalog();
+
+      if (!tankCatalog.name) continue;
+
+      const name = strings[tankCatalog.name.value];
+
+      if (!name) continue;
+
+      const id = item.name;
+      const slug = sluggify(name);
+
+      list.push({ id, slug });
+    }
+
+    return { list };
+  }
+
+  protected async _tanks() {
+    const tankList = await this.tankList();
+    const data: Tanks = { tanks: {} };
+
+    for (const { id } of tankList.list) {
+      data.tanks[id] = await this.tank(id);
+    }
+
+    return data;
+  }
+
+  protected async _tank(id: string) {
+    const tankList = await this.tankList();
+    const tankListEntry = tankList.list.find((tank) => tank.id === id);
+
+    if (!tankListEntry) {
+      throw new Error(`Tank with id ${id} not found`);
+    }
+
+    const { slug } = tankListEntry;
+    const item = this.metadata.item(`TankEntity.${id}`);
+    const tank = item.TankCatalog();
+    const compensation = item.Compensation();
+
+    return { tank, compensation, slug } satisfies Tank;
+  }
+
+  protected async _avatars() {
+    const avatars: Avatar[] = [];
+
+    for (const item of this.metadata.group("ProfileAvatarEntity")) {
+      avatars.push(await this.avatar(item.name));
+    }
+
+    return { avatars };
+  }
+
+  protected async _avatar(id: string) {
+    const avatar = this.metadata.item(`ProfileAvatarEntity.${id}`);
+    const name = avatar.name;
+    const stuff_ui = avatar.StuffUI("UIComponent");
+    const profile_avatar = avatar.ProfileAvatar();
+    const sellable = avatar.components.sellableComponent
+      ? avatar.Sellable()
+      : undefined;
+
+    return { name, stuff_ui, profile_avatar, sellable };
+  }
+
+  protected async _backgrounds() {
+    const backgrounds: Background[] = [];
+
+    for (const item of this.metadata.group("ProfileBackgroundEntity")) {
+      backgrounds.push(await this.background(item.name));
+    }
+
+    return { backgrounds };
+  }
+
+  protected async _background(id: string) {
+    const background = this.metadata.item(`ProfileBackgroundEntity.${id}`);
+    const name = background.name;
+    const stuff_ui = background.StuffUI("UIComponent");
+    const profile_background = background.ProfileBackground();
+    const sellable = background.components.sellableComponent
+      ? background.Sellable()
+      : undefined;
+
+    return { name, stuff_ui, profile_background, sellable };
+  }
+
+  protected async _gameStringGroups() {
+    const defaultGameStrings = await this.gameStrings(locales.default);
+    const groups = new Set<string>();
+
+    for (const key in defaultGameStrings) {
+      const [group] = key.split("__");
+      groups.add(group);
+    }
+
+    return Array.from(groups.values());
+  }
+}
@@ -0,0 +1,32 @@
+import type {
+  GetStaticPathsItem,
+  GetStaticPathsOptions,
+  GetStaticPathsResult,
+} from "astro";
+
+type Promisable<T> = T | Promise<T>;
+
+export function mixStaticPaths<
+  TypeA extends GetStaticPathsItem,
+  TypeB extends GetStaticPathsItem
+>(
+  a: (options: GetStaticPathsOptions) => Promisable<TypeA[]>,
+  b: (options: GetStaticPathsOptions) => Promisable<TypeB[]>
+) {
+  return async function (options: GetStaticPathsOptions) {
+    const pathsA = await a(options);
+    const pathsB = await b(options);
+    const paths: GetStaticPathsResult = [];
+
+    for (const pathA of pathsA) {
+      for (const pathB of pathsB) {
+        paths.push({
+          params: { ...pathA.params, ...pathB.params },
+          props: { ...pathA.props, ...pathB.props },
+        });
+      }
+    }
+
+    return paths as (TypeA & TypeB)[];
+  };
+}
@@ -0,0 +1,205 @@
+import { StandardSinglePrice } from "@protos/blitz_static_standard_single_price";
+import { PenetrationGroup } from "@protos/blitz_static_tank_penetration_group";
+import {
+  PenetrationGroupUpgrade,
+  PitchLimit,
+  ShellUpgrade,
+  ShellUpgrageSingleChange,
+  StageParameters,
+  TankAttributeChange,
+  TankAttributeChange_AttributeName,
+  TankAttributeChange_Modifier,
+  VisualChanges,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+
+function patch(stage0: StageParameters, stage1: StageParameters) {
+  if (stage1.stage_number !== ++stage0.stage_number) {
+    throw new Error("Change stage number must be 1 greater than base");
+  }
+
+  for (const attribute1 of stage1.attributes) {
+    let value1: number;
+
+    switch (attribute1.modifier) {
+      case TankAttributeChange_Modifier.MODIFIER_OVERRIDE:
+        value1 = attribute1.value;
+        break;
+
+      case TankAttributeChange_Modifier.MODIFIER_MULTIPLY:
+      case TankAttributeChange_Modifier.MODIFIER_ADD:
+        const attribute0 = stage0.attributes.find(
+          (attribute0) =>
+            attribute0.attribute_name === attribute1.attribute_name
+        );
+
+        if (!attribute0) {
+          throw new Error(
+            `Missing attribute ${
+              TankAttributeChange_AttributeName[attribute1.attribute_name]
+            } (${attribute1.attribute_name}) to modify`
+          );
+        }
+
+      case TankAttributeChange_Modifier.MODIFIER_MULTIPLY: {
+        value1 = attribute0!.value! * attribute1.value;
+        break;
+      }
+
+      case TankAttributeChange_Modifier.MODIFIER_ADD: {
+        value1 = attribute0!.value! + attribute1.value;
+        break;
+      }
+
+      default:
+        throw new Error(
+          `Unhandled modified ${
+            TankAttributeChange_Modifier[attribute1.modifier]
+          }`
+        );
+    }
+
+    const attribute0 = TankAttributeChange.create({
+      modifier: TankAttributeChange_Modifier.MODIFIER_OVERRIDE,
+      attribute_name: attribute1.attribute_name,
+      value: value1,
+    });
+    const index0 = stage0.attributes.findIndex(
+      (attribute) => attribute.attribute_name === attribute1.attribute_name
+    );
+
+    if (index0 === -1) {
+      stage0.attributes.push(attribute0);
+    } else {
+      stage0.attributes[index0] = attribute0;
+    }
+  }
+
+  for (const penetrationGroupUpgrade1 of stage1.penetration_groups_upgrades) {
+    const penetrationGroupUpgrade0 = stage0.penetration_groups_upgrades.find(
+      (group) => group.tank_part === penetrationGroupUpgrade1.tank_part
+    );
+
+    if (penetrationGroupUpgrade0) {
+      penetrationGroupUpgrade0.primary_armor = [
+        ...penetrationGroupUpgrade1.primary_armor,
+      ];
+
+      for (const penetrationGroup1 of penetrationGroupUpgrade1.penetration_groups) {
+        const penetrationGroup0 =
+          penetrationGroupUpgrade0.penetration_groups.find(
+            (baseGroup) => baseGroup.group_name === penetrationGroup1.group_name
+          );
+
+        if (penetrationGroup0) {
+          penetrationGroup0.common_data = penetrationGroup1.common_data;
+          penetrationGroup0.armor = penetrationGroup1.armor;
+        } else {
+          penetrationGroupUpgrade0.penetration_groups.push(
+            PenetrationGroup.create(penetrationGroup1)
+          );
+        }
+      }
+    } else {
+      stage0.penetration_groups_upgrades.push(
+        PenetrationGroupUpgrade.create(penetrationGroupUpgrade1)
+      );
+    }
+  }
+
+  if (stage1.modules_upgrades.length > 0) {
+    throw new Error("Modules upgrades not implemented");
+  }
+
+  for (const shellUpgrades1 of stage1.shells_upgrades) {
+    let shellUpgrades0 = stage0.shells_upgrades.find(
+      (baseShell) => baseShell.shell_id === shellUpgrades1.shell_id
+    );
+
+    if (shellUpgrades0) {
+      shellUpgrades0.shell_type = shellUpgrades1.shell_type;
+
+      for (const changedShellUpgrade of shellUpgrades1.changes) {
+        const shellUpgrade0 = shellUpgrades0.changes.find(
+          (baseShellUpgrade) =>
+            baseShellUpgrade.attribute_name ===
+            changedShellUpgrade.attribute_name
+        );
+
+        if (shellUpgrade0) {
+          shellUpgrade0.value = changedShellUpgrade.value;
+        } else {
+          shellUpgrades0.changes.push(
+            ShellUpgrageSingleChange.create(changedShellUpgrade)
+          );
+        }
+      }
+
+      shellUpgrades0.silver_price =
+        shellUpgrades1.silver_price === undefined
+          ? undefined
+          : StandardSinglePrice.create(shellUpgrades1.silver_price);
+    } else {
+      stage0.shells_upgrades.push(ShellUpgrade.create(shellUpgrades1));
+    }
+  }
+
+  if (stage1.pump_reload_times.length > 0) {
+    stage0.pump_reload_times = [...stage1.pump_reload_times];
+  }
+
+  if (stage1.pitch_limits_up.length > 0 && stage0.pitch_limits_up.length > 0) {
+    throw new Error("Pitch limits not implemented");
+  }
+
+  for (const pitchLimitUp1 of stage1.pitch_limits_up) {
+    stage0.pitch_limits_up.push(PitchLimit.create(pitchLimitUp1));
+  }
+
+  if (
+    stage1.pitch_limits_down.length > 0 &&
+    stage0.pitch_limits_down.length > 0
+  ) {
+    throw new Error("Pitch limits not implemented");
+  }
+
+  for (const pitchLimitDown1 of stage1.pitch_limits_down) {
+    stage0.pitch_limits_down.push(PitchLimit.create(pitchLimitDown1));
+  }
+
+  for (const visualChange1 of stage1.visual_changes) {
+    const visualChange0 = stage0.visual_changes.find(
+      (baseVisualChange) =>
+        baseVisualChange.tank_part === visualChange1.tank_part
+    );
+
+    if (visualChange0) {
+      visualChange0.name = visualChange1.name;
+    } else {
+      stage0.visual_changes.push(VisualChanges.create(visualChange1));
+    }
+  }
+}
+
+export function aggregateStageParameters(
+  base: StageParameters,
+  stages: StageParameters[]
+) {
+  const stage0 = StageParameters.create({ ...base, stage_number: 0 });
+
+  /**
+   * Bug in Reforged: base stats are stage 1, so is the first upgrade. Manually
+   * setting it to stage 0 below and if the bug's been fixed, throw an error
+   * in dev mode to allow clean up in the future. Also, update the initial
+   * stage number to -1.
+   */
+
+  if (base.stage_number === 0 && import.meta.env.DEV) {
+    throw new Error(
+      "Base stats are now stage 0. In-game bug fixed, please remove hack."
+    );
+  }
+
+  stages.forEach((stage) => patch(stage0, stage));
+
+  return stage0;
+}
@@ -0,0 +1,100 @@
+import { normalizeAngleDeg } from "@blitzkit/core";
+import type { PitchLimit } from "@protos/blitz_static_tank_upgrade_single_stage";
+import { clamp, degToRad, lerp, radToDeg } from "three/src/math/MathUtils.js";
+
+export function applyPitchYawLimits(
+  givenPitch: number,
+  givenYaw: number,
+  pitchLimitsUp: PitchLimit[],
+  pitchLimitsDown: PitchLimit[]
+) {
+  const givenYawDeg = normalizeAngleDeg(radToDeg(givenYaw));
+  const givenPitchDeg = normalizeAngleDeg(radToDeg(givenPitch));
+
+  const yawDeg = givenYawDeg;
+  const yaw = degToRad(givenYawDeg);
+
+  let leftLimitUp: PitchLimit | undefined;
+  let rightLimitUp: PitchLimit | undefined;
+  let leftLimitDown: PitchLimit | undefined;
+  let rightLimitDown: PitchLimit | undefined;
+
+  for (const limit of pitchLimitsUp) {
+    const normalizedAngle = normalizeAngleDeg(limit.angle);
+
+    if (normalizedAngle <= yawDeg) {
+      if (
+        !leftLimitUp ||
+        normalizeAngleDeg(yawDeg - normalizedAngle) <
+          normalizeAngleDeg(yawDeg - leftLimitUp.angle)
+      ) {
+        leftLimitUp = limit;
+      }
+    }
+
+    if (normalizedAngle >= yawDeg) {
+      if (
+        !rightLimitUp ||
+        normalizeAngleDeg(normalizedAngle - yawDeg) <
+          normalizeAngleDeg(rightLimitUp.angle - yawDeg)
+      ) {
+        rightLimitUp = limit;
+      }
+    }
+  }
+
+  for (const limit of pitchLimitsDown) {
+    const normalizedAngle = normalizeAngleDeg(limit.angle);
+
+    if (normalizedAngle <= yawDeg) {
+      if (
+        !leftLimitDown ||
+        normalizeAngleDeg(yawDeg - normalizedAngle) <
+          normalizeAngleDeg(yawDeg - leftLimitDown.angle)
+      ) {
+        leftLimitDown = limit;
+      }
+    }
+
+    if (normalizedAngle >= yawDeg) {
+      if (
+        !rightLimitDown ||
+        normalizeAngleDeg(normalizedAngle - yawDeg) <
+          normalizeAngleDeg(rightLimitDown.angle - yawDeg)
+      ) {
+        rightLimitDown = limit;
+      }
+    }
+  }
+
+  if (!leftLimitUp || !rightLimitUp || !leftLimitDown || !rightLimitDown) {
+    throw new Error("Pitch limits not found");
+  }
+
+  const spanUp = rightLimitUp.angle - leftLimitUp.angle;
+  const spanDown = rightLimitDown.angle - leftLimitDown.angle;
+
+  let limitUp: number;
+  let limitDown: number;
+
+  if (spanUp === 0) {
+    limitUp = leftLimitUp.limit;
+  } else {
+    const delta = givenYawDeg - leftLimitUp.angle;
+    const t = delta / spanUp;
+    limitUp = lerp(leftLimitUp.limit, rightLimitUp.limit, t);
+  }
+
+  if (spanDown === 0) {
+    limitDown = leftLimitDown.limit;
+  } else {
+    const delta = givenYawDeg - leftLimitDown.angle;
+    const t = delta / spanDown;
+    limitDown = lerp(leftLimitDown.limit, rightLimitDown.limit, t);
+  }
+
+  const pitchDeg = clamp(givenPitchDeg, -limitDown, limitUp);
+  const pitch = degToRad(pitchDeg);
+
+  return { pitch, yaw };
+}
@@ -0,0 +1,423 @@
+import { TankClass } from "@blitzkit/core";
+import {
+  ShellUpgrageSingleChange_AttributeName,
+  StageParameters,
+  TankAttributeChange_AttributeName,
+} from "@protos/blitz_static_tank_upgrade_single_stage";
+import { radToDeg } from "three/src/math/MathUtils.js";
+import type { Tank } from "../../protos/tank";
+import { applyPitchYawLimits } from "./applyPitchYawLimits";
+import { TerrainHardness, type TankState } from "./tankState";
+
+export type CharacteristicOutput = number | number[] | string | null;
+
+type Characteristic = (helpers: {
+  characteristic: (name: CharacteristicName) => CharacteristicOutput;
+  attribute: (name: TankAttributeChange_AttributeName) => number;
+  attributeSafe: (name: TankAttributeChange_AttributeName) => number | null;
+  shell: (name: ShellUpgrageSingleChange_AttributeName) => number;
+  shellSafe: (name: ShellUpgrageSingleChange_AttributeName) => number | null;
+  state: TankState;
+  tank: Tank;
+  parameters: StageParameters;
+  id: string;
+}) => CharacteristicOutput;
+
+export type CharacteristicName = keyof typeof characteristics;
+
+export enum GunType {
+  Regular,
+  AutoLoader,
+  AutoReloader,
+}
+
+export const characteristics = {
+  gun_type({ attributeSafe, attribute }) {
+    const isPump =
+      attributeSafe(TankAttributeChange_AttributeName.ATTRIBUTE_NAME_IS_PUMP) ??
+      0;
+
+    if (isPump === 1) return GunType.AutoReloader;
+
+    const clipSize = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+    );
+
+    if (clipSize === 1) return GunType.Regular;
+
+    return GunType.AutoLoader;
+  },
+
+  clip_size({ attribute, characteristic }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.Regular) return null;
+
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_SIZE
+    );
+  },
+
+  damage({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_ARMOR_DAMAGE
+    );
+  },
+
+  module_damage({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MODULE_DAMAGE
+    );
+  },
+
+  penetration({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_PIERCING_POWER
+    );
+  },
+
+  reload({ characteristic, attribute }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.AutoReloader) return null;
+
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_RELOAD_TIME
+    );
+  },
+
+  reloads({ characteristic, parameters }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType !== GunType.AutoReloader) return null;
+
+    return parameters.pump_reload_times;
+  },
+
+  intra_clip({ characteristic, attribute }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType === GunType.Regular) return null;
+
+    const clipRate = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CLIP_RATE
+    );
+
+    return 60 / clipRate;
+  },
+
+  optimal_shell({ characteristic }) {
+    const gunType = characteristic("gun_type")!;
+
+    if (gunType !== GunType.AutoReloader) return null;
+
+    const intraClip = characteristic("intra_clip") as number;
+    const reloads = characteristic("reloads") as number[];
+    let optimal: number | undefined = undefined;
+
+    for (let index = 0; index < reloads.length; index++) {
+      const reload = reloads[index] + (index > 0 ? intraClip : 0);
+      if (optimal === undefined || reload < reloads[optimal]) optimal = index;
+    }
+
+    if (optimal === undefined) {
+      throw new Error("Unable to find optimal shell");
+    }
+
+    return optimal;
+  },
+
+  dpm({ characteristic }) {
+    let dps: number;
+    const gunType = characteristic("gun_type")!;
+    const damage = characteristic("damage") as number;
+
+    switch (gunType) {
+      case GunType.Regular: {
+        const reload = characteristic("reload") as number;
+
+        dps = damage / reload;
+        break;
+      }
+
+      case GunType.AutoLoader: {
+        const reload = characteristic("reload") as number;
+        const intraClip = characteristic("intra_clip") as number;
+        const clipSize = characteristic("clip_size") as number;
+
+        dps = (damage * clipSize) / (reload + (clipSize - 1) * intraClip);
+        break;
+      }
+
+      case GunType.AutoReloader: {
+        const reloads = characteristic("reloads") as number[];
+        const optimalShell = characteristic("optimal_shell") as number;
+        const intraClip = characteristic("intra_clip") as number;
+        const reload =
+          reloads[optimalShell] + (optimalShell > 0 ? intraClip : 0);
+
+        dps = damage / reload;
+        break;
+      }
+
+      default:
+        throw new Error("Unknown gun type");
+    }
+
+    return 60 * dps;
+  },
+
+  caliber({ shell }) {
+    return shell(ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_CALIBER);
+  },
+
+  normalization({ shellSafe }) {
+    return shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_NORMALIZATION
+    );
+  },
+
+  ricochet({ shell }) {
+    return shell(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_RICOCHET_ANGLE
+    );
+  },
+
+  shell_velocity({ shell }) {
+    return (
+      shell(ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_SPEED) / 100
+    );
+  },
+
+  shell_range({ shellSafe }) {
+    const maxDistance = shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_DISTANCE
+    );
+    return maxDistance === null ? Infinity : maxDistance / 100;
+  },
+
+  shell_capacity({ shellSafe }) {
+    const count = shellSafe(
+      ShellUpgrageSingleChange_AttributeName.ATTRIBUTE_NAME_MAX_COUNT
+    );
+    return count === -1 || count === null ? Infinity : count;
+  },
+
+  aim_time({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_AIMING_TIME
+    );
+  },
+
+  speed_forward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FORWARD_MAX_SPEED
+    );
+  },
+
+  speed_backward({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_BACKWARD_MAX_SPEED
+    );
+  },
+
+  dispersion({ attribute, characteristic, state }) {
+    const base = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_ANGLE
+    );
+    const movement = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_MOVEMENT
+    );
+    const vehicleRotation = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_VEHICLE_ROTATION
+    );
+    const turretRotation = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_TURRET_ROTATION
+    );
+    const afterShot = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_AFTER_SHOT
+    );
+    const gunDamaged = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_DISPERSION_FACTOR_WHILE_GUN_DAMAGED
+    );
+    const maxSpeed = characteristic("speed_forward") as number;
+
+    return (
+      (state.isGunDamaged ? gunDamaged : 1) *
+      (base +
+        (state.speed / maxSpeed) * movement +
+        (state.isHullTraversing ? vehicleRotation : 0) +
+        (state.isTurretTraversing ? turretRotation : 0) +
+        (state.isShooting ? afterShot : 0))
+    );
+  },
+
+  gun_depression({ parameters }) {
+    return -radToDeg(
+      applyPitchYawLimits(
+        -Math.PI / 2,
+        0,
+        parameters.pitch_limits_up,
+        parameters.pitch_limits_down
+      ).pitch
+    );
+  },
+
+  gun_elevation({ parameters }) {
+    return radToDeg(
+      applyPitchYawLimits(
+        Math.PI / 2,
+        0,
+        parameters.pitch_limits_up,
+        parameters.pitch_limits_down
+      ).pitch
+    );
+  },
+
+  engine_power({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_ENGINE_POWER
+    );
+  },
+
+  weight({ attribute }) {
+    return (
+      attribute(TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MASS) / 1000
+    );
+  },
+
+  terrain_coefficient({ attribute, state }) {
+    let name: TankAttributeChange_AttributeName;
+
+    switch (state.terrainHardness) {
+      case TerrainHardness.Soft:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_SOFT;
+        break;
+      case TerrainHardness.Medium:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_MEDIUM;
+        break;
+      case TerrainHardness.Hard:
+        name =
+          TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TERRAIN_RESISTANCE_HARD;
+        break;
+    }
+
+    return attribute(name);
+  },
+
+  power_to_weight({ characteristic }) {
+    const power = characteristic("engine_power") as number;
+    const weight = characteristic("weight") as number;
+    const terrainCoefficient = characteristic("terrain_coefficient") as number;
+    return power / weight / terrainCoefficient;
+  },
+
+  turret_traverse_speed({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_TURRET_ROTATION_SPEED
+    );
+  },
+
+  hull_traverse_speed() {
+    return -Infinity;
+  },
+
+  health({ attribute }) {
+    return attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_MAX_HEALTH
+    );
+  },
+
+  fire_chance({ attribute }) {
+    return (
+      attribute(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_FIRE_START_CHANCE
+      ) * 100
+    );
+  },
+
+  view_range({ attribute }) {
+    return (
+      attribute(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CIRCULAR_VISION_RADIUS
+      ) / 100
+    );
+  },
+
+  class({ tank }) {
+    return tank.tank!.tank_class;
+  },
+
+  camouflage({ attribute, characteristic, attributeSafe, state }) {
+    const tankClass = characteristic("class");
+    const base = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_STILL
+    );
+    const moving =
+      tankClass === TankClass.LIGHT
+        ? 0
+        : attribute(
+            TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_MOVING
+          );
+    const shooting = attribute(
+      TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FACTOR_AT_SHOT
+    );
+
+    if (
+      attributeSafe(
+        TankAttributeChange_AttributeName.ATTRIBUTE_NAME_CONCEALMENT_FIRE_PENALTY
+      )
+    ) {
+      throw new Error("Fire penalty implemented! Code it in!!");
+    }
+
+    return (
+      100 *
+      base *
+      (1 + moving * state.speed) *
+      (state.isShooting ? shooting : 1)
+    );
+  },
+
+  height() {
+    return -Infinity;
+  },
+
+  length() {
+    return -Infinity;
+  },
+
+  volume() {
+    return -Infinity;
+  },
+
+  nation({ tank }) {
+    return tank.tank!.nation;
+  },
+
+  name({ tank }) {
+    return tank.tank!.name!.value;
+  },
+
+  tier({ tank }) {
+    return tank.tank!.tier_catalog_id;
+  },
+
+  type({ tank }) {
+    return tank.tank!.tank_type;
+  },
+
+  id({ id }) {
+    return id;
+  },
+
+  slug({ tank }) {
+    return tank.slug;
+  },
+
+  compensation({ tank }) {
+    return tank.compensation!.compensation?.currency_reward?.amount ?? null;
+  },
+} satisfies Record<string, Characteristic>;
@@ -0,0 +1,138 @@
+import {
+  Nation,
+  TankClass,
+  TankType,
+} from "@protos/blitz_static_tank_component";
+import {
+  GunType,
+  type CharacteristicName,
+  type CharacteristicOutput,
+} from "./characteristics";
+
+export enum BetterDirection {
+  Higher,
+  Lower,
+}
+
+export interface CharacteristicRenderConfig {
+  name: CharacteristicName;
+  decimals?: number;
+  units?: string;
+  render?: (output: CharacteristicOutput) => string;
+}
+
+type CharacteristicsOrder = {
+  group: string;
+  order: (
+    | CharacteristicRenderConfig
+    | {
+        toy: string;
+      }
+  )[];
+}[];
+
+export const characteristicsOrder: CharacteristicsOrder = [
+  {
+    group: "meta",
+    order: [
+      { name: "name" },
+      { name: "tier" },
+      {
+        name: "nation",
+        render(output) {
+          return Nation[output as Nation];
+        },
+      },
+      {
+        name: "class",
+        render(output) {
+          return TankClass[output as TankClass];
+        },
+      },
+      {
+        name: "type",
+        render(output) {
+          return TankType[output as TankType];
+        },
+      },
+      { name: "compensation" },
+      { name: "id" },
+      { name: "slug" },
+    ],
+  },
+  {
+    group: "firepower",
+    order: [
+      {
+        name: "gun_type",
+        render(output) {
+          return GunType[output as GunType];
+        },
+      },
+      { name: "dpm", decimals: 0, units: "hp_min" },
+      { name: "reload", decimals: 2, units: "s" },
+      { name: "reloads", decimals: 2, units: "s" },
+      { name: "damage", units: "hp" },
+      { name: "module_damage", units: "hp" },
+      { name: "penetration", units: "mm" },
+      { name: "clip_size" },
+      { name: "intra_clip", decimals: 2, units: "s" },
+
+      { toy: "reload" },
+
+      { name: "caliber", units: "mm" },
+      { name: "normalization", units: "deg" },
+      { name: "ricochet", units: "deg" },
+
+      { toy: "ricochet" },
+
+      { name: "shell_velocity", units: "m_s" },
+      { name: "shell_range", units: "m" },
+      { name: "shell_capacity" },
+
+      { name: "aim_time", decimals: 1, units: "s" },
+
+      { toy: "aim_time" },
+
+      { name: "dispersion", decimals: 3, units: "m" },
+
+      { name: "gun_depression", decimals: 0, units: "deg" },
+      { name: "gun_elevation", decimals: 0, units: "deg" },
+
+      { toy: "flexibility" },
+    ],
+  },
+  {
+    group: "maneuverability",
+    order: [
+      { name: "speed_forward", units: "km_h" },
+      { name: "speed_backward", units: "km_h" },
+
+      { name: "engine_power", units: "bhp" },
+      { name: "weight", decimals: 1, units: "t" },
+
+      { name: "terrain_coefficient" },
+      { name: "power_to_weight", decimals: 1, units: "bhp_t" },
+      { name: "hull_traverse_speed", units: "deg_s" },
+      { name: "turret_traverse_speed", units: "deg_s" },
+
+      { toy: "traverse" },
+    ],
+  },
+  {
+    group: "survivability",
+    order: [
+      { name: "health", units: "hp" },
+      { name: "fire_chance", units: "%" },
+      { name: "view_range", units: "m" },
+
+      { toy: "view_range" },
+
+      { name: "camouflage", decimals: 0, units: "%" },
+
+      { name: "height", units: "m" },
+      { name: "length", units: "m" },
+      { name: "volume", units: "m" },
+    ],
+  },
+];
Author	SHA1	Message	Date
TrèsAbhi	dba56f8946	feat: blitz provider	2026-01-27 08:59:34 -06:00
TrèsAbhi	c1f765d5f7	feat: setup interop	2026-01-25 21:27:24 -06:00
TrèsAbhi	7f5b5b614f	feat: setup game interface	2026-01-25 19:32:30 -06:00
TrèsAbhi	5cd149b2b9	feat: higher constrast low contrast	2026-01-25 19:21:07 -06:00
TrèsAbhi	0bc2d0aaf6	feat: home page tools	2026-01-25 16:13:36 -06:00
TrèsAbhi	1dc9a341d1	fix: inconsistentcies	2026-01-25 15:57:44 -06:00
TrèsAbhi	2ad1e71176	feat: revert navbar	2026-01-25 15:55:30 -06:00
TrèsAbhi	ca6973f529	feat: update protos to pre-ut4	2026-01-23 10:25:45 -06:00
TrèsAbhi	323d624ec7	feat: idk bro	2026-01-18 18:38:26 -06:00
TrèsAbhi	49f84db473	feat: recently viewed	2026-01-18 17:55:38 -06:00
TrèsAbhi	7399c402af	feat: ahhhhhhhhhh	2026-01-18 15:14:26 -06:00
TrèsAbhi	cbfcb29691	feat: new navbar	2026-01-18 14:51:55 -06:00
TrèsAbhi	ae616fbaf3	feat: cleaner popup	2026-01-18 14:12:20 -06:00
TrèsAbhi	35275d4aa8	fix: use animation	2026-01-17 13:54:19 -06:00
TrèsAbhi	dda63830ec	feat: glow	2026-01-17 13:50:53 -06:00
TrèsAbhi	79b4f05809	feat: start of popup	2026-01-17 13:36:17 -06:00
TrèsAbhi	b50c47b744	feat: skeleton	2026-01-16 20:37:11 -06:00
TrèsAbhi	f7c6fdd861	fix: onChange	2026-01-16 20:14:47 -06:00
TrèsAbhi	47b583821e	fix: hydration	2026-01-16 20:13:56 -06:00
TrèsAbhi	369ac113fa	feat: custom loader	2026-01-16 19:28:10 -06:00
TrèsAbhi	fc4d8b5ad0	fix: some cleanup	2026-01-16 13:17:17 -06:00
TrèsAbhi	72e1cf7d6a	feat: postcss	2026-01-16 13:11:23 -06:00
TrèsAbhi	dd96556e2a	Change Section import to named import	2026-01-15 14:43:34 -06:00
TrèsAbhi	a7ee51526a	fix: reset count on change	2026-01-15 14:36:52 -06:00
TrèsAbhi	610b59f4c6	feat: search functionality	2026-01-15 14:30:40 -06:00
TrèsAbhi	63ce327458	feat: avatars search bar ui	2026-01-15 14:13:34 -06:00
TrèsAbhi	6ec7a50320	feat: lint fixes	2026-01-15 13:58:34 -06:00
TrèsAbhi	60a29ef2e7	feat: fancier navbar	2026-01-15 13:48:37 -06:00
TrèsAbhi	52c3a0abe0	feat: number indexed	2026-01-15 12:58:05 -06:00
TrèsAbhi	5bbe5c2720	feat: count badge	2026-01-15 12:55:18 -06:00
TrèsAbhi	c0c6a21e43	feat: groups	2026-01-14 13:58:53 -06:00
TrèsAbhi	a7f93698a6	feat: tool banners	2026-01-14 13:30:12 -06:00
TrèsAbhi	1a18058228	feat: split hooks	2026-01-14 12:41:51 -06:00
TrèsAbhi	67024daa25	fix: some cleanup	2026-01-14 12:37:42 -06:00
TrèsAbhi	de6137d1a5	feat: incremtal loading	2026-01-14 12:34:28 -06:00
TrèsAbhi	11e87bd519	feat: sort	2026-01-14 11:56:44 -06:00
TrèsAbhi	3b4e089756	fix: store trimmed only in cache	2026-01-14 11:48:55 -06:00
TrèsAbhi	4a6f5845f9	feat: shadows for outlines	2026-01-13 20:49:40 -06:00
TrèsAbhi	e9684ce033	feat: navbar rewrite	2026-01-13 20:33:14 -06:00
TrèsAbhi	27abf1b0de	feat: string hooks	2026-01-13 20:15:55 -06:00
TrèsAbhi	f5f3f70e35	feat: client side game strings	2026-01-13 13:30:09 -06:00
TrèsAbhi	2d282a3261	feat: game strings api	2026-01-13 13:18:55 -06:00
TrèsAbhi	a2d0d2d8c0	feat: card styles	2026-01-13 12:46:34 -06:00
TrèsAbhi	ea412086d4	feat: start of avatars	2026-01-12 14:13:21 -06:00
TrèsAbhi	455679a981	feat: some footer	2026-01-12 14:00:13 -06:00
TrèsAbhi	a21bc6174d	feat: some navbar	2026-01-12 13:46:58 -06:00
TrèsAbhi	fae1a89402	feat: some more apis	2026-01-12 13:20:08 -06:00
TrèsAbhi	5a1a0c59f1	feat: profile and backgroud apis	2026-01-12 13:12:11 -06:00
TrèsAbhi	c98271f783	feat: darker input	2026-01-12 12:48:47 -06:00
TrèsAbhi	033660c2d9	fix: webp	2026-01-11 13:48:27 -06:00
TrèsAbhi	1a639c51e1	feat: update backgrounds	2026-01-11 13:46:54 -06:00
TrèsAbhi	1366579dd1	feat: some unification	2026-01-11 13:40:01 -06:00
TrèsAbhi	f5ed2c2c40	feat: concurrency	2026-01-11 11:52:28 -06:00
TrèsAbhi	1598de9f5f	feat: imageProxy	2026-01-11 11:51:02 -06:00
TrèsAbhi	6f47f5cc99	feat: bumps	2026-01-10 13:49:11 -06:00
TrèsAbhi	1117dcb935	feat: links	2026-01-10 13:19:59 -06:00
TrèsAbhi	01a58f9aa8	feat: finalize tool cards	2026-01-10 13:07:59 -06:00
TrèsAbhi	9096644d51	feat: cards	2026-01-10 12:43:39 -06:00
TrèsAbhi	d42fc0e3f6	Merge branch 'main' into ue	2026-01-09 14:06:57 -06:00
TrèsAbhi	17d1526b6f	Merge branch 'main' into ue	2026-01-09 14:05:43 -06:00
TrèsAbhi	db8ac195d4	feat: start of cards	2026-01-09 14:04:59 -06:00
TrèsAbhi	c5f5f69fd6	feat: more home page	2026-01-09 13:57:28 -06:00
TrèsAbhi	44203223fd	feat: server side strings	2026-01-09 13:38:00 -06:00
TrèsAbhi	bdabadcd49	feat: some more styles	2026-01-09 13:02:58 -06:00
TrèsAbhi	220e4388d4	feat: start on header	2026-01-08 20:39:44 -06:00
TrèsAbhi	51b2d1ce86	feat: cleaner output	2026-01-08 20:17:11 -06:00
TrèsAbhi	f3c1825c57	fix: complete protos implementation	2026-01-08 20:16:01 -06:00
TrèsAbhi	359dfcd102	feat: move some	2026-01-08 20:06:14 -06:00
TrèsAbhi	649cdd893f	feat: styles	2026-01-08 20:02:24 -06:00
TrèsAbhi	0cb974acf5	feat: scales	2026-01-07 20:36:55 -06:00
TrèsAbhi	9bca5dccc7	feat: start of new protos	2026-01-04 15:35:58 -06:00
TrèsAbhi	d707f1cc5d	Merge branch 'main' into ue	2026-01-04 15:23:43 -06:00
TrèsAbhi	4ed4395535	feat: start of strings	2026-01-03 13:29:15 -06:00
TrèsAbhi	0209d48475	feat: backgrounds	2026-01-02 20:17:24 -06:00
TrèsAbhi	437bee4a85	feat: proxy avatars	2026-01-02 20:04:19 -06:00
TrèsAbhi	4b8e73fa57	feat: cache	2026-01-02 14:26:05 -06:00
TrèsAbhi	b96f925d9a	feat: avatars	2026-01-02 14:20:29 -06:00
TrèsAbhi	1551dc50fd	Merge branch 'main' into ue	2026-01-02 12:51:20 -06:00
TrèsAbhi	daf4cef61c	feat: mode apis	2025-12-28 12:20:45 -06:00
TrèsAbhi	496e127f64	Merge branch 'main' into ue	2025-12-28 12:11:40 -06:00
TrèsAbhi	da1af66c77	feat: start of mechanics	2025-12-26 20:07:22 -06:00
TrèsAbhi	01409985a2	feat: list	2025-12-26 19:43:44 -06:00
TrèsAbhi	a86ac0619a	feat: stop working on ranking since a lot of tanks are broken	2025-12-26 19:37:52 -06:00
TrèsAbhi	385d165512	feat: optimize tankList	2025-12-26 19:21:14 -06:00
TrèsAbhi	fcfc97b964	feat: start of all tanks	2025-12-26 14:59:09 -06:00
TrèsAbhi	53d05e73a6	feat: some docs	2025-12-26 14:21:04 -06:00
TrèsAbhi	40a1eb861d	feat: meta section	2025-12-26 14:14:29 -06:00
TrèsAbhi	1d3cb95b89	fix: assert wotb server	2025-12-26 11:33:04 -06:00
TrèsAbhi	010303a818	feat: camo	2025-12-24 20:30:19 -06:00
TrèsAbhi	7281b9fed0	feat: power_to_weight	2025-12-24 20:10:06 -06:00
TrèsAbhi	c5785c7ae6	feat: more controllers	2025-12-24 19:57:26 -06:00
TrèsAbhi	698731cb9a	feat: generalize render chars	2025-12-24 19:48:01 -06:00
TrèsAbhi	99bae8f2c5	fix: array rendering	2025-12-24 19:39:26 -06:00
TrèsAbhi	5034ec1aa0	feat: terrain hardness	2025-12-24 19:37:21 -06:00
TrèsAbhi	be821c1f8b	Merge branch 'ue' of https://github.com/blitzkit/blitzkit into ue	2025-12-24 19:33:04 -06:00
TrèsAbhi	a364b79a9b	feat: autoreloader dom	2025-12-24 19:33:01 -06:00
TrèsAbhi	0aa6e1e79a	Update deployment condition for GitHub Pages	2025-12-20 20:03:27 -06:00
TrèsAbhi	d2a6379131	feat: abstracted meta	2025-12-20 19:10:11 -06:00
TrèsAbhi	07ce61d19f	fix: depression	2025-12-20 19:05:42 -06:00
TrèsAbhi	ad9f2d8609	feat: start of pitch yaw limits	2025-12-20 19:03:57 -06:00
TrèsAbhi	57702d8a43	fix: repo	2025-12-20 18:10:24 -06:00
TrèsAbhi	9a30af3818	fix: proper pitch limits	2025-12-20 10:26:25 -06:00
TrèsAbhi	23751fbdf3	feat: dynamic dispersion	2025-12-20 10:15:23 -06:00
TrèsAbhi	db6d181f78	feat: use max stage	2025-12-20 09:59:26 -06:00
TrèsAbhi	56ca4dcc61	feat: more accents	2025-12-19 22:23:03 -06:00
TrèsAbhi	d08b537721	feat: some styling	2025-12-19 21:25:55 -06:00
TrèsAbhi	c1a2edb489	feat: baselayout	2025-12-19 17:55:26 -06:00
TrèsAbhi	164b7fa454	feat: api renderer	2025-12-19 17:50:59 -06:00
TrèsAbhi	428483cf4c	fix: disable minifySyntax	2025-12-19 16:14:36 -06:00
TrèsAbhi	89f02eb399	minifySyntax	2025-12-19 16:11:26 -06:00
TrèsAbhi	4ce127516c	minifyWhitespace	2025-12-19 16:09:27 -06:00
TrèsAbhi	6f4f487dfe	minifyIdentifiers	2025-12-19 16:07:34 -06:00
TrèsAbhi	57dd60e804	feat: no minify	2025-12-19 16:01:58 -06:00
TrèsAbhi	d24fd2250c	feat: deploy on ue	2025-12-19 15:53:30 -06:00
TrèsAbhi	e00bcdfc06	feat: latest node	2025-12-19 15:51:47 -06:00
TrèsAbhi	67dd204ee6	fix: typo	2025-12-19 15:48:07 -06:00
TrèsAbhi	e130583fa4	fix: build:catalogitemaccesssor	2025-12-19 15:46:40 -06:00
TrèsAbhi	6ad20a0fcf	feat: cron	2025-12-19 15:44:32 -06:00
TrèsAbhi	9fad644d7a	feat: workflow	2025-12-19 15:42:38 -06:00
TrèsAbhi	8cb523dd06	fix: remove pwa	2025-12-19 15:35:50 -06:00
TrèsAbhi	b50ee23a26	feat: re-install	2025-12-19 15:34:16 -06:00
TrèsAbhi	a973cf699b	fix: cleaner stage0 hack	2025-12-19 15:26:47 -06:00
TrèsAbhi	102abf49c4	fix: default isPump	2025-12-19 15:20:58 -06:00
TrèsAbhi	8929e503ea	fix: pump times	2025-12-19 15:17:45 -06:00
TrèsAbhi	a2a794eb74	fix: use order instead of group	2025-12-19 15:11:33 -06:00
TrèsAbhi	2e95f5dd95	fix: unit conversion	2025-12-19 15:09:46 -06:00
TrèsAbhi	23a42230cb	feat: units	2025-12-19 15:04:35 -06:00
TrèsAbhi	e66daed7ae	feat: dpm	2025-12-19 14:51:18 -06:00
TrèsAbhi	f2d0f68f07	feat: primary_armor	2025-12-19 14:34:17 -06:00
TrèsAbhi	be4af0bf84	feat: implement some	2025-12-18 21:29:10 -06:00
TrèsAbhi	15172e8b33	fix: fetch correct stages	2025-12-18 17:00:06 -06:00
TrèsAbhi	c6b7918525	feat: shells	2025-12-18 16:45:02 -06:00
TrèsAbhi	4f1c4421e5	feat: some more	2025-12-18 16:29:13 -06:00
TrèsAbhi	7b830f5a71	feat: start of more attrs	2025-12-18 16:12:01 -06:00
TrèsAbhi	6ce1135835	feat: rename a bit	2025-12-18 15:30:18 -06:00
TrèsAbhi	66eaaef6de	feat: implement shell attr	2025-12-18 15:07:04 -06:00
TrèsAbhi	48fbf59036	feat: override common data	2025-12-18 13:20:35 -06:00
TrèsAbhi	0e0f4fbe9f	fix: find att0 correctly	2025-12-18 13:16:20 -06:00
TrèsAbhi	6ba6e10108	feat: rename	2025-12-18 13:08:42 -06:00
TrèsAbhi	cf8fa4ffb4	feat: remaining stagers	2025-12-18 12:59:12 -06:00
TrèsAbhi	2b0180dce2	Merge branch 'main' into ue	2025-12-18 12:45:10 -06:00
TrèsAbhi	caee848a47	Merge branch 'main' into ue	2025-12-15 22:29:11 -06:00
TrèsAbhi	d01b7cf707	feat: shells	2025-12-14 22:00:45 -06:00
TrèsAbhi	8921f84c38	feat: verbose	2025-12-14 21:41:26 -06:00
TrèsAbhi	6830df01fa	penetration_groups_upgrades	2025-12-14 21:38:18 -06:00
TrèsAbhi	67da59ef41	feat: start of stages	2025-12-13 23:35:38 -06:00
TrèsAbhi	036cc9915d	feat: start of atts	2025-12-13 23:10:51 -06:00
TrèsAbhi	57b6ba19f0	feat: rename	2025-12-13 22:15:48 -06:00
TrèsAbhi	32b5593d07	feat: lenient strings	2025-12-13 13:16:42 -06:00
TrèsAbhi	3b757562d2	Merge branch 'main' into ue	2025-12-10 22:52:49 -06:00
TrèsAbhi	4c8c2d0868	feat: auto pick localization entity	2025-12-05 21:35:58 -06:00
TrèsAbhi	b2f266401f	Merge branch 'main' into ue	2025-12-05 21:23:39 -06:00
TrèsAbhi	5541eca23d	feat: start of derived statistics	2025-12-01 16:51:11 -06:00
TrèsAbhi	122d65840e	feat: aggregateAttributes	2025-12-01 13:09:55 -06:00
TrèsAbhi	ed4b72d85c	feat: upgrade stages	2025-11-30 22:26:13 -06:00
TrèsAbhi	4033e8618f	feat: useAwait	2025-11-30 22:12:46 -06:00
TrèsAbhi	42cada1811	feat: move and api	2025-11-30 21:06:17 -06:00
TrèsAbhi	ff7ed213c8	feat: complete	2025-11-30 21:01:53 -06:00
TrèsAbhi	a0367af06b	feat: start of stats	2025-11-30 20:54:36 -06:00
TrèsAbhi	58c2965c53	Merge branch 'main' into ue	2025-11-30 20:27:42 -06:00
TrèsAbhi	edae41409a	feat: tank data	2025-11-29 14:22:32 -06:00
TrèsAbhi	383d3a36ef	feat: load tank data	2025-11-28 14:21:26 -06:00
TrèsAbhi	6a958da390	feat: implement strings	2025-11-28 14:13:03 -06:00
TrèsAbhi	ef154f99d5	feat: start of scraping	2025-11-28 13:51:17 -06:00
TrèsAbhi	4a20102de3	feat: base work	2025-11-28 13:19:15 -06:00
TrèsAbhi	4e170f2917	feat: port minimal files	2025-11-28 13:03:33 -06:00
TrèsAbhi	a70d788f6b	feat: init ue website	2025-11-28 13:00:41 -06:00