fix: update errors

packages/i18n/src/unwrapper.ts

@@ -1,12 +1,12 @@
-import { I18nString } from '@blitzkit/core';
-import { DEFAULT_LOCALE } from './strings';
+import { I18nString } from "@blitzkit/core";
+import locales from "@blitzkit/i18n/locales.json";
 
-export function unwrapper(locale: string) {
+export function unwrapper(locale = locales.default) {
   return function (i18nString: I18nString) {
     if (locale in i18nString.locales) {
       return i18nString.locales[locale];
     }
 
-    return i18nString.locales[DEFAULT_LOCALE];
+    return i18nString.locales[locales.default];
   };
 }

packages/website/package.json

@@ -5,16 +5,19 @@
     "dev": "astro dev",
     "build": "astro build",
     "preview": "astro preview",
+    "lint": "astro check",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/react": "^4.4.0",
     "@radix-ui/colors": "^3.0.0",
+    "@react-three/fiber": "^9.3.0",
     "@types/react": "^19.1.14",
     "@types/react-dom": "^19.1.9",
     "@vite-pwa/astro": "^1.1.0",
     "astro": "^5.14.1",
     "astro-favicons": "^3.1.5",
+    "fuzzysort": "^3.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1"
   }

packages/website/src/components/Armor/components/ModelTankWrapper.tsx

@@ -1,7 +1,8 @@
-import type { GroupProps } from '@react-three/fiber';
-import { forwardRef } from 'react';
-import { Group } from 'three';
+import { forwardRef, type ComponentProps } from "react";
+import { Group } from "three";
 
-export const ModelTankWrapper = forwardRef<Group, GroupProps>((props, ref) => {
-  return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
-});
+export const ModelTankWrapper = forwardRef<Group, ComponentProps<"group">>(
+  (props, ref) => {
+    return <group rotation={[-Math.PI / 2, 0, 0]} ref={ref} {...props} />;
+  }
+);

packages/website/src/components/Armor/components/PrimaryArmorScene.tsx

