feat: upgrade tankopediaEphemeral

packages/varuna/src/index.ts

@@ -2,24 +2,49 @@ import { produce } from 'immer';
 import { merge } from 'lodash-es';
 import { useEffect, useState } from 'react';
 
-export class Varuna<Type> {
+interface ProviderProps<Arguments> {
+  args: Arguments;
+}
+
+export class Varuna<Type, Arguments = void> {
   private listeners = new Set<(state: Type) => void>();
-  public initial: Type;
+
+  private initialized = false;
+  private _initial?: Type;
+  private _state?: Type;
 
   constructor(
-    public state: Type,
-    persistence?: string,
+    private creator: Type | ((...args: Arguments[]) => Type),
+    private persistence?: string,
   ) {
-    if (persistence) {
-      const dehydrated = localStorage.getItem(persistence);
+    if (typeof creator !== 'function') this.initialize(creator);
+  }
+
+  Provider({ args }: ProviderProps<Arguments>) {
+    if (typeof this.creator !== 'function') {
+      throw new Error('Provider must be used with a function creator');
+    }
+
+    this.initialize((this.creator as (...args: Arguments[]) => Type)(args));
+
+    return null;
+  }
+
+  private initialize(initial: Type) {
+    let data = initial;
+
+    if (this.persistence) {
+      const dehydrated = localStorage.getItem(this.persistence);
 
       if (dehydrated) {
         const rehydrated = JSON.parse(dehydrated) as unknown;
-        this.state = merge(this.state, rehydrated);
+        data = merge(data, rehydrated);
       }
     }
 
-    this.initial = this.state;
+    this.initialized = true;
+    this._initial = data;
+    this._state = data;
   }
 
   private dispatch() {
@@ -46,11 +71,26 @@ export class Varuna<Type> {
     this.set(produce(this.state, mutator));
   }
 
+  private assertInitialized() {
+    if (!this.initialized) throw new Error('State used before initialization');
+  }
+
+  get state() {
+    this.assertInitialized();
+    return this._state as Type;
+  }
+
   set(state: Type) {
-    this.state = state;
+    this.assertInitialized();
+    this._state = state;
     this.dispatch();
   }
 
+  get initial() {
+    this.assertInitialized();
+    return this._initial as Type;
+  }
+
   use<Slice = Type>(
     slicer: (state: Type) => Slice = (state) => state as unknown as Slice,
   ) {

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

@@ -21,11 +21,9 @@ export function ArmorPlateDisplay() {
   const highlightArmor = TankopediaEphemeral.use(
     (state) => state.highlightArmor,
   );
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const developerMode = App.useDeferred((state) => state.developerMode, false);
   const duelStore = Duel.useStore();
   const input = useRef<HTMLInputElement>(null);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
 
   if (highlightArmor === undefined) return null;
 
@@ -95,7 +93,7 @@ export function ArmorPlateDisplay() {
                     if (event.key === 'Enter') {
                       input.current?.blur();
 
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.highlightArmor = undefined;
                         const { protagonist } = duelStore.getState();
                         const tank = draft.model;
@@ -119,7 +117,7 @@ export function ArmorPlateDisplay() {
                       });
                     } else if (event.key === 'Escape') {
                       input.current?.blur();
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.highlightArmor = undefined;
                       });
                     }
@@ -137,7 +135,7 @@ export function ArmorPlateDisplay() {
                   mt="2"
                   color="red"
                   onClick={() => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       if (!highlightArmor.editingPlate) return;
 
                       const index = resolveArmorIndex(highlightArmor.name);
@@ -145,8 +143,7 @@ export function ArmorPlateDisplay() {
                       if (index === undefined) return;
 
                       draft.highlightArmor = undefined;
-                      const initialState =
-                        tankopediaEphemeralStore.getInitialState();
+                      const initialState = TankopediaEphemeral.initial;
                       const { protagonist } = duelStore.getState();
                       const tank = draft.model;
                       const initialTank = initialState.model;

packages/website/src/components/Armor/components/PrimaryArmorSceneComponent/index.tsx

@@ -43,7 +43,6 @@ export function PrimaryArmorSceneComponent({
 }: PrimaryArmorSceneComponentProps) {
   const tankopediaPersistentStore = TankopediaPersistent.useStore();
   const duelStore = Duel.useStore();
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
     vertexShader,
@@ -82,7 +81,7 @@ export function PrimaryArmorSceneComponent({
   useEffect(() => {
     function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
 
       material.uniforms.caliber.value = shell.caliber;
@@ -136,7 +135,7 @@ export function PrimaryArmorSceneComponent({
       noInvalidate = false,
     ) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
@@ -168,10 +167,7 @@ export function PrimaryArmorSceneComponent({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       tankopediaPersistentStore.subscribe(
         (state) => state.greenPenetration,
         handleGreenPenetrationChange,

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubExternal/index.tsx

@@ -29,7 +29,6 @@ export function SpacedArmorSubExternal({
   variant,
   clip,
 }: SpacedArmorSubExternalProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
@@ -50,7 +49,7 @@ export function SpacedArmorSubExternal({
   useEffect(() => {
     function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       material.uniforms.penetration.value = shell.penetration.near;
     }
@@ -67,7 +66,7 @@ export function SpacedArmorSubExternal({
     }
     function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
@@ -91,10 +90,7 @@ export function SpacedArmorSubExternal({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange,

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/components/SpacedArmorSubSpaced/index.tsx

@@ -30,7 +30,6 @@ export function SpacedArmorSubSpaced({
   node,
   thickness,
 }: SpacedArmorSubSpacedProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const material = new ShaderMaterial({
     fragmentShader,
@@ -52,7 +51,7 @@ export function SpacedArmorSubSpaced({
   useEffect(() => {
     function handleShellChange() {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
 
       material.uniforms.penetration.value = shell.penetration.near;
@@ -77,7 +76,7 @@ export function SpacedArmorSubSpaced({
     }
     function handleAntagonistEquipmentChange(equipment: EquipmentMatrix) {
       const duel = duelStore.getState();
-      const tankopediaEphemeral = tankopediaEphemeralStore.getState();
+      const tankopediaEphemeral = TankopediaEphemeral.state;
       const shell = tankopediaEphemeral.customShell ?? duel.antagonist.shell;
       const penetration = shell.penetration.near;
       const hasCalibratedShells = hasEquipment(
@@ -101,10 +100,7 @@ export function SpacedArmorSubSpaced({
 
     const unsubscribes = [
       duelStore.subscribe((state) => state.antagonist.shell, handleShellChange),
-      tankopediaEphemeralStore.subscribe(
-        (state) => state.customShell,
-        handleShellChange,
-      ),
+      TankopediaEphemeral.on((state) => state.customShell, handleShellChange),
       duelStore.subscribe(
         (state) => state.protagonist.equipmentMatrix,
         handleProtagonistEquipmentChange,

packages/website/src/components/Armor/components/SpacedArmorSceneComponent/index.tsx

@@ -76,7 +76,6 @@ export function SpacedArmorSceneComponent({
   clip,
   ...props
 }: SpacedArmorSceneComponentProps) {
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const duelStore = Duel.useStore();
   const camera = useThree((state) => state.camera);
 
@@ -88,7 +87,7 @@ export function SpacedArmorSceneComponent({
       remainingPenetrationInput?: number,
     ) => {
       const { antagonist, protagonist } = duelStore.getState();
-      const { customShell } = tankopediaEphemeralStore.getState();
+      const { customShell } = TankopediaEphemeral.state;
       const shell = customShell ?? antagonist.shell;
       const cameraNormal = camera.position.clone().sub(point).normalize();
       const shot: Shot = {
@@ -391,7 +390,9 @@ export function SpacedArmorSceneComponent({
 
                   const shot = shoot(event.point, event.intersections, true)!;
 
-                  tankopediaEphemeralStore.setState({ shot });
+                  TankopediaEphemeral.mutate((draft) => {
+                    draft.shot = shot;
+                  });
                 }}
               />
             );

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

@@ -46,7 +46,6 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
   const turretOrigin = correctZYTuple(tankModelDefinition.turret_origin);
   const gunOrigin = correctZYTuple(turretModelDefinition.gun_origin);
   const canvas = useThree((state) => state.gl.domElement);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
   const maskOrigin =
     gunModelDefinition.mask === undefined
@@ -155,10 +154,10 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
 
             position.set(event.clientX, event.clientY);
 
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = false;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.shot = undefined;
               draft.highlightArmor = undefined;
             });
@@ -194,7 +193,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = true;
             });
             window.removeEventListener('pointermove', handlePointerMove);
@@ -245,10 +244,10 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
@@ -287,7 +286,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
               window.removeEventListener('pointermove', handlePointerMove);
@@ -327,10 +326,10 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
@@ -368,7 +367,7 @@ export const StaticArmor = memo<ArmorSceneProps>(({ thicknessRange }) => {
               modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
 

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

@@ -69,8 +69,6 @@ export function StaticArmorSceneComponent({
   onPointerDown,
   ...props
 }: StaticArmorSceneComponentProps) {
-  const mutateTankopediaEphemeralStore = TankopediaEphemeral.useMutation();
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const camera = useThree((state) => state.camera);
   const x = thickness / thicknessRange.value;
   const xClamped = clamp(x, 0, 1);
@@ -166,7 +164,7 @@ export function StaticArmorSceneComponent({
     }
 
     const unsubscribes = [
-      tankopediaEphemeralStore.subscribe(
+      TankopediaEphemeral.on(
         (state) => state.highlightArmor?.name,
         handleHighlightArmor,
       ),
@@ -238,7 +236,7 @@ export function StaticArmorSceneComponent({
 
                 event.stopPropagation();
 
-                const { editStatic } = tankopediaEphemeralStore.getState();
+                const { editStatic } = TankopediaEphemeral.state;
 
                 const bounds = new Box3().setFromObject(event.object);
                 const point = bounds.min
@@ -259,7 +257,7 @@ export function StaticArmorSceneComponent({
                 const thicknessAngled =
                   thickness / Math.sin(Math.PI / 2 - angle);
 
-                mutateTankopediaEphemeralStore((draft) => {
+                TankopediaEphemeral.mutate((draft) => {
                   draft.highlightArmor = {
                     type: props.type,
                     name,

packages/website/src/components/GuessBackground/index.tsx

@@ -18,13 +18,12 @@ export function GuessBackground() {
   const guessState = GuessEphemeral.use((state) => state.guessState);
   const tank = GuessEphemeral.use((state) => state.tank);
   const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
     mutateDuel((state) => {
       state.protagonist = tankToDuelMember(tank, provisionDefinitions);
     });
-    mutateTankopediaEphemeral((state) => {
+    TankopediaEphemeral.mutate((state) => {
       state.model = modelDefinitions.models[tank.id];
     });
   }, [tank]);

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

@@ -13,7 +13,6 @@ export function CompareOptions(props: FlexProps) {
     (state) => state.relativeAgainst,
   );
   const tank = Duel.use((state) => state.protagonist.tank);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -33,7 +32,7 @@ export function CompareOptions(props: FlexProps) {
         size="1"
         value={`${relativeAgainst}`}
         onValueChange={(value) => {
-          mutateTankopediaEphemeral((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.relativeAgainst = Number(value) as TankopediaRelativeAgainst;
           });
         }}

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

@@ -10,7 +10,6 @@ export function StatSearch(props: FlexProps) {
   const { strings } = useLocale();
   const [searching, setSearching] = useState(false);
   const input = useRef<HTMLInputElement>(null);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const count = useRef<HTMLDivElement>(null);
   const [index, setIndex] = useState(0);
   const search = useCallback(() => {
@@ -34,14 +33,14 @@ export function StatSearch(props: FlexProps) {
         count.current.textContent = '';
 
         setSearching(false);
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.statSearch = undefined;
         });
         return;
       }
 
       setSearching(false);
-      mutateTankopediaEphemeral((draft) => {
+      TankopediaEphemeral.mutate((draft) => {
         draft.statSearch = input.current!.value;
       });
     }, 500),

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Skills.tsx

@@ -14,7 +14,6 @@ import { ConfigurationChildWrapper } from './ConfigurationChildWrapper';
 
 export function Skills() {
   const skillLevels = TankopediaEphemeral.use((state) => state.skills);
-  const mutateTankopediaTemporary = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -46,7 +45,7 @@ export function Skills() {
           variant="ghost"
           color="red"
           onClick={() => {
-            mutateTankopediaTemporary((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
                 draft.skills[skill] = 0;
               });
@@ -58,7 +57,7 @@ export function Skills() {
         <Button
           variant="ghost"
           onClick={() => {
-            mutateTankopediaTemporary((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               Object.keys(draft.skills).forEach((skill) => {
                 draft.skills[skill] = 7;
               });
@@ -72,7 +71,7 @@ export function Skills() {
       <CrewSkillManager
         skillLevels={skillLevels}
         onChange={(skills) => {
-          mutateTankopediaTemporary((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.skills = skills;
           });
         }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx

@@ -20,7 +20,6 @@ export function CustomShellButton() {
   const customShell = TankopediaEphemeral.use((state) => state.customShell);
   const gun = Duel.use((state) => state.protagonist.gun);
   const antagonistShell = Duel.use((state) => state.antagonist.shell);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const { strings } = useLocale();
 
   return (
@@ -28,7 +27,7 @@ export function CustomShellButton() {
       onOpenChange={(open) => {
         if (!open || customShell) return;
 
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.customShell = antagonistShell;
         });
       }}
@@ -97,7 +96,7 @@ export function CustomShellButton() {
                       }
                     }
 
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell = modified;
                     });
                   }}
@@ -134,7 +133,7 @@ export function CustomShellButton() {
                   defaultValue={customShell.caliber}
                   type="number"
                   onChange={(event) => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell!.caliber = event.target.valueAsNumber;
                     });
                   }}
@@ -170,7 +169,7 @@ export function CustomShellButton() {
                   defaultValue={customShell.penetration.near}
                   type="number"
                   onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                    mutateTankopediaEphemeral((draft) => {
+                    TankopediaEphemeral.mutate((draft) => {
                       draft.customShell!.penetration.near =
                         event.target.valueAsNumber;
                     });
@@ -226,7 +225,7 @@ export function CustomShellButton() {
                         onValueChange={([value]) => {
                           console.log('asd');
 
-                          mutateTankopediaEphemeral((draft) => {
+                          TankopediaEphemeral.mutate((draft) => {
                             draft.customShell!.normalization = value;
                           });
                         }}
@@ -255,7 +254,7 @@ export function CustomShellButton() {
                         step={Number.EPSILON}
                         defaultValue={[customShell.ricochet ?? 90]}
                         onValueChange={throttle(([value]) => {
-                          mutateTankopediaEphemeral((draft) => {
+                          TankopediaEphemeral.mutate((draft) => {
                             draft.customShell!.ricochet = value;
                           });
                         }, 1000)}
@@ -274,7 +273,7 @@ export function CustomShellButton() {
                     defaultValue={customShell.explosion_radius ?? 0}
                     type="number"
                     onChange={(event: ChangeEvent<HTMLInputElement>) => {
-                      mutateTankopediaEphemeral((draft) => {
+                      TankopediaEphemeral.mutate((draft) => {
                         draft.customShell!.explosion_radius =
                           event.target.valueAsNumber;
                       });
@@ -310,7 +309,7 @@ export function CustomShellButton() {
               <Button
                 color="red"
                 onClick={() => {
-                  mutateTankopediaEphemeral((draft) => {
+                  TankopediaEphemeral.mutate((draft) => {
                     draft.customShell = antagonistShell;
                   });
                 }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/DynamicArmorSwitcher.tsx

@@ -7,7 +7,6 @@ import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemera
 export function DynamicArmorSwitcher() {
   const tank = Duel.use((state) => state.protagonist.tank);
   const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const isDynamicArmorActive = Duel.use((state) =>
     state.protagonist.consumables.includes(73),
   );
@@ -33,7 +32,7 @@ export function DynamicArmorSwitcher() {
             }
           }
         });
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.shot = undefined;
         });
       }}

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/Thicknesses.tsx

@@ -26,9 +26,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
     (state) => state.showPrimaryArmor,
   );
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const editStatic = TankopediaEphemeral.use((state) => state.editStatic);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const { strings } = useLocale();
 
   return (
@@ -55,7 +53,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showPrimaryArmor = !draft.showPrimaryArmor;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -96,7 +94,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showSpacedArmor = !draft.showSpacedArmor;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -135,7 +133,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             mutateTankopediaPersistent((draft) => {
               draft.showExternalModules = !draft.showExternalModules;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.highlightArmor = undefined;
             });
           }}
@@ -168,7 +166,7 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
             gap="2"
             style={{ cursor: 'pointer' }}
             onClick={() => {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.editStatic = !draft.editStatic;
                 draft.highlightArmor = undefined;
               });
@@ -186,9 +184,9 @@ export function Thicknesses({ thicknessRange, skeleton }: ThicknessesProps) {
           size="1"
           variant="ghost"
           onClick={() => {
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.editStatic = false;
-              draft.model = tankopediaEphemeralStore.getInitialState().model;
+              draft.model = TankopediaEphemeral.initial.model;
             });
           }}
         >

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

@@ -73,7 +73,6 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
   const hasEnhancedArmor = useEquipment(110);
   const antagonistUniqueGuns = uniqueGuns(antagonistTank.turrets);
   const mutateTankopediaPersistent = TankopediaPersistent.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const { strings, unwrap } = useLocale();
   const revealed = TankopediaEphemeral.use((state) => state.revealed);
   const disturbed = TankopediaEphemeral.use((state) => state.disturbed);
@@ -196,7 +195,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                 mutateDuel((draft) => {
                   draft.antagonist.shell = thisShell;
                 });
-                mutateTankopediaEphemeral((draft) => {
+                TankopediaEphemeral.mutate((draft) => {
                   draft.shot = undefined;
                   draft.customShell = undefined;
                 });
@@ -235,7 +234,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   ? 0
                   : 1;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
               });
             }}
@@ -260,7 +259,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
                   ? 0
                   : -1;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
               });
             }}
@@ -367,7 +366,7 @@ export function Options({ thicknessRange, canvas, skeleton }: OptionsProps) {
             variant="classic"
             value={`${disturbed ? display : -1}`}
             onValueChange={(value) => {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.disturbed = true;
                 draft.display = Number(value);
               });

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

@@ -14,14 +14,13 @@ export function Title() {
       ? '2rem'
       : `min(16vh, ${125 / name.length}vw)`
     : `min(12vh, ${75 / name.length}vw)`;
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   return (
     <Flex
       onPointerDown={(event) => {
         event.preventDefault();
 
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.revealed = true;
         });
       }}

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

@@ -32,9 +32,7 @@ export function Controls({
   zoomable = true,
   enableRotate = true,
 }: ControlsProps) {
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const duelStore = Duel.useStore();
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const camera = useThree((state) => state.camera as PerspectiveCamera);
   const canvas = useThree((state) => state.gl.domElement);
   const orbitControls = useRef<OrbitControlsClass>(null);
@@ -102,7 +100,7 @@ export function Controls({
   });
 
   useEffect(() => {
-    const unsubscribeTankopediaEphemeral = tankopediaEphemeralStore.subscribe(
+    const unsubscribeTankopediaEphemeral = TankopediaEphemeral.on(
       (state) => state.controlsEnabled,
       (enabled) => {
         if (orbitControls.current) orbitControls.current.enabled = enabled;
@@ -222,7 +220,7 @@ export function Controls({
     }
 
     function disturb() {
-      mutateTankopediaEphemeral((draft) => {
+      TankopediaEphemeral.mutate((draft) => {
         draft.disturbed = true;
       });
     }
@@ -268,7 +266,7 @@ export function Controls({
       enableZoom={zoomable}
       zoomSpeed={zoomable ? undefined : 0}
       ref={orbitControls}
-      enabled={tankopediaEphemeralStore.getState().controlsEnabled}
+      enabled={TankopediaEphemeral.state.controlsEnabled}
       enableDamping={false}
       autoRotateSpeed={1 / 4}
     />

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

@@ -6,10 +6,9 @@ import { TankopediaEphemeral } from '../../../../../../stores/tankopediaEphemera
 
 export function InitialFogReveal() {
   const fog = useThree((state) => state.scene.fog as Fog | null);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
-    mutateTankopediaEphemeral((draft) => {
+    TankopediaEphemeral.mutate((draft) => {
       draft.revealed = true;
     });
 

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

@@ -16,14 +16,12 @@ import { ModelTankWrapper } from '../../../../../Armor/components/ModelTankWrapp
 export function TankModel() {
   const duelStore = Duel.useStore();
   const protagonist = Duel.use((draft) => draft.protagonist);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const track = Duel.use((state) => state.protagonist.track);
   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 mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const tankModelDefinition = useTankModelDefinition();
   const turretModelDefinition =
     tankModelDefinition.turrets[protagonist.turret.id];
@@ -63,13 +61,12 @@ export function TankModel() {
         function onPointerDown(event: ThreeEvent<PointerEvent>) {
           if (
             isTrack &&
-            tankopediaEphemeralStore.getState().display ===
-              TankopediaDisplay.Model
+            TankopediaEphemeral.state.display === TankopediaDisplay.Model
           ) {
             position.set(event.clientX, event.clientY);
             event.stopPropagation();
 
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = false;
             });
 
@@ -88,7 +85,7 @@ export function TankModel() {
           translateTexture(deltaX + deltaY);
         }
         function handlePointerUp() {
-          mutateTankopediaEphemeral((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.controlsEnabled = true;
           });
 
@@ -130,10 +127,10 @@ export function TankModel() {
 
             position.set(event.clientX, event.clientY);
 
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = false;
             });
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.shot = undefined;
               draft.highlightArmor = undefined;
             });
@@ -169,7 +166,7 @@ export function TankModel() {
             modelTransformEvent.dispatch({ pitch, yaw });
           }
           function handlePointerUp() {
-            mutateTankopediaEphemeral((draft) => {
+            TankopediaEphemeral.mutate((draft) => {
               draft.controlsEnabled = true;
             });
             window.removeEventListener('pointermove', handlePointerMove);
@@ -213,10 +210,10 @@ export function TankModel() {
             function onPointerDown(event: ThreeEvent<PointerEvent>) {
               event.stopPropagation();
 
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = false;
               });
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.shot = undefined;
                 draft.highlightArmor = undefined;
               });
@@ -255,7 +252,7 @@ export function TankModel() {
               modelTransformEvent.dispatch({ pitch, yaw });
             }
             function handlePointerUp() {
-              mutateTankopediaEphemeral((draft) => {
+              TankopediaEphemeral.mutate((draft) => {
                 draft.controlsEnabled = true;
               });
               window.removeEventListener('pointermove', handlePointerMove);

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

@@ -22,7 +22,6 @@ const skeletonMaterial = new ShaderMaterial({
 
 export function TransitionSkeleton() {
   const protagonist = Duel.use((draft) => draft.protagonist);
-  const tankopediaEphemeralStore = TankopediaEphemeral.useStore();
   const track = Duel.use((state) => state.protagonist.track);
   const turret = Duel.use((state) => state.protagonist.turret);
   const hullContainer = useRef<Group>(null);
@@ -34,7 +33,7 @@ export function TransitionSkeleton() {
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
   const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
-  const revealed = tankopediaEphemeralStore((state) => state.revealed);
+  const revealed = TankopediaEphemeral.use((state) => state.revealed);
 
   useTankTransform(track, turret, turretContainer, gunContainer);
 

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

@@ -49,7 +49,6 @@ export const fogAnimationTime = 2.5;
 export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
   ({ thicknessRange, naked }, ref) => {
     const fog = useRef(new Fog('black', forNear1, fogFar1));
-    const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
     const canvas = useRef<HTMLCanvasElement>(null);
     const hasImprovedVerticalStabilizer = useEquipment(122);
     const hasDownImprovedVerticalStabilizer = useEquipment(124);
@@ -177,13 +176,13 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
 
     useEffect(() => {
       if (display !== TankopediaDisplay.DynamicArmor) {
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.shot = undefined;
         });
       }
 
       if (display !== TankopediaDisplay.StaticArmor) {
-        mutateTankopediaEphemeral((draft) => {
+        TankopediaEphemeral.mutate((draft) => {
           draft.highlightArmor = undefined;
         });
       }
@@ -201,7 +200,7 @@ export const TankSandbox = forwardRef<HTMLCanvasElement, TankSandboxProps>(
         shadows="soft"
         onPointerDown={handlePointerDown}
         onPointerMissed={() => {
-          mutateTankopediaEphemeral((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.shot = undefined;
             draft.highlightArmor = undefined;
           });

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

@@ -38,7 +38,6 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
   }, [protagonist]);
   const duelStore = Duel.useStore();
   const mutateDuel = Duel.useMutation();
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
 
   useEffect(() => {
     if (disturbed) {
@@ -55,7 +54,7 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
           mutateDuel((draft) => {
             draft.antagonist.shell = shells[index];
           });
-          mutateTankopediaEphemeral((draft) => {
+          TankopediaEphemeral.mutate((draft) => {
             draft.customShell = undefined;
           });
         }

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

@@ -21,7 +21,6 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
   const { locale, strings } = useLocale();
   const master = Duel.use((state) => state.protagonist.tank);
   const xpMultiplier = TankopediaEphemeral.use((state) => state.xpMultiplier);
-  const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const container = useRef<HTMLDivElement>(null);
   const lines = useMemo(() => {
     function extend(line: Line): Line[] {
@@ -148,7 +147,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
                   cursor: 'pointer',
                 }}
                 onClick={() => {
-                  mutateTankopediaEphemeral((draft) => {
+                  TankopediaEphemeral.mutate((draft) => {
                     draft.xpMultiplier = multiplier;
                   });
                 }}

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

@@ -43,11 +43,12 @@ function Container() {
   const model = modelDefinitions.models[tank.id];
 
   return (
-    <TankopediaEphemeral.Provider data={model}>
+    <>
+      <TankopediaEphemeral.Provider args={model} />
       <Duel.Provider data={{ tank, model, provisionDefinitions }}>
         <Content />
       </Duel.Provider>
-    </TankopediaEphemeral.Provider>
+    </>
   );
 }
 

packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -41,28 +41,27 @@ export function Page({ id, skeleton, locale, guide }: PageProps) {
 
   return (
     <LocaleProvider locale={locale}>
-      <TankopediaEphemeral.Provider data={model}>
-        <App.Provider>
-          <TankopediaPersistent.Provider>
-            <Duel.Provider
-              data={{ tank, model, provisionDefinitions: provisionDefinitions }}
-            >
-              <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
-                <HeroSection skeleton={skeleton} />
-                <MetaSection />
-                <CalloutsSection />
-                {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
-                  <TechTreeSection skeleton={skeleton} />
-                )}
-                <CharacteristicsSection skeleton={skeleton} />
-                <GameModeSection />
-                {guide && <GuideSection guide={guide} />}
-                <VideoSection skeleton={skeleton} />
-              </PageWrapper>
-            </Duel.Provider>
-          </TankopediaPersistent.Provider>
-        </App.Provider>
-      </TankopediaEphemeral.Provider>
+      <TankopediaEphemeral.Provider args={model} />
+      <App.Provider>
+        <TankopediaPersistent.Provider>
+          <Duel.Provider
+            data={{ tank, model, provisionDefinitions: provisionDefinitions }}
+          >
+            <PageWrapper p="0" maxWidth="unset" color="purple" gap="9" pb="9">
+              <HeroSection skeleton={skeleton} />
+              <MetaSection />
+              <CalloutsSection />
+              {tank.type === TankType.RESEARCHABLE && !tank.deprecated && (
+                <TechTreeSection skeleton={skeleton} />
+              )}
+              <CharacteristicsSection skeleton={skeleton} />
+              <GameModeSection />
+              {guide && <GuideSection guide={guide} />}
+              <VideoSection skeleton={skeleton} />
+            </PageWrapper>
+          </Duel.Provider>
+        </TankopediaPersistent.Provider>
+      </App.Provider>
     </LocaleProvider>
   );
 }

packages/website/src/pages/api/tankopedia/tank-icon/[id]/_index.tsx

@@ -28,9 +28,8 @@ export function Page({ id }: PageProps) {
       <App.Provider>
         <TankopediaPersistent.Provider>
           <Duel.Provider data={{ provisionDefinitions, model, tank }}>
-            <TankopediaEphemeral.Provider data={model}>
-              <Content />
-            </TankopediaEphemeral.Provider>
+            <TankopediaEphemeral.Provider args={model} />
+            <Content />
           </Duel.Provider>
         </TankopediaPersistent.Provider>
       </App.Provider>

packages/website/src/stores/tankopediaEphemeral.ts

@@ -4,13 +4,11 @@ import {
   type ModelDefinition,
 } from '@blitzkit/core';
 import type { Vector3 } from 'three';
-import { create } from 'zustand';
-import { subscribeWithSelector } from 'zustand/middleware';
+import { Varuna } from 'varuna';
 import type { ArmorType } from '../components/Armor/components/SpacedArmorScene';
 import type { ExternalModuleVariant } from '../components/Armor/components/SpacedArmorSceneComponent';
 import type { XP_MULTIPLIERS } from '../components/Tankopedia/TechTreeSection';
 import { awaitableSkillDefinitions } from '../core/awaitables/skillDefinitions';
-import { createContextualStore } from '../core/zustand/createContextualStore';
 import { TankopediaDisplay } from './tankopediaPersistent/constants';
 
 export interface ShotLayerBase {
@@ -109,20 +107,17 @@ interface TankopediaEphemeral {
 
 const skillDefinitions = await awaitableSkillDefinitions;
 
-export const TankopediaEphemeral = createContextualStore(
-  (model: ModelDefinition) => {
-    return create<TankopediaEphemeral>()(
-      subscribeWithSelector<TankopediaEphemeral>(() => ({
-        disturbed: false,
-        revealed: false,
-        relativeAgainst: TankopediaRelativeAgainst.Class,
-        editStatic: false,
-        skills: createDefaultSkills(skillDefinitions),
-        model,
-        controlsEnabled: true,
-        xpMultiplier: 1,
-        display: TankopediaDisplay.Model,
-      })),
-    );
-  },
-);
+export const TankopediaEphemeral = new Varuna<
+  TankopediaEphemeral,
+  ModelDefinition
+>((model) => ({
+  disturbed: false,
+  revealed: false,
+  relativeAgainst: TankopediaRelativeAgainst.Class,
+  editStatic: false,
+  skills: createDefaultSkills(skillDefinitions),
+  model,
+  controlsEnabled: true,
+  xpMultiplier: 1,
+  display: TankopediaDisplay.Model,
+}));