@reearth/core 0.0.7-alpha.49 → 0.0.7-alpha.50

package/dist/index.d.ts

@@ -6,11 +6,11 @@ import { CSSProperties } from 'react';
 import { Feature as Feature_2 } from 'geojson';
 import { ForwardRefExoticComponent } from 'react';
 import { LineString } from 'geojson';
-import { MemoExoticComponent } from 'react';
 import { MultiLineString } from 'geojson';
 import { MultiPoint } from 'geojson';
 import { MultiPolygon } from 'geojson';
 import { MutableRefObject } from 'react';
+import { NamedExoticComponent } from 'react';
 import { Point } from 'geojson';
 import { Polygon as Polygon_2 } from 'geojson';
 import { PropsWithoutRef } from 'react';
@@ -335,9 +335,9 @@ declare type CoreContext = {
 
 export declare const coreContext: Context<CoreContext>;
 
-export declare const CoreVisualizer: MemoExoticComponent<ForwardRefExoticComponent<CoreVisualizerProps & {
+export declare const CoreVisualizer: NamedExoticComponent<CoreVisualizerProps & {
 children?: ReactNode;
-} & RefAttributes<MapRef>>>;
+} & RefAttributes<MapRef>>;
 
 export declare type CoreVisualizerProps = {
     engine?: EngineType;
@@ -512,7 +512,7 @@ export declare type EngineProps = {
     shouldRender?: boolean;
     meta?: Record<string, unknown>;
     displayCredits?: boolean;
-    layersRef?: RefObject<LayersRef>;
+    layersRef?: RefObject<LayersRef | null>;
     requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
     timelineManagerRef?: TimelineManagerRef;
     onLayerSelect?: (layerId: string | undefined, featureId?: string, options?: LayerSelectionReason, info?: SelectedFeatureInfo) => void;
@@ -603,7 +603,7 @@ export declare type EngineRef = {
     tick: () => Date | void;
     inViewport: (location?: LatLng) => boolean;
     onTick: TickEvent;
-    tickEventCallback?: RefObject<TickEventCallback[]>;
+    tickEventCallback?: RefObject<TickEventCallback[] | null>;
     removeTickEventListener: TickEvent;
     findFeatureById: (layerId: string, featureId: string) => Feature | undefined;
     bringToFront: (layerId: string) => void;
@@ -1367,7 +1367,7 @@ declare type Props_2 = Omit<Props_3, "atomMap" | "isHidden" | "selectedLayerId">
     hiddenLayers?: string[];
     viewerProperty?: ViewerProperty;
     requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
-    engineRef?: RefObject<EngineRef>;
+    engineRef?: RefObject<EngineRef | null>;
     onLayerSelect?: (layerId: string | undefined, featureId: string | undefined, layer: (() => Promise<ComputedLayer | undefined>) | undefined, reason: LayerSelectionReason | undefined, info: SelectedFeatureInfo | undefined) => void;
     onMount?: () => void;
 };
@@ -1551,8 +1551,8 @@ export declare type SketchOptions = {
 };
 
 export declare type SketchProps = {
-    layersRef: RefObject<LayersRef>;
-    engineRef: RefObject<EngineRef>;
+    layersRef: RefObject<LayersRef | null>;
+    engineRef: RefObject<EngineRef | null>;
     SketchComponent?: SketchComponentType;
     selectedFeature?: Feature;
     interactionMode?: InteractionModeType;
@@ -1791,7 +1791,7 @@ export declare type Undefinable<T extends object> = {
 
 export declare function useGet<T>(value: T): () => T;
 
-export declare const useVisualizer: () => RefObject<MapRef>;
+export declare const useVisualizer: () => RefObject<MapRef | null>;
 
 export declare type ValueType = keyof ValueTypes;
 
@@ -1836,7 +1836,7 @@ export declare type Viewport = {
     query: Record<string, string>;
 };
 
-export declare type VisualizerContext = RefObject<MapRef>;
+export declare type VisualizerContext = RefObject<MapRef | null>;
 
 export declare type WrappedRef<T> = {
     [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: T[P] extends (...args: infer A) => infer R ? (...args: A) => R | undefined : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reearth/core",
-  "version": "0.0.7-alpha.49",
+  "version": "0.0.7-alpha.50",
   "author": "Re:Earth contributors <community@reearth.io>",
   "license": "Apache-2.0",
   "description": "A library that abstracts a map engine as one common API.",
@@ -29,26 +29,26 @@
   },
   "peerDependencies": {
     "cesium": "1.118.x",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@radix-ui/react-checkbox": "1.1.1",
-    "@radix-ui/react-dialog": "1.1.1",
-    "@radix-ui/react-icons": "1.3.0",
-    "@radix-ui/react-select": "2.1.1",
-    "@radix-ui/react-separator": "1.1.0",
-    "@radix-ui/react-slider": "1.2.2",
-    "@radix-ui/react-slot": "1.1.0",
-    "@radix-ui/react-switch": "1.1.0",
-    "@radix-ui/react-toggle": "1.1.0",
+    "@radix-ui/react-checkbox": "1.3.3",
+    "@radix-ui/react-dialog": "1.1.15",
+    "@radix-ui/react-icons": "1.3.2",
+    "@radix-ui/react-select": "2.2.6",
+    "@radix-ui/react-separator": "1.1.8",
+    "@radix-ui/react-slider": "1.3.6",
+    "@radix-ui/react-slot": "1.2.4",
+    "@radix-ui/react-switch": "1.2.6",
+    "@radix-ui/react-toggle": "1.1.10",
     "@reearth/cesium-mvt-imagery-provider": "1.6.1",
     "@reearth/spatial-id-sdk": "0.0.0",
     "@rot1024/use-transition": "1.0.0",
     "@seznam/compose-react-refs": "1.0.6",
     "@turf/invariant": "6.5.0",
     "@turf/turf": "6.5.0",
-    "@types/proj4": "2.5.5",
+    "@types/proj4": "2.5.6",
     "@ungap/event-target": "0.2.4",
     "@xstate/react": "3.2.1",
     "cesium-dnd": "1.1.0",
@@ -59,27 +59,27 @@
     "geojson": "0.5.0",
     "jotai": "1.12.1",
     "js-md5": "0.7.3",
-    "jsep": "1.3.8",
+    "jsep": "1.4.0",
     "jsonpath-plus": "10.3.0",
     "jszip": "3.10.1",
     "lodash-es": "4.17.21",
     "lru-cache": "8.0.4",
     "pbf": "3.2.1",
-    "proj4": "2.11.0",
+    "proj4": "2.20.2",
     "protomaps": "1.23.1",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-error-boundary": "4.0.11",
     "react-nl2br": "1.0.4",
-    "react-use": "17.5.0",
-    "resium": "1.18.2",
+    "react-use": "17.6.0",
+    "resium": "1.18.4",
     "suspend-react": "0.1.3",
     "tailwind-merge": "2.5.2",
     "tailwindcss": "3.4.10",
     "tailwindcss-animate": "1.0.7",
     "tiny-invariant": "1.3.3",
-    "use-callback-ref": "1.3.2",
-    "use-custom-compare": "1.4.0",
+    "use-callback-ref": "1.3.3",
+    "use-custom-compare": "1.5.0",
     "uuid": "9.0.1",
     "xstate": "4.38.2"
   },
@@ -87,55 +87,51 @@
     "@apollo/client": "3.8.1",
     "@chromatic-com/storybook": "^1.3.3",
     "@emotion/jest": "11.11.0",
-    "@storybook/addon-essentials": "8.0.8",
-    "@storybook/addon-interactions": "8.0.8",
-    "@storybook/addon-links": "8.0.8",
-    "@storybook/addon-onboarding": "8.0.8",
-    "@storybook/blocks": "8.0.8",
-    "@storybook/react": "8.0.8",
-    "@storybook/react-vite": "8.0.8",
-    "@storybook/test": "8.0.8",
+    "@storybook/addon-essentials": "8.4.7",
+    "@storybook/addon-interactions": "8.4.7",
+    "@storybook/addon-links": "8.4.7",
+    "@storybook/addon-onboarding": "8.4.7",
+    "@storybook/blocks": "8.4.7",
+    "@storybook/react": "8.4.7",
+    "@storybook/react-vite": "8.4.7",
+    "@storybook/test": "8.4.7",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
     "@types/d3": "7.4.3",
-    "@types/geojson": "7946.0.14",
-    "@types/js-md5": "0.7.2",
+    "@types/geojson": "7946.0.16",
+    "@types/js-md5": "0.8.0",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "20.12.7",
+    "@types/node": "20.17.15",
     "@types/pbf": "3.0.5",
-    "@types/react": "18.3.0",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "19.0.0",
+    "@types/react-dom": "19.0.0",
     "@types/scheduler": "0.23.0",
     "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "7.2.0",
-    "@typescript-eslint/parser": "7.2.0",
     "@vitejs/plugin-react": "4.2.1",
     "@xstate/cli": "0.5.17",
-    "autoprefixer": "10.4.20",
+    "autoprefixer": "10.4.22",
     "cesium": "1.118.0",
-    "class-variance-authority": "0.7.0",
+    "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "eslint": "8.57.0",
     "eslint-config-reearth": "0.3.0",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-react-refresh": "0.4.6",
     "eslint-plugin-storybook": "0.8.0",
     "jsdom": "22.1.0",
-    "postcss": "8.4.41",
-    "prettier": "3.2.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "storybook": "8.0.8",
+    "postcss": "8.5.6",
+    "prettier": "3.1.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "storybook": "8.4.7",
     "typescript": "5.2.2",
     "vite": "5.0.8",
     "vite-plugin-cesium": "1.2.23",
     "vite-plugin-dts": "3.8.1",
-    "vite-plugin-svgr": "4.2.0",
+    "vite-plugin-svgr": "4.5.0",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "1.0.4",
     "web-streams-polyfill": "3.2.1"
   },
   "resolutions": {
-    "jackspeak": "2.1.1"
+    "jackspeak": "3.1.2"
   }
 }

package/src/Map/ClusteredLayers/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentType, useMemo, useCallback, ReactNode } from "react";
+import { ComponentType, useMemo, useCallback, ReactNode, type JSX } from "react";
 
 import LayerComponent, { type CommonProps, type Props as LayerProps } from "../Layer";
 import type { Layer, Atom, Typography, DataType, ViewerProperty } from "../types";

package/src/Map/Layer/hooks.ts

@@ -90,7 +90,7 @@ export default function useHooks({
     });
   }, [layer, set]);
 
-  const intervalId = useRef<number>();
+  const intervalId = useRef<number>(undefined);
   useLayoutEffect(() => {
     const data = layer?.type === "simple" ? layer.data : undefined;
 
@@ -107,7 +107,7 @@ export default function useHooks({
     };
   }, [layer, forceUpdateFeatures]);
 
-  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties" | "value">>();
+  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties" | "value">>(undefined);
   useLayoutEffect(() => {
     const data = layer?.type === "simple" ? layer.data : undefined;
     const forceUpdatableData = pick(data, "csv", "jsonProperties", "value");

package/src/Map/Layer/index.tsx

@@ -1,4 +1,4 @@
-import { ComponentType } from "react";
+import { ComponentType, type JSX } from "react";
 
 import type {
   DataRange,

package/src/Map/Layers/hooks.ts

@@ -139,7 +139,7 @@ export default function useHooks({
     reason: LayerSelectionReason | undefined,
     info: SelectedFeatureInfo | undefined,
   ) => void;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   onMount?: () => void;
 }) {
   const layerMap = useMemo(() => new Map<string, Layer>(), []);
@@ -751,7 +751,7 @@ function useSelection({
     reason: LayerSelectionReason | undefined,
     info: SelectedFeatureInfo | undefined,
   ) => void;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   updateStyle: (layerId: string) => void;
 }) {
   const [selectedLayer, selectedComputedFeature]: SelectedLayer = useMemo(

package/src/Map/Layers/index.tsx

@@ -38,7 +38,7 @@ export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden" | "selected
   hiddenLayers?: string[];
   viewerProperty?: ViewerProperty;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   onLayerSelect?: (
     layerId: string | undefined,
     featureId: string | undefined,

package/src/Map/Sketch/hooks.ts

@@ -44,8 +44,8 @@ export type SketchFeatureCallback = (
 
 type Props = {
   ref: ForwardedRef<SketchRef>;
-  layersRef: RefObject<LayersRef>;
-  engineRef: RefObject<EngineRef>;
+  layersRef: RefObject<LayersRef | null>;
+  engineRef: RefObject<EngineRef | null>;
   interactionMode: InteractionModeType;
   selectedFeature?: Feature;
   overrideInteractionMode?: (mode: InteractionModeType) => void;
@@ -131,7 +131,7 @@ export default function ({
 
   const [selectedControlPointIndex, setSelectedControlPointIndex] = useState<number | undefined>();
   const markerGeometryRef = useRef<GeometryOptionsXYZ | null>(null);
-  const pointerLocationRef = useRef<[lng: number, lat: number, height: number]>();
+  const pointerLocationRef = useRef<[lng: number, lat: number, height: number]>(undefined);
 
   const isEditing = useMemo(() => state.matches("editing"), [state]);
 
@@ -643,7 +643,7 @@ export default function ({
 
 async function getCentroid(
   controlPoints: readonly Position3d[],
-  engineRef: RefObject<EngineRef>,
+  engineRef: RefObject<EngineRef | null>,
 ): Promise<Position3d | undefined> {
   let totalLat = 0;
   let totalLng = 0;

package/src/Map/Sketch/index.tsx

@@ -26,8 +26,8 @@ export type OnLayerSelectType = (
 ) => void;
 
 export type SketchProps = {
-  layersRef: RefObject<LayersRef>;
-  engineRef: RefObject<EngineRef>;
+  layersRef: RefObject<LayersRef | null>;
+  engineRef: RefObject<EngineRef | null>;
   SketchComponent?: SketchComponentType;
   selectedFeature?: Feature;
   interactionMode?: InteractionModeType;

package/src/Map/Sketch/usePluginSketchLayer.ts

@@ -11,7 +11,7 @@ export default ({
   layersRef,
   sketchOptions,
 }: {
-  layersRef: RefObject<LayersRef>;
+  layersRef: RefObject<LayersRef | null>;
   sketchOptions: SketchOptions;
 }) => {
   const pluginSketchLayerCreate = useCallback(

package/src/Map/Sketch/useSketch.ts

@@ -19,7 +19,7 @@ import {
 type Props = {
   state: sketchState;
   send: SketchInterpreter["send"];
-  engineRef: RefObject<EngineRef>;
+  engineRef: RefObject<EngineRef | null>;
   disableInteraction: boolean;
   type: SketchType | undefined;
   updateType: Dispatch<SetStateAction<SketchType | undefined>>;

package/src/Map/Sketch/useSketchFeature.ts

@@ -11,7 +11,7 @@ type Props = {
   sketchOptions: SketchOptions;
   from: "editor" | "plugin";
   updateType: Dispatch<SetStateAction<SketchType | undefined>>;
-  layersRef: RefObject<LayersRef>;
+  layersRef: RefObject<LayersRef | null>;
   pluginSketchLayerCreate: (feature: SketchFeature) => {
     layerId: string | undefined;
     featureId: string;

package/src/Map/SpatialId/hooks.ts

@@ -29,8 +29,8 @@ import { createSpatialIdSpace, getSpaceData, getVerticalLimits } from "./utils";
 
 type Props = {
   ref: ForwardedRef<SpatialIdRef>;
-  engineRef: RefObject<EngineRef>;
-  geoidRef: RefObject<GeoidRef>;
+  engineRef: RefObject<EngineRef | null>;
+  geoidRef: RefObject<GeoidRef | null>;
   terrainEnabled?: boolean;
   interactionMode?: InteractionModeType;
   overrideInteractionMode?: (mode: InteractionModeType) => void;

package/src/Map/SpatialId/index.tsx

@@ -13,8 +13,8 @@ import useHooks from "./hooks";
 import { SpatialIdRef } from "./types";
 
 type SpatialIdProps = {
-  engineRef: RefObject<EngineRef>;
-  geoidRef: RefObject<GeoidRef>;
+  engineRef: RefObject<EngineRef | null>;
+  geoidRef: RefObject<GeoidRef | null>;
   terrainEnabled?: boolean;
   interactionMode?: InteractionModeType;
   overrideInteractionMode?: (mode: InteractionModeType) => void;

package/src/Map/index.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, type Ref } from "react";
+import { forwardRef, useMemo, type Ref, type JSX } from "react";
 
 import { INTERACTION_MODES } from "../Visualizer/interactionMode";
 

package/src/Map/ref.ts

@@ -155,11 +155,11 @@ export function mapRef({
   geoidRef,
   timelineManagerRef,
 }: {
-  engineRef: RefObject<EngineRef>;
-  layersRef: RefObject<LayersRef>;
-  sketchRef: RefObject<SketchRef>;
-  spatialIdRef: RefObject<SpatialIdRef>;
-  geoidRef: RefObject<GeoidRef>;
+  engineRef: RefObject<EngineRef | null>;
+  layersRef: RefObject<LayersRef | null>;
+  sketchRef: RefObject<SketchRef | null>;
+  spatialIdRef: RefObject<SpatialIdRef | null>;
+  geoidRef: RefObject<GeoidRef | null>;
   timelineManagerRef?: TimelineManagerRef;
 }): MapRef {
   return {

package/src/Map/types/index.ts

@@ -187,7 +187,7 @@ export type EngineRef = {
   tick: () => Date | void;
   inViewport: (location?: LatLng) => boolean;
   onTick: TickEvent;
-  tickEventCallback?: RefObject<TickEventCallback[]>;
+  tickEventCallback?: RefObject<TickEventCallback[] | null>;
   removeTickEventListener: TickEvent;
   findFeatureById: (layerId: string, featureId: string) => Feature | undefined;
   bringToFront: (layerId: string) => void;
@@ -238,7 +238,7 @@ export type EngineProps = {
   shouldRender?: boolean;
   meta?: Record<string, unknown>;
   displayCredits?: boolean;
-  layersRef?: RefObject<LayersRef>;
+  layersRef?: RefObject<LayersRef | null>;
   requestingRenderMode?: MutableRefObject<RequestingRenderMode>;
   timelineManagerRef?: TimelineManagerRef;
   onLayerSelect?: (

package/src/Map/useTimelineManager.ts

@@ -87,7 +87,7 @@ type Props = {
     multiplier?: number;
     rangeType?: "unbounded" | "clamped" | "bounced";
   };
-  engineRef?: RefObject<EngineRef>;
+  engineRef?: RefObject<EngineRef | null>;
   timelineManagerRef?: TimelineManagerRef;
 };
 

package/src/Map/utils.ts

@@ -6,7 +6,7 @@ export function useGet<T>(value: T): () => T {
   return useCallback(() => ref.current, []);
 }
 
-export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef<T> {
+export function wrapRef<T>(ref: RefObject<T | null>, keys: FunctionKeys<T>): WrappedRef<T> {
   return Object.fromEntries(
     (Object.keys(keys) as (keyof T)[]).map(k => {
       return [k, (...args: any[]) => (ref.current?.[k] as any)?.(...args)];

package/src/Visualizer/context.tsx

@@ -2,11 +2,11 @@ import { FC, PropsWithChildren, RefObject, createContext, useContext, useMemo }
 
 import { MapRef } from "../Map";
 
-const context = createContext<RefObject<MapRef> | undefined>(undefined);
+const context = createContext<RefObject<MapRef | null> | undefined>(undefined);
 
-export type Context = RefObject<MapRef>;
+export type Context = RefObject<MapRef | null>;
 
-export const useVisualizer = (): RefObject<MapRef> => {
+export const useVisualizer = (): RefObject<MapRef | null> => {
   const value = useContext(context);
   if (!value) {
     throw new Error("Visualizer is not declared. You have to use this hook inside of Visualizer");
@@ -14,11 +14,11 @@ export const useVisualizer = (): RefObject<MapRef> => {
   return value;
 };
 
-const filterMapRefToContext = (mapRef: RefObject<MapRef>): Context => {
+const filterMapRefToContext = (mapRef: RefObject<MapRef | null>): Context => {
   return mapRef as Context;
 };
 
-export const VisualizerProvider: FC<PropsWithChildren<{ mapRef: RefObject<MapRef> }>> = ({
+export const VisualizerProvider: FC<PropsWithChildren<{ mapRef: RefObject<MapRef | null> }>> = ({
   mapRef,
   children,
 }) => {

package/src/Visualizer/hooks.ts

@@ -55,7 +55,7 @@ export default function useHooks(
 ) {
   const mapRef = useRef<MapRef>(null);
 
-  useImperativeHandle(ref, () => mapRef.current, []);
+  useImperativeHandle(ref, () => mapRef.current as MapRef, []);
 
   const wrapperRef = useRef<HTMLDivElement>(null);
 
@@ -119,7 +119,7 @@ export default function useHooks(
     [selectedLayer, onLayerSelect],
   );
 
-  const timelineManagerRef: TimelineManagerRef = useRef();
+  const timelineManagerRef: TimelineManagerRef = useRef(undefined);
 
   // camera
   const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
@@ -145,7 +145,7 @@ export default function useHooks(
   const featureFlags = INTERACTION_MODES[interactionMode ?? "default"];
 
   // layer edit
-  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>();
+  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>(undefined);
   const onLayerEdit = useCallback((cb: (e: LayerEditEvent) => void) => {
     onLayerEditRef.current = cb;
   }, []);
@@ -154,7 +154,7 @@ export default function useHooks(
   }, []);
 
   // layer visiblity
-  const onLayerVisibilityRef = useRef<(e: LayerVisibilityEvent) => void>();
+  const onLayerVisibilityRef = useRef<(e: LayerVisibilityEvent) => void>(undefined);
   const onLayerVisibility = useCallback((cb: (e: LayerVisibilityEvent) => void) => {
     onLayerVisibilityRef.current = cb;
   }, []);
@@ -163,7 +163,7 @@ export default function useHooks(
   }, []);
 
   // layer load
-  const onLayerLoadRef = useRef<(e: LayerLoadEvent) => void>();
+  const onLayerLoadRef = useRef<(e: LayerLoadEvent) => void>(undefined);
   const onLayerLoad = useCallback((cb: (e: LayerLoadEvent) => void) => {
     onLayerLoadRef.current = cb;
   }, []);
@@ -172,21 +172,21 @@ export default function useHooks(
   }, []);
 
   // multiple feature selection
-  const onLayerSelectWithRectStartRef = useRef<(e: LayerSelectWithRectStart) => void>();
+  const onLayerSelectWithRectStartRef = useRef<(e: LayerSelectWithRectStart) => void>(undefined);
   const onLayerSelectWithRectStart = useCallback((cb: (e: LayerSelectWithRectStart) => void) => {
     onLayerSelectWithRectStartRef.current = cb;
   }, []);
   const handleLayerSelectWithRectStart = useCallback((e: LayerSelectWithRectStart) => {
     onLayerSelectWithRectStartRef.current?.(e);
   }, []);
-  const onLayerSelectWithRectMoveRef = useRef<(e: LayerSelectWithRectMove) => void>();
+  const onLayerSelectWithRectMoveRef = useRef<(e: LayerSelectWithRectMove) => void>(undefined);
   const onLayerSelectWithRectMove = useCallback((cb: (e: LayerSelectWithRectMove) => void) => {
     onLayerSelectWithRectMoveRef.current = cb;
   }, []);
   const handleLayerSelectWithRectMove = useCallback((e: LayerSelectWithRectMove) => {
     onLayerSelectWithRectMoveRef.current?.(e);
   }, []);
-  const onLayerSelectWithRectEndRef = useRef<(e: LayerSelectWithRectEnd) => void>();
+  const onLayerSelectWithRectEndRef = useRef<(e: LayerSelectWithRectEnd) => void>(undefined);
   const onLayerSelectWithRectEnd = useCallback((cb: (e: LayerSelectWithRectEnd) => void) => {
     onLayerSelectWithRectEndRef.current = cb;
   }, []);

package/src/Visualizer/useViewport.ts

@@ -10,7 +10,7 @@ export type Viewport = {
 };
 
 type Props = {
-  wrapperRef: RefObject<HTMLDivElement>;
+  wrapperRef: RefObject<HTMLDivElement | null>;
 };
 
 export default ({ wrapperRef }: Props) => {

package/src/engines/Cesium/Feature/Box/hooks/box.ts

@@ -127,7 +127,7 @@ export const useHooks = ({
   );
 
   // ScalePoint event handlers
-  const currentPointIndex = useRef<number>();
+  const currentPointIndex = useRef<number>(undefined);
   const handlePointMouseDown: PointEventCallback = useCallback(
     (_, { index }) => {
       if (!viewer) {
@@ -138,7 +138,7 @@ export const useHooks = ({
     },
     [viewer],
   );
-  const prevMousePosition2dForPoint = useRef<Cartesian2>();
+  const prevMousePosition2dForPoint = useRef<Cartesian2>(undefined);
   const handlePointMouseMove: PointEventCallback = useCallback(
     (e, { position, oppositePosition, pointLocal, index, layerId }) => {
       if (
@@ -282,7 +282,7 @@ export const useHooks = ({
   }, [viewer]);
 
   // Edge event handlers
-  const currentEdgeIndex = useRef<number>();
+  const currentEdgeIndex = useRef<number>(undefined);
   const handleEdgeMouseDown: EdgeEventCallback = useCallback(
     (_, { index }) => {
       if (!viewer) {
@@ -293,7 +293,7 @@ export const useHooks = ({
     },
     [viewer],
   );
-  const prevMouseXAxisForEdge = useRef<number>();
+  const prevMouseXAxisForEdge = useRef<number>(undefined);
   const handleEdgeMouseMove: EdgeEventCallback = useCallback(
     (e, { index, layerId }) => {
       if (currentEdgeIndex.current !== index) {

package/src/engines/Cesium/Feature/HeatMap/HeatmapMesh.tsx

@@ -62,7 +62,7 @@ export const HeatmapMesh = memo(
     ) => {
       const { scene } = useCesium();
       const groundPrimitives = scene?.groundPrimitives;
-      const primitiveRef = useRef<GroundPrimitive>();
+      const primitiveRef = useRef<GroundPrimitive>(undefined);
 
       const material = useConstant(() =>
         createHeatmapMeshMaterial({

package/src/engines/Cesium/Feature/PhotoOverlay/hooks.ts

@@ -34,7 +34,7 @@ export default function ({ isSelected, camera }: { isSelected?: boolean; camera?
   cameraRef.current = camera;
   const storytelling = useRef(false);
   storytelling.current = selectionReason?.reason === "storytelling";
-  const prevCamera = useRef<Camera>();
+  const prevCamera = useRef<Camera>(undefined);
 
   // camera flight
   useEffect(() => {

package/src/engines/Cesium/Feature/PhotoOverlay/index.tsx

@@ -120,7 +120,9 @@ export default function PhotoOverlay({
             alignItems: "center",
             transition:
               photoOverlayImageTransiton === "entering" || photoOverlayImageTransiton === "exiting"
-                ? `all ${photoOverlayImageTransiton === "exiting" ? photoExitDuration : photoDuration}s ease`
+                ? `all ${
+                    photoOverlayImageTransiton === "exiting" ? photoExitDuration : photoDuration
+                  }s ease`
                 : undefined,
             opacity:
               photoOverlayImageTransiton === "entering" || photoOverlayImageTransiton === "entered"