@@ -1,19 +1,19 @@
-import { memo, useRef } from 'react';
-import { Group } from 'three';
-import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
-import { useArmor } from '../../../hooks/useArmor';
-import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../hooks/useTankTransform';
-import { Duel } from '../../../stores/duel';
-import { ModelTankWrapper } from './ModelTankWrapper';
-import { PrimaryArmorSceneComponent } from './PrimaryArmorSceneComponent';
+import { memo, useRef } from "react";
+import { Group } from "three";
+import { correctZYTuple } from "../../../core/blitz/correctZYTuple";
+import { nameToArmorId } from "../../../core/blitzkit/nameToArmorId";
+import { resolveArmor } from "../../../core/blitzkit/resolveThickness";
+import { useArmor } from "../../../hooks/useArmor";
+import { useTankModelDefinition } from "../../../hooks/useTankModelDefinition";
+import { useTankTransform } from "../../../hooks/useTankTransform";
+import { Duel } from "../../../stores/duel";
+import { ModelTankWrapper } from "./ModelTankWrapper";
+import { PrimaryArmorSceneComponent } from "./PrimaryArmorSceneComponent";
 
 export const PrimaryArmorScene = memo(() => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -28,7 +28,7 @@ export const PrimaryArmorScene = memo(() => {
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
   const isDynamicArmorActive = Duel.use((state) =>
-    state.protagonist.consumables.includes(73),
+    state.protagonist.consumables.includes(73)
   );
 
   useTankTransform(track, turret, turretContainer, gunContainer);
@@ -37,20 +37,20 @@ export const PrimaryArmorScene = memo(() => {
     <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
+          const isHull = node.name.startsWith("hull_");
           const isVisible = isHull;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             tankModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             spaced ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_01')) ||
-            (!isDynamicArmorActive && node.name.includes('state_00'))
+            (isDynamicArmorActive && node.name.includes("state_01")) ||
+            (!isDynamicArmorActive && node.name.includes("state_00"))
           )
             return null;
 
@@ -67,21 +67,21 @@ export const PrimaryArmorScene = memo(() => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, '0')}`,
+            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             turretModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             spaced ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_01')) ||
-            (!isDynamicArmorActive && node.name.includes('state_00'))
+            (isDynamicArmorActive && node.name.includes("state_01")) ||
+            (!isDynamicArmorActive && node.name.includes("state_00"))
           )
             return null;
 
@@ -101,21 +101,21 @@ export const PrimaryArmorScene = memo(() => {
         <group ref={gunContainer}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, '0')}`,
+              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`
             );
             const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
               gunModelDefinition.armor,
-              armorId,
+              armorId
             );
 
             if (
               !isVisible ||
               spaced ||
               thickness === undefined ||
-              (isDynamicArmorActive && node.name.includes('state_01')) ||
-              (!isDynamicArmorActive && node.name.includes('state_00'))
+              (isDynamicArmorActive && node.name.includes("state_01")) ||
+              (!isDynamicArmorActive && node.name.includes("state_00"))
             )
               return null;
 

packages/website/src/components/Armor/components/SpacedArmorScene.tsx

@@ -1,15 +1,15 @@
-import { memo, useRef } from 'react';
-import { Group, Plane, Scene, Vector3 } from 'three';
-import { correctZYTuple } from '../../../core/blitz/correctZYTuple';
-import { nameToArmorId } from '../../../core/blitzkit/nameToArmorId';
-import { resolveArmor } from '../../../core/blitzkit/resolveThickness';
-import { useArmor } from '../../../hooks/useArmor';
-import { useModel } from '../../../hooks/useModel';
-import { useTankModelDefinition } from '../../../hooks/useTankModelDefinition';
-import { useTankTransform } from '../../../hooks/useTankTransform';
-import { Duel } from '../../../stores/duel';
-import { ModelTankWrapper } from './ModelTankWrapper';
-import { SpacedArmorSceneComponent } from './SpacedArmorSceneComponent';
+import { memo, useRef } from "react";
+import { Group, Plane, Scene, Vector3 } from "three";
+import { correctZYTuple } from "../../../core/blitz/correctZYTuple";
+import { nameToArmorId } from "../../../core/blitzkit/nameToArmorId";
+import { resolveArmor } from "../../../core/blitzkit/resolveThickness";
+import { useArmor } from "../../../hooks/useArmor";
+import { useModel } from "../../../hooks/useModel";
+import { useTankModelDefinition } from "../../../hooks/useTankModelDefinition";
+import { useTankTransform } from "../../../hooks/useTankTransform";
+import { Duel } from "../../../stores/duel";
+import { ModelTankWrapper } from "./ModelTankWrapper";
+import { SpacedArmorSceneComponent } from "./SpacedArmorSceneComponent";
 
 export enum ArmorType {
   Primary,
@@ -23,8 +23,8 @@ interface SpacedArmorSceneProps {
 
 export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
@@ -45,7 +45,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       ? undefined
       : gunModelDefinition.mask + hullOrigin.y + turretOrigin.y + gunOrigin.y;
   const isDynamicArmorActive = Duel.use((state) =>
-    state.protagonist.consumables.includes(73),
+    state.protagonist.consumables.includes(73)
   );
 
   useTankTransform(track, turret, turretContainer, gunContainer);
@@ -54,19 +54,19 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
     <ModelTankWrapper ref={wrapper}>
       <group position={hullOrigin}>
         {armorNodes.map((node) => {
-          const isHull = node.name.startsWith('hull_');
+          const isHull = node.name.startsWith("hull_");
           const isVisible = isHull;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             tankModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           )
             return null;
 
@@ -83,8 +83,8 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       </group>
 
       {modelNodes.map((node) => {
-        const isWheel = node.name.startsWith('chassis_wheel_');
-        const isTrack = node.name.startsWith('chassis_track_');
+        const isWheel = node.name.startsWith("chassis_wheel_");
+        const isTrack = node.name.startsWith("chassis_track_");
         const isVisible = isWheel || isTrack;
 
         if (!isVisible) return null;
@@ -104,20 +104,20 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
       <group ref={turretContainer}>
         {armorNodes.map((node) => {
           const isCurrentTurret = node.name.startsWith(
-            `turret_${turretModelDefinition.model_id.toString().padStart(2, '0')}`,
+            `turret_${turretModelDefinition.model_id.toString().padStart(2, "0")}`
           );
           const isVisible = isCurrentTurret;
           const armorId = nameToArmorId(node.name);
           const { spaced, thickness } = resolveArmor(
             turretModelDefinition.armor,
-            armorId,
+            armorId
           );
 
           if (
             !isVisible ||
             thickness === undefined ||
-            (isDynamicArmorActive && node.name.includes('state_00')) ||
-            (!isDynamicArmorActive && node.name.includes('state_01'))
+            (isDynamicArmorActive && node.name.includes("state_00")) ||
+            (!isDynamicArmorActive && node.name.includes("state_01"))
           )
             return null;
 
@@ -139,20 +139,20 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
         <group ref={gunContainer}>
           {armorNodes.map((node) => {
             const isCurrentGun = node.name.startsWith(
-              `gun_${gunModelDefinition.model_id.toString().padStart(2, '0')}`,
+              `gun_${gunModelDefinition.model_id.toString().padStart(2, "0")}`
             );
             const isVisible = isCurrentGun;
             const armorId = nameToArmorId(node.name);
             const { spaced, thickness } = resolveArmor(
               gunModelDefinition.armor,
-              armorId,
+              armorId
             );
 
             if (
               !isVisible ||
               thickness === undefined ||
-              (isDynamicArmorActive && node.name.includes('state_00')) ||
-              (!isDynamicArmorActive && node.name.includes('state_01'))
+              (isDynamicArmorActive && node.name.includes("state_00")) ||
+              (!isDynamicArmorActive && node.name.includes("state_01"))
             )
               return null;
 
@@ -173,7 +173,7 @@ export const SpacedArmorScene = memo<SpacedArmorSceneProps>(({ scene }) => {
           {modelNodes.map((node) => {
             const gunString = `gun_${gunModelDefinition.model_id
               .toString()
-              .padStart(2, '0')}`;
+              .padStart(2, "0")}`;
             const isCurrentGun = gunModelDefinition.mask
               ? node.name.startsWith(gunString)
               : node.name === gunString;

packages/website/src/components/Armor/components/StaticArmor.tsx

@@ -28,8 +28,8 @@ export interface ThicknessRange {
 
 export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const wrapper = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tank = Duel.use((state) => state.protagonist.tank);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);

packages/website/src/components/Armor/components/StaticArmorSceneComponent.tsx

@@ -1,8 +1,8 @@
 import { I_HAT, J_HAT } from "@blitzkit/core";
-import { type MeshProps, useThree } from "@react-three/fiber";
+import { useThree } from "@react-three/fiber";
 import { clamp } from "lodash-es";
 import type { QuicklimeEvent } from "quicklime";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, type ComponentProps } from "react";
 import {
   Box3,
   Color,
@@ -19,8 +19,8 @@ import {
 import { unrotateDavaVector } from "../../../core/blitz/unrotateDavaVector";
 import { jsxTree } from "../../../core/blitzkit/jsxTree";
 import {
-  type ModelTransformEventData,
   modelTransformEvent,
+  type ModelTransformEventData,
 } from "../../../core/blitzkit/modelTransform";
 import { discardClippingPlane } from "../../../core/three/discardClippingPlane";
 import { Tankopedia } from "../../../stores/tankopedia";
@@ -36,7 +36,7 @@ type StaticArmorSceneComponentProps = {
   thickness: number;
   thicknessRange: ThicknessRange;
   node: Object3D;
-  onPointerDown?: MeshProps["onPointerDown"];
+  onPointerDown?: ComponentProps<"mesh">["onPointerDown"];
 } & (
   | {
       type: Exclude<ArmorType, ArmorType.External>;

packages/website/src/components/Footer.astro

@@ -1,15 +1,15 @@
 ---
-import { assertSecret, fetchGameDefinitions } from '@blitzkit/core';
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { Box, Code, Flex, Heading, Link, Text } from '@radix-ui/themes';
-import packageJson from '../../../../package.json';
-import { getStrings } from '../core/i18n/getStrings';
-import { LinkI18n } from './LinkI18n';
-import { LocaleSwitcherThemeWrapper } from './LocaleSwitcher';
+import { assertSecret, fetchGameDefinitions } from "@blitzkit/core";
+import locales from "@blitzkit/i18n/locales.json";
+import { Box, Code, Flex, Heading, Link, Text } from "@radix-ui/themes";
+import packageJson from "../../../../package.json";
+import { getStrings } from "../core/i18n/getStrings";
+import { LinkI18n } from "./LinkI18n";
+import { LocaleSwitcherThemeWrapper } from "./LocaleSwitcher";
 
 const gameDefinitions = await fetchGameDefinitions();
 const PUBLIC_ASSET_BRANCH = assertSecret(import.meta.env.PUBLIC_BRANCH);
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale ?? locales.default;
 const strings = getStrings(locale);
 ---
 
@@ -28,13 +28,13 @@ const strings = getStrings(locale);
     flexGrow="1"
     gap="5"
     position="relative"
-    direction={{ initial: 'column', sm: 'row' }}
+    direction={{ initial: "column", sm: "row" }}
   >
     <Flex
       direction="column"
       align={{
-        initial: 'center',
-        sm: 'start',
+        initial: "center",
+        sm: "start",
       }}
     >
       <Heading>BlitzKit</Heading>
@@ -51,32 +51,32 @@ const strings = getStrings(locale);
     <Flex
       gap="6"
       width={{
-        initial: '100%',
-        sm: 'auto',
+        initial: "100%",
+        sm: "auto",
       }}
     >
       <Flex
         direction="column"
         gap="1"
         align={{
-          initial: 'end',
-          sm: 'start',
+          initial: "end",
+          sm: "start",
         }}
         flexGrow={{
-          initial: '1',
-          sm: '0',
+          initial: "1",
+          sm: "0",
         }}
         flexBasis={{
-          initial: '0',
-          sm: 'auto',
+          initial: "0",
+          sm: "auto",
         }}
       >
         <Heading size="3">{strings.website.footer.about.title}</Heading>
         <Flex
           direction="column"
           align={{
-            initial: 'end',
-            sm: 'start',
+            initial: "end",
+            sm: "start",
           }}
         >
           <LinkI18n {locale} href="/docs/about/credits" color="gray">
@@ -106,12 +106,12 @@ const strings = getStrings(locale);
         direction="column"
         gap="1"
         flexGrow={{
-          initial: '1',
-          sm: '0',
+          initial: "1",
+          sm: "0",
         }}
         flexBasis={{
-          initial: '0',
-          sm: 'auto',
+          initial: "0",
+          sm: "auto",
         }}
       >
         <Heading size="3">{strings.website.footer.legal.title}</Heading>
@@ -127,11 +127,11 @@ const strings = getStrings(locale);
     </Flex>
   </Flex>
 
-  <Flex gap="5" display={{ initial: 'flex', sm: 'none' }} width="100%">
+  <Flex gap="5" display={{ initial: "flex", sm: "none" }} width="100%">
     <Flex direction="column" gap="1" flexGrow="1" flexBasis="0" align="end">
       <Text size="2" color="gray">BlitzKit</Text>
       {
-        PUBLIC_ASSET_BRANCH !== 'preview' && (
+        PUBLIC_ASSET_BRANCH !== "preview" && (
           <Text size="2" color="gray">
             WoTB
           </Text>
@@ -145,7 +145,7 @@ const strings = getStrings(locale);
         {packageJson.version}
       </Code>
       {
-        PUBLIC_ASSET_BRANCH !== 'preview' && (
+        PUBLIC_ASSET_BRANCH !== "preview" && (
           <Code size="2" color="gray">
             {gameDefinitions.version}
           </Code>
@@ -157,14 +157,14 @@ const strings = getStrings(locale);
     </Flex>
   </Flex>
 
-  <Flex gap="2" align="center" display={{ initial: 'none', sm: 'flex' }}>
+  <Flex gap="2" align="center" display={{ initial: "none", sm: "flex" }}>
     <Text size="2" color="gray">BlitzKit</Text>
     <Code size="2" color="gray">
       {packageJson.version}
     </Code>
 
     {
-      PUBLIC_ASSET_BRANCH !== 'preview' && (
+      PUBLIC_ASSET_BRANCH !== "preview" && (
         <>
           <Text size="2" color="gray">
             WoTB

packages/website/src/components/Gallery/Card.tsx

@@ -1,5 +1,5 @@
-import { asset, Avatar } from '@blitzkit/core';
-import { Cross1Icon, DownloadIcon } from '@radix-ui/react-icons';
+import { asset, Avatar } from "@blitzkit/core";
+import { Cross1Icon, DownloadIcon } from "@radix-ui/react-icons";
 import {
   Dialog,
   Flex,
@@ -7,11 +7,11 @@ import {
   Link,
   Skeleton,
   Text,
-} from '@radix-ui/themes';
-import { useRef } from 'react';
-import { useIntersection } from '../../hooks/useIntersection';
-import { useLocale } from '../../hooks/useLocale';
-import type { MaybeSkeletonComponentProps } from '../../types/maybeSkeletonComponentProps';
+} from "@radix-ui/themes";
+import { useRef } from "react";
+import { useIntersection } from "../../hooks/useIntersection";
+import { useLocale } from "../../hooks/useLocale";
+import type { MaybeSkeletonComponentProps } from "../../types/maybeSkeletonComponentProps";
 
 type GalleryCardProps = MaybeSkeletonComponentProps<{
   avatar: Avatar;
@@ -19,9 +19,9 @@ type GalleryCardProps = MaybeSkeletonComponentProps<{
 
 export function GalleryCard(props: GalleryCardProps) {
   const src = asset(
-    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`,
+    `gallery/avatars/${!props.skeleton && `${props.avatar.id}${props.avatar.extension}`}`
   );
-  const card = useRef<HTMLDivElement>(null);
+  const card = useRef<HTMLDivElement>(null!);
   const { unwrap } = useLocale();
 
   useIntersection(() => props.skeleton && props.onIntersection?.(), card, {
@@ -35,7 +35,7 @@ export function GalleryCard(props: GalleryCardProps) {
       width="6rem"
       gap="1"
       ref={card}
-      style={{ cursor: 'pointer' }}
+      style={{ cursor: "pointer" }}
     >
       {props.skeleton && (
         <>
@@ -48,16 +48,16 @@ export function GalleryCard(props: GalleryCardProps) {
         <>
           <img
             style={{
-              width: '4rem',
-              height: '4.57rem',
+              width: "4rem",
+              height: "4.57rem",
               // aspect ratio 7 / 8
-              objectFit: 'cover',
+              objectFit: "cover",
             }}
             src={src}
             alt={unwrap(props.avatar.name)}
           />
 
-          <Text size="1" align="center" style={{ maxWidth: '100%' }}>
+          <Text size="1" align="center" style={{ maxWidth: "100%" }}>
             {unwrap(props.avatar.name)}
           </Text>
         </>
@@ -94,7 +94,7 @@ export function GalleryCard(props: GalleryCardProps) {
         </Flex>
 
         <Flex justify="center" mt="4">
-          <Dialog.Title align="center" style={{ maxWidth: '10rem' }}>
+          <Dialog.Title align="center" style={{ maxWidth: "10rem" }}>
             {unwrap(props.avatar.name)}
           </Dialog.Title>
         </Flex>

packages/website/src/components/HelpingSpotLight.tsx

@@ -1,7 +1,6 @@
-import type { SpotLightProps } from '@react-three/fiber';
-import { memo } from 'react';
+import { memo, type ComponentProps } from "react";
 
-interface Props extends SpotLightProps {
+interface Props extends ComponentProps<"spotLight"> {
   debug?: boolean;
 }
 

packages/website/src/components/Home/HomeLocaleSwitcher.tsx

@@ -1,12 +1,12 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { GlobeIcon } from '@radix-ui/react-icons';
-import { Flex, Text } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../../hooks/useLocale';
-import { BlitzKitTheme } from '../BlitzKitTheme';
-import { LocaleSwitcher } from '../LocaleSwitcher';
+import locales from "@blitzkit/i18n/locales.json";
+import { GlobeIcon } from "@radix-ui/react-icons";
+import { Flex, Text } from "@radix-ui/themes";
+import type { LocaleAcceptorProps } from "../../hooks/useLocale";
+import { BlitzKitTheme } from "../BlitzKitTheme";
+import { LocaleSwitcher } from "../LocaleSwitcher";
 
 export function HomeLocaleSwitcher({
-  locale = DEFAULT_LOCALE,
+  locale = locales.default,
 }: LocaleAcceptorProps) {
   return (
     <BlitzKitTheme>

packages/website/src/components/LinkI18n.tsx

@@ -1,14 +1,14 @@
-import { DEFAULT_LOCALE } from '@blitzkit/i18n';
-import { Link, type LinkProps } from '@radix-ui/themes';
-import type { LocaleAcceptorProps } from '../hooks/useLocale';
+import locales from "@blitzkit/i18n/locales.json";
+import { Link, type LinkProps } from "@radix-ui/themes";
+import type { LocaleAcceptorProps } from "../hooks/useLocale";
 
 type LinkI18nProps = LinkProps & LocaleAcceptorProps;
 
 export function LinkI18n({ locale, href, ...props }: LinkI18nProps) {
   const prefix =
-    locale === undefined || locale === DEFAULT_LOCALE ? '' : `/${locale}`;
+    locale === undefined || locale === locales.default ? "" : `/${locale}`;
 
   return (
-    <Link href={href?.startsWith('/') ? `${prefix}${href}` : href} {...props} />
+    <Link href={href?.startsWith("/") ? `${prefix}${href}` : href} {...props} />
   );
 }

packages/website/src/components/LocaleRedirector.astro

@@ -1,12 +1,13 @@
 <script>
-  import { SUPPORTED_LOCALES } from "@blitzkit/i18n";
+  import locales from "@blitzkit/i18n/locales.json";
   import { getBestLocale } from "../core/i18n/getBestLocale";
+
   const isAPI = window.location.pathname.startsWith("/api");
-  const isI18nPath = SUPPORTED_LOCALES.some((locale) =>
+  const isI18nPath = locales.supported.some(({ locale }) =>
     window.location.pathname.startsWith(`/${locale}`)
   );
   const bestLocale = getBestLocale();
-  const currentPathLocale = SUPPORTED_LOCALES.find((locale) =>
+  const currentPathLocale = locales.supported.find(({ locale }) =>
     window.location.pathname.startsWith(`/${locale}`)
   );
 

packages/website/src/components/Nivo/ThemedBar.tsx

@@ -1,19 +0,0 @@
-import {
-  ResponsiveBar,
-  type BarDatum,
-  type ResponsiveBarSvgProps,
-} from '@nivo/bar';
-import { nivoTheme } from '../../core/nivo/theme';
-
-export function ThemedBar<RawDatum extends BarDatum>(
-  props: ResponsiveBarSvgProps<RawDatum>,
-) {
-  return (
-    <ResponsiveBar
-      colors={{ scheme: 'yellow_green_blue' }}
-      theme={nivoTheme}
-      borderRadius={4}
-      {...props}
-    />
-  );
-}

packages/website/src/components/Nivo/ThemedLine.tsx

@@ -1,15 +0,0 @@
-import { ResponsiveLine, type LineSvgProps } from '@nivo/line';
-import { nivoTheme } from '../../core/nivo/theme';
-
-export function ThemedLine(props: LineSvgProps) {
-  return (
-    <ResponsiveLine
-      colors={{ scheme: 'yellow_green_blue' }}
-      theme={nivoTheme}
-      margin={{ top: 50, right: 110, bottom: 50, left: 60 }}
-      enablePoints={true}
-      useMesh
-      {...props}
-    />
-  );
-}

packages/website/src/components/Performance/RowLoader.tsx

@@ -1,15 +1,15 @@
-import { Skeleton, Table } from '@radix-ui/themes';
-import { times } from 'lodash-es';
-import { memo, useRef } from 'react';
-import { useIntersection } from '../../hooks/useIntersection';
-import { TankPerformanceSortTypeNamesArray } from '../../stores/tankPerformanceSort/constants';
+import { Skeleton, Table } from "@radix-ui/themes";
+import { times } from "lodash-es";
+import { memo, useRef } from "react";
+import { useIntersection } from "../../hooks/useIntersection";
+import { TankPerformanceSortTypeNamesArray } from "../../stores/tankPerformanceSort/constants";
 
 interface RowLoaderProps {
   onIntersection?: () => void;
 }
 
 export const RowLoader = memo<RowLoaderProps>(({ onIntersection }) => {
-  const row = useRef<HTMLTableRowElement>(null);
+  const row = useRef<HTMLTableRowElement>(null!);
 
   useIntersection(() => onIntersection?.(), row, {
     disabled: onIntersection === undefined,

packages/website/src/components/SmartCanvas.tsx

@@ -1,20 +1,20 @@
-import { Canvas, type CanvasProps } from '@react-three/fiber';
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import { useOnScreen } from '../hooks/useOnScreen';
+import { Canvas, type CanvasProps } from "@react-three/fiber";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { useOnScreen } from "../hooks/useOnScreen";
 
 export const SmartCanvas = forwardRef<HTMLCanvasElement, CanvasProps>(
   (props, ref) => {
-    const canvas = useRef<HTMLCanvasElement>(null);
+    const canvas = useRef<HTMLCanvasElement>(null!);
     const onScreen = useOnScreen(canvas);
 
     useImperativeHandle(ref, () => canvas.current!, []);
 
     return (
       <Canvas
-        frameloop={onScreen ? 'demand' : 'never'}
+        frameloop={onScreen ? "demand" : "never"}
         ref={canvas}
         {...props}
       />
     );
-  },
+  }
 );

packages/website/src/components/TankSearch/components/SkeletonTankCard.tsx

@@ -1,6 +1,6 @@
-import { Flex, Skeleton } from '@radix-ui/themes';
-import { memo, useRef } from 'react';
-import { useIntersection } from '../../../hooks/useIntersection';
+import { Flex, Skeleton } from "@radix-ui/themes";
+import { memo, useRef } from "react";
+import { useIntersection } from "../../../hooks/useIntersection";
 
 interface SkeletonTankCardProps {
   onIntersection?: () => void;
@@ -8,7 +8,7 @@ interface SkeletonTankCardProps {
 
 export const SkeletonTankCard = memo(
   ({ onIntersection }: SkeletonTankCardProps) => {
-    const card = useRef<HTMLDivElement>(null);
+    const card = useRef<HTMLDivElement>(null!);
 
     useIntersection(() => onIntersection?.(), card, {
       disabled: onIntersection === undefined,
@@ -21,5 +21,5 @@ export const SkeletonTankCard = memo(
       </Flex>
     );
   },
-  () => true,
+  () => true
 );

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/Info.tsx

@@ -38,7 +38,7 @@ export function Info({
     const result = fuzzysort.single(statSearch, name);
 
     if (result) {
-      label = fuzzysort.highlight(result, (match, index) => (
+      label = result.highlight((match, index) => (
         <Mark key={index}>{match}</Mark>
       ));
       highlighted = true;

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel.tsx

@@ -19,8 +19,8 @@ export function TankModel() {
   const turret = Duel.use((state) => state.protagonist.turret);
   const canvas = useThree((state) => state.gl.domElement);
   const hullContainer = useRef<Group>(null);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/TransitionSkeleton/index.tsx

@@ -26,8 +26,8 @@ export function TransitionSkeleton() {
   const gun = Duel.use((state) => state.protagonist.gun);
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
-  const turretContainer = useRef<Group>(null);
-  const gunContainer = useRef<Group>(null);
+  const turretContainer = useRef<Group>(null!);
+  const gunContainer = useRef<Group>(null!);
   const { gltf: armorGltf } = useArmor(tank.id);
   const { gltf: modelGltf } = useModel(tank.id);
   const modelNodes = Object.values(modelGltf.nodes);

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -16,7 +16,7 @@ const tankDefinitions = await awaitableTankDefinitions;
 export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   const revealed = Tankopedia.use((state) => state.revealed);
   const disturbed = Tankopedia.use((state) => state.disturbed);
-  const canvas = useRef<HTMLCanvasElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null!);
   const isFullScreen = useFullScreen();
   const protagonist = Duel.use((state) => state.protagonist.tank);
   const thicknessRange = useMemo(() => {

packages/website/src/core/blitzkit/jsxTree.tsx

@@ -1,13 +1,20 @@
-import type { GroupProps, MeshProps } from '@react-three/fiber';
-import type { ReactNode } from 'react';
-import { Mesh, Object3D } from 'three';
+import type { ComponentProps, ReactNode } from "react";
+import { Mesh, Object3D } from "three";
 
 export function jsxTree(
   node: Object3D,
   mergers?: {
-    mesh?: (mesh: Mesh, props: MeshProps, key: string) => ReactNode;
-    group?: (object3d: Object3D, props: GroupProps, key: string) => ReactNode;
-  },
+    mesh?: (
+      mesh: Mesh,
+      props: ComponentProps<"mesh">,
+      key: string
+    ) => ReactNode;
+    group?: (
+      object3d: Object3D,
+      props: ComponentProps<"group">,
+      key: string
+    ) => ReactNode;
+  }
 ): ReactNode {
   if (node instanceof Mesh) {
     const props = {

packages/website/src/core/i18n/getBestLocale.ts

@@ -1,13 +1,13 @@
-import { DEFAULT_LOCALE, SUPPORTED_LOCALES } from '@blitzkit/i18n';
+import locales from "@blitzkit/i18n/locales.json";
 
 export function getBestLocale() {
   const desiredLocale =
-    localStorage.getItem('preferred-locale') ??
-    navigator.language.split('-')[0];
-  const isSupported = (SUPPORTED_LOCALES as unknown as string[]).includes(
-    desiredLocale,
+    localStorage.getItem("preferred-locale") ??
+    navigator.language.split("-")[0];
+  const isSupported = locales.supported.some(
+    ({ locale }) => locale === desiredLocale
   );
-  const isDefault = desiredLocale === DEFAULT_LOCALE;
+  const isDefault = desiredLocale === locales.default;
 
   if (!isSupported || isDefault) return undefined;
 

packages/website/src/core/nivo/theme.ts

@@ -1,39 +0,0 @@
-import type { Theme } from '@nivo/core';
-import { Var } from '../radix/var';
-
-export const nivoTheme = {
-  background: Var('color-background'),
-  text: {
-    fill: Var('gray-contrast'),
-    fontFamily: 'inherit',
-  },
-  axis: {
-    ticks: {
-      text: {
-        fill: Var('gray-indicator'),
-      },
-      line: {
-        stroke: Var('gray-indicator'),
-      },
-    },
-  },
-  grid: {
-    line: {
-      stroke: Var('gray-indicator'),
-    },
-  },
-  tooltip: {
-    container: {
-      background: Var('color-overlay'),
-      backdropFilter: 'blur(4rem)',
-      WebkitBackdropFilter: 'blur(4rem)',
-      color: Var('gray-contrast'),
-      borderRadius: Var('radius-2'),
-    },
-  },
-  labels: {
-    text: {
-      fill: Var('gray-1'),
-    },
-  },
-} satisfies Theme;

packages/website/src/hooks/useIntersection.ts

@@ -1,4 +1,4 @@
-import { type RefObject, useEffect, useRef } from 'react';
+import { type RefObject, useEffect, useRef } from "react";
 
 interface UseIntersectionOptions extends IntersectionObserverInit {
   disabled: boolean;
@@ -7,9 +7,9 @@ interface UseIntersectionOptions extends IntersectionObserverInit {
 export function useIntersection(
   callback: () => void,
   ref: RefObject<HTMLElement>,
-  options?: UseIntersectionOptions,
+  options?: UseIntersectionOptions
 ) {
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(null!);
 
   useEffect(() => {
     if (options?.disabled || !ref.current) return;

packages/website/src/hooks/useLocale.tsx

@@ -1,6 +1,7 @@
-import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
-import { createContext, useContext, type ReactNode } from 'react';
-import { getStrings } from '../core/i18n/getStrings';
+import { unwrapper } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
+import { createContext, useContext, type ReactNode } from "react";
+import { getStrings } from "../core/i18n/getStrings";
 
 const LocaleContext = createContext<{
   locale: string;
@@ -14,7 +15,7 @@ interface LocaleProviderProps extends LocaleAcceptorProps {
 export function LocaleProvider({ locale, children }: LocaleProviderProps) {
   return (
     <LocaleContext.Provider
-      value={{ locale: locale ?? DEFAULT_LOCALE, localeRaw: locale }}
+      value={{ locale: locale ?? locales.default, localeRaw: locale }}
     >
       {children}
     </LocaleContext.Provider>
@@ -25,7 +26,7 @@ export function useLocale() {
   const context = useContext(LocaleContext);
 
   if (!context) {
-    throw new Error('useLocale must be used within a LocaleProvider');
+    throw new Error("useLocale must be used within a LocaleProvider");
   }
 
   const strings = getStrings(context.locale);

packages/website/src/hooks/useOnScreen.ts

@@ -1,17 +1,17 @@
-import { type RefObject, useEffect, useRef, useState } from 'react';
+import { type RefObject, useEffect, useRef, useState } from "react";
 
 /**
- * Thanks GuCier!
+ * Thanks GuCire!
  *
  * https://stackoverflow.com/a/65008608/12294756
  */
 export function useOnScreen(ref: RefObject<HTMLElement>) {
   const [isIntersecting, setIntersecting] = useState(false);
-  const observer = useRef<IntersectionObserver>();
+  const observer = useRef<IntersectionObserver>(null!);
 
   useEffect(() => {
     observer.current = new IntersectionObserver(([entry]) =>
-      setIntersecting(entry.isIntersecting),
+      setIntersecting(entry.isIntersecting)
     );
   }, [ref]);
 

packages/website/src/layouts/BaseLayout.astro

@@ -1,5 +1,4 @@
 ---
-import { DEFAULT_LOCALE } from "@blitzkit/i18n";
 import strings from "@blitzkit/i18n/strings/en.json";
 import "@fontsource/inter";
 import { Flex } from "@radix-ui/themes";
@@ -22,7 +21,7 @@ export interface Props {
 
 const servicing = import.meta.env.SERVICING;
 const { noFooter, noNavbar, integrated } = Astro.props;
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale;
 ---
 
 <html lang={locale}>

packages/website/src/pages/[...locale]/embed/[embed]/_index.tsx

@@ -60,7 +60,7 @@ function Content({ embed }: PageProps) {
   const [backgroundImage, setBackgroundImage] = useState(
     "/assets/images/backgrounds/embed-default.webp"
   );
-  const fileInput = useRef<HTMLInputElement>();
+  const fileInput = useRef<HTMLInputElement>(null!);
   const { strings } = useLocale();
 
   useEffect(() => {

packages/website/src/pages/[...locale]/mixer/_index.tsx

@@ -109,7 +109,7 @@ function Content({ skeleton }: MaybeSkeletonComponentProps) {
   const hull = Mixer.use((state) => state.hull);
   const turretId = Mixer.use((state) => state.turret.tank.id);
   const gunId = Mixer.use((state) => state.gun.tank.id);
-  const canvas = useRef<HTMLCanvasElement>(null);
+  const canvas = useRef<HTMLCanvasElement>(null!);
   const { strings } = useLocale();
 
   return (

packages/website/src/pages/[...locale]/settings/_index.tsx

@@ -1,4 +1,3 @@
-import { DEFAULT_LOCALE } from "@blitzkit/i18n";
 import { Flex, Switch, Text } from "@radix-ui/themes";
 import { LocaleSwitcher } from "../../../components/LocaleSwitcher";
 import { PageWrapper } from "../../../components/PageWrapper";
@@ -9,7 +8,7 @@ import {
 } from "../../../hooks/useLocale";
 import { App } from "../../../stores/app";
 
-export function Page({ locale = DEFAULT_LOCALE }: LocaleAcceptorProps) {
+export function Page({ locale }: LocaleAcceptorProps) {
   return (
     <LocaleProvider locale={locale}>
       <Content locale={locale} />

packages/website/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -1,5 +1,5 @@
 ---
-import { AstroSeo } from '@astrolib/seo';
+import { AstroSeo } from "@astrolib/seo";
 import {
   assertSecret,
   asset,
@@ -11,17 +11,17 @@ import {
   fetchSkillDefinitions,
   fetchTankDefinitions,
   TIER_ROMAN_NUMERALS,
-} from '@blitzkit/core';
-import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
-import { literals } from '@blitzkit/i18n/src/literals';
-import type { GetStaticPaths } from 'astro';
-import { load } from 'cheerio';
-import { tankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
-import { getStrings } from '../../../../core/i18n/getStrings';
-import BaseLayout from '../../../../layouts/BaseLayout.astro';
-import { genericDefaultEquipmentMatrix } from '../../../../stores/duel/constants';
-import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
-import { Page } from './_index';
+} from "@blitzkit/core";
+import { unwrapper } from "@blitzkit/i18n";
+import { literals } from "@blitzkit/i18n/src/literals";
+import type { GetStaticPaths } from "astro";
+import { load } from "cheerio";
+import { tankCharacteristics } from "../../../../core/blitzkit/tankCharacteristics";
+import { getStrings } from "../../../../core/i18n/getStrings";
+import BaseLayout from "../../../../layouts/BaseLayout.astro";
+import { genericDefaultEquipmentMatrix } from "../../../../stores/duel/constants";
+import { getStaticPaths as parentGetStaticPaths } from "../index.astro";
+import { Page } from "./_index";
 
 export const getStaticPaths = (async () => {
   const tankDefinitions = await fetchTankDefinitions();
@@ -32,13 +32,13 @@ export const getStaticPaths = (async () => {
       parentPaths.map((parent) => ({
         params: { ...parent.params, slug: tank.slug },
         props: { id: tank.id },
-      })),
+      }))
     )
     .flat();
 }) satisfies GetStaticPaths;
 
 const { id } = Astro.props;
-const locale = Astro.params.locale ?? DEFAULT_LOCALE;
+const locale = Astro.params.locale;
 const strings = getStrings(locale);
 const tankDefinitions = await fetchTankDefinitions();
 const skillDefinitions = await fetchSkillDefinitions();
@@ -56,7 +56,7 @@ const title = literals(strings.website.tools.tankopedia.tank_seo_title, [
     tank.nation as keyof typeof strings.common.nations_adjectives
   ],
   strings.common.tank_class_short[tank.class],
-  'BlitzKit',
+  "BlitzKit",
   strings.common.nations[tank.nation as keyof typeof strings.common.nations],
 ]);
 const url = import.meta.env.SITE + Astro.url.pathname;
@@ -87,7 +87,7 @@ const characteristics = tankCharacteristics(
     track: tank.tracks.at(-1)!,
     assaultDistance: 0,
   },
-  { equipmentDefinitions, provisionDefinitions, tankModelDefinition },
+  { equipmentDefinitions, provisionDefinitions, tankModelDefinition }
 );
 const description = literals(
   strings.website.tools.tankopedia.tank_seo_description,
@@ -98,7 +98,7 @@ const description = literals(
     Math.round(characteristics.penetration).toLocaleString(locale),
     Math.round(characteristics.speedForwards).toLocaleString(locale),
     Math.round(characteristics.health).toLocaleString(locale),
-  ],
+  ]
 );
 
 export interface TankGuide {
@@ -113,8 +113,8 @@ const guideResponse = await fetch(guideUrl);
 
 if (guideResponse.ok) {
   const $ = await guideResponse.text().then(load);
-  const description = $('.entry-content p').first().text();
-  const image = $('.entry-content img').first().attr('src')?.toString();
+  const description = $(".entry-content p").first().text();
+  const image = $(".entry-content img").first().attr("src")?.toString();
 
   if (description !== undefined || image !== undefined) {
     guide = {